ajax在我們的開發(fā)中是必須使用的一個技術(shù)，ajax即異步的javascript和xml但是現(xiàn)在我們通常使用json來完成數(shù)據(jù)的交互，ajax職責很單一就是數(shù)據(jù)的交互，發(fā)送數(shù)據(jù)接收數(shù)據(jù)是它的核心功能也是唯一的功能。

　　ajax的實作依賴XMLHttpRequest，它的基本使用如下:

var xhr;
window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","demo!register.action?name=zt&age=23",true);
xhr.send(null);
xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
   　　alert(JSON.parse(xhr.responseText));
　　}
}

　　ajax的職責就是發(fā)送資料和接收資料我們基本使用流程為：

．　3.接收處理伺服器傳回的資料

　　根據(jù)上面的步驟來實現(xiàn)一個非同步請求資料的過程，首先取得一個xhr對象，在現(xiàn)代瀏覽器中我們可以直接透過實例化來取得一個xhr物件：var xhr = new XMLHttpRequest( )；在IE5、IE6中我們必須使用ActiveXObject來取得xhr物件：var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

　　此時我們已經(jīng)得到了xhr物件接下來就是發(fā)送數(shù)據(jù)，透過xhr.open()方法來執(zhí)行發(fā)送資料的方式，xhr.open()可以接收5個參數(shù)，我們經(jīng)常使用的是前三個：

xhr.open(arg1,arg2,arg3)

　　arg1表示請求資料的方式一般為get或post

　　arg2表示請求的伺服器位址??就是異步所以我們一般都是使用非同步的方式第三個參數(shù)設(shè)定為true（true表示進行非同步請求false表示進行同步請求）

　　xhr.open()方法只是準備一個請求，在呼叫open之後並不會和伺服器進行通訊，而是在呼叫send()函數(shù)之後才會和伺服器開始通訊，send()函數(shù)的參數(shù)將作為請求體傳送到服務(wù)端。如果我們在open()函數(shù)中指定請求的方式為get通常我們將send()設(shè)為xhr.send(null)，如果我們希望透過請求體發(fā)送資料則要將open()函數(shù)的請求方式設(shè)為post同時將我們需要傳送的資料作為send()函數(shù)的參數(shù)：xhr.send(param)，在呼叫send()函數(shù)之後，和伺服器的通訊就開始了。

　　對xhr的所有的設(shè)定都應(yīng)該在send()函數(shù)之前設(shè)定好：

xhr.open(...);
  xhr.setRequestHeader(...);
  xhr.overrideMimeType(...);
  xhr.onreadystatechange = function(){...};
  xhr.send(...);

　　但是由於xhr.onreadystatechange是一個事件，所以其放在send()之後也是可以執(zhí)行的，出於易讀性我們一般將對xhr的設(shè)定放在send()函數(shù)之前。

　　在send()之後可以透過xhr.readyState和xhr.status的來監(jiān)測本次請求的狀態(tài)，如果滿足xhr.readyState==4&&xhr.status==200則本次請求成功：

?

?在請求成功時我們可以透過xhr.responseText來取得伺服器傳回的數(shù)據(jù)，需要注意xhr.responseText是一個字串。

ajax常用API

　　上面的請求過程是一個最基本的請求過程xhr物件還有幾個經(jīng)常使用的方法分別為xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

　　xhr.abort()：終止一個請求，直接呼叫即可不需要設(shè)定參數(shù)

xhr.abort()

　　xhr.setRequestHeader()：設(shè)定發(fā)送的請求頭：　　xhr.setRequestHeader()：設(shè)定傳送的請求頭： Type","application/json; charset=utf-8")

　　第一個參數(shù)表示要設(shè)定的header，第二個參數(shù)表示要設(shè)定的header的值。 xhr.setRequestHeader()必須在xhr.open()和xhr.send()之間，否則會拋出異常，同時xhr.setRequestHeader()的第一個參數(shù)是對大小寫不敏感的只要我們字母寫的對就能夠設(shè)定成功，但是出於易讀性我們要設(shè)定為正確的格式。

　　xhr.overrideMimeType()：重寫回應(yīng)頭的Content-Type：

xhr.overrideMimeType('text/plain; charset=utf-8')

?『、mendo??D. ()之前。

JSON.parse()和JSON.stringify()使用

　　JSON.parse()用來將一個物件轉(zhuǎn)換為字串，JSON.stringify()用來將一個字串轉(zhuǎn)換為物件。在利用ajax進行資料互動的過程中傳回的資料多數(shù)的時候是一個JSON格式的字串，如果伺服器給我們回傳了資料此時我們就需要利用JSON.parse()來解析傳回的資料（xhr.responseText即為伺服器傳回的資料）：

xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){        
　　var data = JSON.parse(xhr.responseText);
　　}
}

　在使用post方式傳送資料的過程中，如果不是檔案上傳一般情況下傳送的也是一個JSON數(shù)據(jù)，要想能夠成功的傳送到後臺就需要用JSON.stringify( )來將JSON物件來轉(zhuǎn)換為字串，同時Content-Type要設(shè)定為application/json：

var sendData = {name:"zt",age:23};
...
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(JSON.stringify(sendData));

　另外利用JSON.parse()和JSON.stringify()可以實作一個物件的深拷貝功能：

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

　　為了方便使用JQ為我們封裝好了一個ajax來方便我們的使用：

$.ajax({
      type:"post",//請求方式
      url:"url",//請求地址
      data:"...",//發(fā)送至服務(wù)端的數(shù)據(jù)
      contentType:"...",//設(shè)置發(fā)送數(shù)據(jù)的類型如果data是一個json字符串這里要設(shè)置為application/json
      success:function(data){...},//請求成功的回調(diào)函數(shù)data可看做是服務(wù)器返回的數(shù)據(jù)
      error:function(){...}//請求失敗的回調(diào)函數(shù)
    });

　　或者：

$.ajax({
      type:"post",
      url:"url",
      data:"...",
      contentType:"...",
  })
  .done(function(data){...})
  .fail(function(){...});

回調(diào)函數(shù)中的data即為服務(wù)器返回的數(shù)據(jù)的一個代理，直接使用即可。

為了簡化我們的開發(fā)JQ提供了一些全局設(shè)置函數(shù)包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

$.ajaxSetup()用來設(shè)置基本的參數(shù)例如：

  $.ajaxSetup({
      type:"post",
      contentType:"application/json; charset=utf-8"
  });

我們在使用$.ajax時可以直接這樣設(shè)置：

$.ajax({
      url:"",
      success:function(){...},
      error:function(){...}
  })

最終等價于：

$.ajax({
      type:"post",
      contentType:"application/json; charset=utf-8",
      url:"",
      success:function(){...},
      error:function(){...}
  })

　　$().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用來設(shè)置一些全局回調(diào)函數(shù)的。例如我們在提交數(shù)據(jù)時為了防止多次提交我們需要在發(fā)送請求時產(chǎn)生一個loading遮罩在數(shù)據(jù)發(fā)送完成后取消遮罩，如果在每一次ajax請求時我們都設(shè)置一次就會很麻煩，此時我們就可以用全局回調(diào)函數(shù)來簡化我們的操作：

　　利用全局事件在請求開始時產(chǎn)生一個遮罩在請求完成時取消遮罩：

$(document).ajaxStart(function(){
      loadingMask.show();
  });
  $(document).ajaxComplete(function(){
      loadingMask.hide();
  });