我們有了html超文本標記語言實現(xiàn)了網(wǎng)站頁面展現(xiàn)，展現(xiàn)文字、表格、圖片、超鏈接等，有了css樣式表實現(xiàn)了頁面的美化，這些技術(shù)實現(xiàn)了靜態(tài)網(wǎng)頁。
日常展現(xiàn)是已經(jīng)足夠了，但是如果我們要做個注冊功能呢？如論壇，我們注冊個論壇來發(fā)文章，聊天。這就帶來一個問題，信息如何根據(jù)不同的使用者，展現(xiàn)不同的內(nèi)容呢？再如我注冊登錄和你注冊登錄，我們在網(wǎng)站上顯示的登錄名稱就不同。這html+css就無能為力了，它們無法實現(xiàn)，那誰能辦到呢？這時javascript就派上用場了。它能實現(xiàn)瀏覽器用戶和后臺服務(wù)器進行交互。注冊、登錄、添加商品到購物車、下訂單對它而言都是小菜一碟。有了javascript的加入，實現(xiàn)頁面和后臺系統(tǒng)的交互，實現(xiàn)用戶信息的注冊，實現(xiàn)用戶的登錄，實現(xiàn)個性化的數(shù)據(jù)展現(xiàn)，功能強大不老少。業(yè)界把這樣的網(wǎng)頁稱為動態(tài)網(wǎng)頁，把這樣的網(wǎng)站稱為動態(tài)網(wǎng)站。
簡而言之，靜態(tài)網(wǎng)站只能看，不同瀏覽者看到內(nèi)容一致不能變化；動態(tài)網(wǎng)站可以讀寫數(shù)據(jù)，內(nèi)容根據(jù)不同瀏覽者展示不同的信息。
動態(tài)網(wǎng)站的軟件架構(gòu)是怎樣的呢？
用戶訪問頁面，頁面觸發(fā)事件創(chuàng)建XHR對象，進行ajax請求，請求訪問服務(wù)器端，請求被web中間件攔截并進行處理，由控制層框架springmvc中的controller進行接收，controller請求業(yè)務(wù)層spring框架的service服務(wù)，service請求持久層mybatis框架的mapper映射，mapper訪問數(shù)據(jù)庫。操作完數(shù)據(jù)庫，返回結(jié)果，mybatis封裝成java對象傳回service，service把java對象傳回controller，controller把java對象又轉(zhuǎn)換為json字符串，然后傳回瀏覽器，瀏覽器傳回給調(diào)用者XHR，XHR調(diào)用回調(diào)方法callback，callback進行json字符串的解析，從中拿到要展現(xiàn)的數(shù)據(jù)，通過javascript處理，最終回顯到頁面上。
可以看到這個調(diào)用過程是非常復雜的，跨越網(wǎng)絡(luò)，跨域多個服務(wù)器，很多技術(shù)應(yīng)用其中，而這一切的始作俑者是誰呢？誰讓這一切成為可能，它就是javascript，它實現(xiàn)了用戶的請求和響應(yīng)，實現(xiàn)了數(shù)據(jù)的動態(tài)展現(xiàn)，使早期靜態(tài)的網(wǎng)站走向了動態(tài)的網(wǎng)站。
JavaScript 是 web 前端開發(fā)者必學的三種語言之一：
JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導航者瀏覽器上首次設(shè)計實現(xiàn)而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它們根本沒有關(guān)系，java是強語言幾乎無所不能，而javascript是腳本語言，只局限于瀏覽器。
JavaScript遵循ECMA國際組織頒布的ECMAScript標準。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發(fā)布了ECMAScript 的第六版，簡稱為ES6。它的目標是使得JavaScript語言可以用來編寫復雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。很多js相關(guān)技術(shù)都遵循這個標準，如目前最受歡迎的Vue。
微軟出了符合規(guī)范類似javascript的稱為js，但一般開發(fā)者忽略它們的差異，全稱就習慣叫javascript，簡稱就習慣叫js。
全稱JavaScript，是一種弱類型語言，同其他語言一樣，有它自身的語法，數(shù)據(jù)類型，表達式，算術(shù)運算符等。
JS是一門 基于對象 和 事件驅(qū)動 的 腳本語言 ，通常用來提高網(wǎng)頁與用戶的交互性。
基于對象：它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。JS沒有類的概念，也沒有編譯的過程。是一邊解釋一邊執(zhí)行。
事件驅(qū)動：在JS中，大部分情況下都是通過事件觸發(fā)驅(qū)動函數(shù)執(zhí)行的，從而實現(xiàn)特定的功能。（比如點擊div將內(nèi)容替換為時間、當鼠標滑過元素，元素就有翻轉(zhuǎn)的動態(tài)。）
腳本語言：在網(wǎng)絡(luò)前端開發(fā)環(huán)境下，用于嵌入在客戶端瀏覽器中的一段小程序。
特點：
(1)JS是一門直譯式的語言，直接執(zhí)行的就是源代碼.
是一邊解釋一邊執(zhí)行，沒有編譯的過程（不像Java需要提前編譯為class文件再運行）.
(2)JS是一門弱類型的語言,沒有嚴格的數(shù)據(jù)類型.
優(yōu)勢：
(1)良好的交互性
(2)一定的安全性(JS被強制的要求,不能訪問瀏覽器以外的東西,只能訪問瀏覽器和瀏覽器內(nèi)部的資源)
(3)跨平臺性(Java語言具有跨平臺性,是因為有虛擬機)
只要有瀏覽器的地方都能執(zhí)行JS
<head> <title>hello</title> <meta charset='utf-8'/> <script>/* JS代碼 */ alert(100); function fn(){ alert('111'); } </script> </head> <body> <a href='#' onclick='fn();'>鼠標點擊事件...</a> </body>
<head> <meta charset='utf-8'/> <script>/* JS代碼 */ function fn(){ alert('JS的第1種引入方式'); } </script> </head> <body> <div id='div1' onclick='fn();'>Hello JavaScript</div> </body>
創(chuàng)建1.js文件
function fn(){
alert('JS的第2種引入方式');
}
在html中引入文件
<head> <meta charset='utf-8'/> <script src='1.js'> </script> </head> <body> <div id='div1' onclick='fn();'>Hello JavaScript</div> </body>
注意：不要同時通過一個script標簽引入JS代碼和JS文件，會導致代碼不會執(zhí)行！比如：
<script src='demo1.js'>
alert('哈哈哈哈。。。');//代碼不會執(zhí)行??！
</script>
單行注釋： //注釋內(nèi)容
多行注釋： /* 注釋內(nèi)容 */
包括:number/string/boolean/null/undefined
(1) 數(shù)值類型-number
在JS中，數(shù)值類型只有一種，就是浮點型。
在JS中，需要時會自動的進行數(shù)據(jù)類型的轉(zhuǎn)換，比如：在顯示和處理的時候，浮點型和整型會自動的轉(zhuǎn)換。
2.4+3.6=6;
Infinity ： 正無窮大
-Infinity ： 負無窮大
NaN : Not a Number 非數(shù)字， 和任何值都不相等，包括它本身
(2) 字符串類型-string
在JS中，字符串是基本數(shù)據(jù)類型。
在JS中，字符串直接量是通過單引號或者雙引號引起來。
var str1 = 'Hello…';
var str2 = 'CGB2103…';;
alert(str1);
(3) 布爾類型-boolean
值為true或者是false；
var s1 = false;
console.log(s1);
(4) undefined
值只有一個就是undefined。表示變量沒有初始化值。
比如：
a) var num; alert(num);//聲明了變量但是沒有為變量賦值，該變量的值就是undefined。
b) 或者訪問一個對象上不存在的屬性時，也是undefined。
c) 或者訪問數(shù)組中一個沒有的元素的位置時，該位置處的值也是undefined.
(5) null
值也只有一個，就是null。表示空值或者不存在的對象。
函數(shù)、數(shù)組、對象（自定義對象、內(nèi)置對象、DOM對象、BOM對象…）
js是弱類型語言，所有類型的變量都是用var關(guān)鍵字定義。并且參數(shù)的類型可以隨時轉(zhuǎn)換。
javascript沒有類似采用靜態(tài)語言類型，如java的變量類型是編譯期就確定的；而它采用了動態(tài)類型，也就是說在編譯期類型不確定，運行時會動態(tài)根據(jù)變量的賦值來決定它的類型，這點比較靈活。這也是雙刃劍，編譯期就難以檢查出其賦值的錯誤。
練習:變量交換
(1) 在JS中是通過 var 關(guān)鍵字來聲明一個變量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中聲明的變量是不區(qū)分類型的， 可以指向任意的數(shù)據(jù)類型。
var a = 1; a=true; a=100; alert(a);//100 function x(){ var m = 10; alert('局部變量:'+m); alert('全局變量:'+a); } alert('局部變量2:'+m);//局部變量失效,報錯
JS中的運算符和Java中的運算符大致相同
算術(shù)運算符: +，-，*，/，%，++，–
賦值運算符: =，+=，-=，*=，/=，%=
比較運算符: ==，!=, =，!, > ，< ，>=，<=
位運算符: & ， |
邏輯運算符: &&，||
前置邏輯運算符: ! (not)
三元運算符: ? :
常見運算符測試
var a = 3; var b = 1; console.log(a+b);//4 a+=4; console.log(a+b);//8 //a+=4; console.log(a==b); //true console.log(a==='3'); //false 如果兩邊比較的值不是同一種數(shù)據(jù)類型，===直接返回false，如果是同一種數(shù)據(jù)類型，==和===沒有區(qū)別！ console.log('1'=='1'); //true //由于JS中字符串是基本數(shù)據(jù)類型，比較字符串相等通過 == 進行！ var a = 1; alert(a++);//1 alert(++a);//3 alert(++a+a+++a);//4+4+5 alert(a>3?10:8); var b = 10; alert(a>b?a:b);//求兩個數(shù)里的大數(shù) var c = 8; var d = a>b?(a>c?a:c):(b>c?b:c); alert(d);//三個數(shù)里的大值
typeof運算符: 用于返回變量或者表達式 的數(shù)據(jù)類型
var i = 3; console.log(typeof i);//number i=true; console.log(typeof i);//boolean i='hello'; console.log(typeof i);//string console.log(typeof 123+'abc');//numberabc console.log(typeof (123+'abc'));//string
JS中的語句和Java中的語句用法也大致相同
var i = 3; if(i==4){ alert(“yes”); }else{ alert(“no”);//no } 例子: 接收用戶輸入的成績，判斷成績所屬的等級 80~100(包括80，也包括100) 優(yōu)秀 60~80(包括60，但不包括80) 中等 0~60(包括0，但不包括60) 不及格 其他值 輸入有誤 // prompt函數(shù)可以彈框提示用戶輸入成績, 并返回用戶輸入的內(nèi)容 var score = prompt('請輸入您的成績：'); console.log( score ); if( score >= 80 && score <=100 ){ alert('您的成績屬于：優(yōu)秀！'); }else if( score >= 60 && score < 80 ){ alert('您的成績屬于：中等！'); }else if( score >= 0 && score < 60 ){ alert('您的成績屬于：不及格！'); }else{ alert('您輸入的成績不合法，請重新輸入！'); }
var day = 3; switch( day ){ case 1: alert('今天是星期一'); break; case 2: alert('今天是星期二'); break; case 3: alert('今天是星期三'); break; case 4: alert('今天是星期四'); break; case 5: alert('今天是星期五'); break; }
for(var i=0;i<5;i++){ alert( i ); console.log(i); } var i=0; while(i<5){ alert(i); i++; } var sum = 0; for( var i=1; i<=100; i++ ){ sum += i; //sum = sum+i; } console.log(sum ); //沒有增強for循環(huán)
注意： JS中的語句，判斷條件可以不是boolean類型，因為JS中會自動進行數(shù)據(jù)類型的轉(zhuǎn)換。
JS數(shù)組用于在單個的變量中存儲多個值(其實就是一個容器)。
JS中的數(shù)組可以存儲例如：數(shù)值、字符串、布爾值、undefined、null、對象、函數(shù)等
var arr1 = new Array();//聲明一個空數(shù)組 var arr2 = new Array('abc', 'hello', true);//聲明一個具有初始值的數(shù)組 alert(arr2.length);//3 var arr4 = [];//聲明一個空數(shù)組 alert(arr4.length);//0 arr4 = ['abc', 'hello', true];//聲明一個具有初始值的數(shù)組 alert(arr4);
(1)JS數(shù)組中可以存放任意的數(shù)據(jù)類型
(2)JS中的數(shù)組長度可以被改變
var arr1 = [];//聲明一個空數(shù)組 console.log( arr1.length ); //此時數(shù)組長度為 0 arr1.length = 10; console.log( arr1.length ); //此時數(shù)組長度為 10 arr1[99] = 'abc'; console.log( arr1.length ); //此時數(shù)組長度為 100 arr1.length = 0; console.log( arr1.length ); //此時數(shù)組長度為 0
length屬性 -- 獲取數(shù)組的長度，還可以改變數(shù)組的長度 var a = [1,2,3]; alert(a.length); var arr = [123, 'abc', false, new Object() ] //遍歷數(shù)組 for( var i=0; i< arr.length; i++ ){ console.log( arr[i] ); } //for..in for(var i in a){ console.log('i:::'+i); } //循環(huán)接收用戶輸入，將數(shù)據(jù)存儲在數(shù)組中，直至輸入'exit’結(jié)束 c(); function c(){ var a=[]; for(;;){ var x=prompt('請輸入整數(shù):'); a[a.length]=x; if(x=='exit'){ break; } } console.log(a); }
函數(shù)就是一個具有功能的代碼塊, 可以反復調(diào)用
函數(shù)就是包裹在花括號中的代碼塊，前面使用了關(guān)鍵詞 function
聲明：function 函數(shù)名稱([參數(shù)列表]){ 函數(shù)體 } 調(diào)用: 函數(shù)名稱([參數(shù)列表]); 案例： function a(){ //無參函數(shù)定義 var a = [1,2,3,4,5]; //定義數(shù)組 var sum =0; //定義變量 for (var i = 0; i <a.length; i++) { if(a[i]%2==0){ sum+=a[i]; } } alert(sum); } a();//函數(shù)調(diào)用 function b(x,y){//定義含參函數(shù) alert(x+y); } b(1,'2');//函數(shù)調(diào)用 b(1,2);//函數(shù)調(diào)用
聲明：var 函數(shù)名稱 = function([參數(shù)列表]){ 函數(shù)體 } 調(diào)用: 函數(shù)名稱([參數(shù)列表]); 案例： // fn2(); //這種方式定義的函數(shù)還未加載就調(diào)用,會報錯.方式1沒問題 var fn2 = function(){ //定義無參函數(shù) alert(100); } fn2(); //函數(shù)調(diào)用 var fn3 = function(x,y){ //定義含參函數(shù) alert(x*y); } fn3(0.32,100);//函數(shù)調(diào)用 fn2('王海濤');參數(shù)個數(shù)不匹配，王海濤undefined var e = function(x,y){ //定義有返回值含參函數(shù) return x-y; } alert('函數(shù)返回值:::'+ e(1.1,10.9) ); //函數(shù)調(diào)用
注意: 在JS中調(diào)用函數(shù)時, 傳遞的參數(shù)個數(shù)如果與聲明的參數(shù)個數(shù)不相同, 也不會報錯。
但是最好按聲明的個數(shù)來傳遞, 因為個數(shù)不符, 可能會引發(fā)一些問題?。?！
利用function關(guān)鍵字聲明對象，用new關(guān)鍵字創(chuàng)建對象。
String/Array/Number/Math/JSON…
Window對象–代表瀏覽器中一個打開的窗口,了解一下即可，很多被UI替代
//String對象的功能 let a = 'javascript'; console.log( a.length ); //獲取字符串的長度 console.log( a.toUpperCase() ); //全轉(zhuǎn)大寫 let b = a.substring(1,5); //截取字符串[1,5) console.log( b ); console.log( a.concat('hello ~') ); //拼串 //Math對象 console.log( Math.PI );//π的值 console.log( Math.random() ); //隨機數(shù)0~1 console.log( Math.random() * 10 ); console.log( Math.round(1.9) );//對小數(shù)的處理,round四舍五入 console.log( Math.round(1.1) );//對小數(shù)的處理,round四舍五入 //Array對象 let c = [3,21,4,5,2]; console.log( c ); console.log( c.toString() );//打印數(shù)組里的數(shù)據(jù) console.log( c.sort() ); //對數(shù)組排序 //window對象--可以省略 window.alert(100);//彈出框 window.prompt(); //輸入框 window.confirm() ;//確認框
Document對象–代表整個HTML文檔，可用來訪問頁面中的所有元素
document.write() 動態(tài)向頁面寫入內(nèi)容
document.getElementById(id) 獲得指定id值的元素
document.getElementsByName(name) 獲得指定Name值的元素
學會簡單使用，后期被jQuery封裝，在后期被Vue框架封裝
(1)方式一：
/* 自定義對象*/ function Person(){ } /* 定義對象*/ var p1 = new Person(); /* 創(chuàng)建對象*/ p1.name='張三'; p1.age=20; console.log(p1); p1.say = function(){ /* 定義函數(shù)*/ console.log('haha'); } p1.say(); /* 函數(shù)調(diào)用*/ 上面展示了js的強大！js的牛掰之處就在于，它的屬性可以邊寫邊創(chuàng)建，非常靈活，而java不行，必須先定義。
上面展示了js的強大！js的牛掰之處就在于，它的屬性可以邊寫邊創(chuàng)建，非常靈活，而java不行，必須先定義。
(2)方式二:
var p2 = { 'pname':'李四', 'page':100, 'psay':function(){ /* this使用p2里定義的 */ console.log(this.pname+this.page); } } console.log(p2); p2.psay(); /* 函數(shù)調(diào)用*/
核心對象有：window瀏覽器窗口，navigator瀏覽器信息，location瀏覽器當前地址信息，history瀏覽器歷史信息，screen用戶屏幕信息。
DOM非常重要，實際開發(fā)更多通過js操作DOM對象實現(xiàn)對html頁面的操作，BOM也用，比較少用。所以學習重點放在DOM上。
DOM 是一項 W3C (World Wide Web Consortium) 標準，DOM（Document Object Model）文檔對象模型為JS操作html文檔所提供的一套API，通過這套API可以很方便的對html元素進行訪問及增刪改查操作。
--獲取對象: window.document --調(diào)用方法: getElementById('元素的id的屬性的值')--返回1個元素 getElementsByName('元素的name屬性的值')--返回多個元素(用數(shù)組) getElementsByClassName('元素的class屬性的值')--返回多個元素(用數(shù)組) getElementsByTagName('元素的標簽名的值')--返回多個元素(用數(shù)組) write()--向文檔寫 HTML 表達式 或 JavaScript 代碼 title--返回網(wǎng)頁的標題 id--設(shè)置或返回元素的id innerHTML--設(shè)置或返回元素的內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>DOM解析</title> <!-- js --> <script> function a(){ /* 按id獲取,返回1個 */ var x = document.getElementById('div1'); x.innerHTML='<h1>你好div</h1>'; /* 按name屬性值獲取,返回多個*/ var y = document.getElementsByName('div2'); console.log(y);//NodeList y[0].innerHTML='hello js...'; /* 按class屬性值獲取,返回多個*/ var z = document.getElementsByClassName('span1'); console.log(z);//HTMLCollection z[0].innerText='<p>我變了</p>' /* 按照標簽名獲取,返回多個 */ var m = document.getElementsByTagName('div'); console.log(m);//HTMLCollection m[1].style.fontSize=30+'px'; } </script> </head> <body> <div id='div1' onclick='a();'>我是div1</div> <div name='div2' onclick='a();'>我是div2</div> <span class='span1'>我是span1</span> <span class='span1'>我是span2</span> <a name='div2' id='a1'>我是a</a> <!-- js事件: --> <a href='#' onclick='method();'>單擊觸發(fā)js</a> <a href='#' ondblclick='method2();'>雙擊觸發(fā)js</a> <a href='#' onmouseenter='method3();'>滑過觸發(fā)js</a> <a href='#' onmouseleave='method4();'>滑走觸發(fā)js</a> <button onkeydown='alert(1);'>點我</button> </body> </html>
獲取頁面元素的4種方式:
注：dom樹在描述標簽時除id方式，其它都是以數(shù)組形式體現(xiàn)，哪怕是一個元素。
ajax往往要完整應(yīng)用還會配合一個技術(shù)：JSON，那什么是JSON呢？
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 對象簡譜) 起名不咋地，非常拗口，我們就記住它是一種輕量級的數(shù)據(jù)交換格式即可。它基于 ECMAScript (js規(guī)范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。是xml的終結(jié)者，成為主流開發(fā)方式（ajax異步請求，json返回）。
JSON 是存儲和交換文本信息的語法。當數(shù)據(jù)在瀏覽器與服務(wù)器之間進行交換時，這些數(shù)據(jù)只能是文本。JSON 屬于文本，并且我們能夠把任何 JavaScript 對象轉(zhuǎn)換為 JSON，然后將 JSON 發(fā)送到服務(wù)器。我們也能把從服務(wù)器接收到的任何 JSON 轉(zhuǎn)換為 JavaScript 對象。以這樣的方式，我們能夠把數(shù)據(jù)作為 JavaScript 對象來處理，無需復雜的解析和轉(zhuǎn)譯。
JSON數(shù)據(jù):
var a =' 'firstName' : 'John' '
JSON 對象:
var a = '{ 'firstName':'John' , 'lastName':'Doe' }'
JSON 數(shù)組:
var a = '[{ 'firstName':'Bill' , 'lastName':'Gates' },{ 'firstName':'George' , 'lastName':'Bush' }]';
使用JS里的內(nèi)置對象JSON.用來把以 JSON 格式寫的字符串 和 原生 JavaScript 對象互轉(zhuǎn).
給服務(wù)器發(fā)送數(shù)據(jù): 將JS對象轉(zhuǎn)成JSON字符串 JSON.stringify(Js對象)
接受服務(wù)器的數(shù)據(jù): JSON字符串轉(zhuǎn)成JS對象 JSON.parse('json字符串')
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>json</title> <script> //json用來在瀏覽器和服務(wù)器之間做數(shù)據(jù)傳輸,輕量級,格式簡單明了. //JSON是js的內(nèi)置對象,用來把json類型的字符串和js對象互轉(zhuǎn) //json類型的字符串---{ 'k1':'v1', 'k2':'v2', 'k3':'v3' } function jschuan(){ var jsonchuan = '{ 'k1':'v1', 'k2':'v2', 'k3':'v3' }'; document.getElementById('h').innerHTML=jsonchuan; } function chuan2js(){ var text='{ 'k1':'v1', 'k2':'v2', 'k3':'v3' }'; console.log(text); //從服務(wù)器收到的數(shù)據(jù)都是字符串,轉(zhuǎn)成js對象,用js語法解析屬性/方法 var jsobj = JSON.parse(text);//串轉(zhuǎn)js對象,就可以寫js代碼解析數(shù)據(jù) console.log(jsobj); document.getElementById('d').innerHTML=jsobj.k2; } function js2chuan(){ var obj = {'k1':'v1', 'k2':'v2', 'k3':'v3'}; console.log(obj); //把瀏覽器的數(shù)據(jù)發(fā)給服務(wù)器,服務(wù)器只要json串 var text = JSON.stringify(obj);//js對象轉(zhuǎn)成串 document.getElementById('p1').innerHTML=text; console.log(text); console.log(text.length); } </script> </head> <body> <p id='p1' onclick='js2chuan();'>我是p</p> <div id='d' onclick='chuan2js();'>我是div</div> <h1 id='h' onclick='jschuan();'>我是h1哦</h1> </body> </html>
AJAX = Asynchronous JavaScript And XML. AJAX 并非編程語言。
Ajax 允許通過與場景后面的 Web 服務(wù)器交換數(shù)據(jù)來異步更新網(wǎng)頁。這意味著可以更新網(wǎng)頁的部分，而不需要重新加載整個頁面。
所有現(xiàn)代瀏覽器都支持 XMLHttpRequest 對象。
XMLHttpRequest 對象用于同幕后服務(wù)器交換數(shù)據(jù)。這意味著可以更新網(wǎng)頁的部分，而不需要重新加載整個頁面。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>ajax-js版</title> <script> function change(){ // 1. 創(chuàng)建xhr對象,用于同幕后服務(wù)器交換數(shù)據(jù) var xhr = new XMLHttpRequest(); // 2. 定義當 readyState 屬性發(fā)生變化時被調(diào)用的函數(shù) xhr.onreadystatechange=function(){ //3. status是200表示請求成功,readyState是4表示請求已完成且響應(yīng)已就緒 if(this.status==200 && this.readyState==4){ // document.getElementById('d1').innerHTML='hi ajax'; //5.以字符串返回響應(yīng)數(shù)據(jù),并展示 document.getElementById('d1').innerHTML=this.responseText; } } //3.規(guī)定請求的類型(請求方式,文件位置,異步) xhr.open('get','1.json',true); //xhr.open('get','http://localhost:8080/car/get',true); //4.xhr將請求發(fā)送到服務(wù)器 xhr.send(); } </script> </head> <body> <!-- 點擊時,使用ajax修改文字 --> <div id='d1' onclick='change()'>你好</div> </body> </html>
專業(yè)人用專業(yè)的工具，瀏覽器調(diào)試谷歌、火狐最佳，使用F12打開調(diào)試窗口。也可以快捷鍵打開：ctrl+shift+i。
以表格形式展現(xiàn)：
聯(lián)系客服
