3、XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了流暢的接口。能夠以異步的方式從服務(wù)器取得更多的信息，意味著用戶單擊后，可以不必刷新頁面也能獲取新數(shù)據(jù)。也就是說可以使用XHR對象取得新數(shù)據(jù)，然后再通過DOM將新數(shù)據(jù)插入到頁面中

4、雖然Ajax名字中有XML的成分，但是呢，Ajax通信與數(shù)據(jù)格式無關(guān)，這種技術(shù)就是無須刷新頁面即可從服務(wù)器取得數(shù)據(jù)，但不一定是XML數(shù)據(jù)

二、操作：原生ajax和jQuery中封裝的ajax

1、原生ajax：

ajax作用：發(fā)送請求（設(shè)置請求setRequest）接收響應(yīng)(getResponse)

A、ajax原生方式發(fā)送請求：

Ajax中最重要也是最固定的部分就是http請求。

1)建立連接：（IE7及以上版本都支持XMLHttpRequest）

var xhr = new XMLHttpRequest(); //創(chuàng)建異步請求對象

2)Get請求：格式必須是（url?name1=value1&name2=value2）

xhr.open("get","01-register.php?name="+name);//初始化異步get請求
xhr.send(null); //與服務(wù)器建立連接

3)Post請求

xhr.open('post','01-XMLHTTPRequest-test.php');//請求報(bào)文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post請求設(shè)置請求頭*/
xhr.send('name=rose&age=20'); //請求報(bào)文體

4)get和post請求的區(qū)別：

★get不需要設(shè)置請求頭，而post需要設(shè)置請求頭

★get的數(shù)據(jù)傳遞通過url進(jìn)行，而post的數(shù)據(jù)在send方法中傳遞

B、ajax原生方式接收響應(yīng)：

/*監(jiān)聽服務(wù)器的響應(yīng)*/
xhr.onreadystatechange=function(){
/*判斷當(dāng)前的響應(yīng)是否成功 1.服務(wù)器做出了響應(yīng) 2.響應(yīng)的結(jié)果是正確的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //輸出從服務(wù)器中獲取到的數(shù)據(jù)
 //接下來就可以對數(shù)據(jù)進(jìn)行相應(yīng)的處理了
 }
 };

C、處理響應(yīng)數(shù)據(jù)：

 /*監(jiān)聽*/
 xhr.onreadystatechange=function(){
 if(xhr.status==200 && xhr.readyState==4){ /*判斷狀態(tài)*/
 var result;
 /*獲取響應(yīng)報(bào)文中的Content-Type*/
 var ct=xhr.getResponseHeader("Content-Type");
 /*判斷Content-Type,進(jìn)行數(shù)據(jù)的解析*/
 if(ct.indexOf("xml") != -1){
 result=xhr.responseXML;
 }
 else if(ct.indexOf("json") !=-1){
 result=JSON.parse(xhr.responseText);
 }
 else{
 result=xhr.responseText;
 }
 /*調(diào)用回調(diào)函數(shù)--委托--代理*/
 success && success(result);
 }
 };

jQuery中封裝的ajax

 $.ajax({
 type: 請求方式(get/post),
 url: "register.php",
 data: 發(fā)送請求數(shù)據(jù),
 beforeSend:function(){返回false可以取消本次ajax請求},
 success:function(result){ 成功響應(yīng)后調(diào)用 },
 error:function(err){ 錯誤響應(yīng)時調(diào)用 },
 complete:function(){ 響應(yīng)完成時調(diào)用(包括成功和失敗) }
 });

jQuery中提供了專門的方法來序列化表單：

$('form').serialize(): //序列化表單(即格式化key=val & key=val);

三、響應(yīng)

我們需要監(jiān)聽服務(wù)器的響應(yīng)狀態(tài)，然后對從服務(wù)器中獲取的數(shù)據(jù)做相應(yīng)的處理。

1) onreadystatechange是JavaScript事件中的一種，用于監(jiān)聽XMLHttpRequest的狀態(tài)

2) readystate：響應(yīng)狀態(tài)，返回XMLHTTP請求的當(dāng)前狀態(tài)

readyState 狀態(tài)	狀態(tài)說明
(0)未初始化	此階段確認(rèn)XMLHttpRequest對象是否創(chuàng)建，并為調(diào)用open()方法進(jìn)行未初始化作好準(zhǔn)備。值為0表示對象已經(jīng)存在，否則瀏覽器會報(bào)錯－－對象不存在。
(1)載入	此階段對XMLHttpRequest對象進(jìn)行初始化，即調(diào)用open()方法，根據(jù)參數(shù)(method,url,true)完成對象狀態(tài)的設(shè)置。并調(diào)用send()方法開始向服務(wù)端發(fā)送請求。值為1表示正在向服務(wù)端發(fā)送請求。
(2)載入完成	此階段接收服務(wù)器端的響應(yīng)數(shù)據(jù)。但獲得的還只是服務(wù)端響應(yīng)的原始數(shù)據(jù)，并不能直接在客戶端使用。值為2表示已經(jīng)接收完全部響應(yīng)數(shù)據(jù)。并為下一階段對數(shù)據(jù)解析作好準(zhǔn)備。
(3)交互	此階段解析接收到的服務(wù)器端響應(yīng)數(shù)據(jù)。即根據(jù)服務(wù)器端響應(yīng)頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調(diào)用作好準(zhǔn)備。狀態(tài)3表示正在解析數(shù)據(jù)。
(4)完成	此階段確認(rèn)全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式，解析已經(jīng)完成。值為4表示數(shù)據(jù)解析完畢，可以通過XMLHttpRequest對象的相應(yīng)屬性取得數(shù)據(jù)。