ajax使用

ajax基本使用

　　ajax在咱們的開發中是必須使用的一個技術，ajax即異步的javascript和xml可是如今咱們一般使用json來完成數據的交互，ajax職責很單一就是數據的交互，發送數據接收數據是它的核心功能也是惟一的功能。

　　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的職責就是發送數據和接收數據咱們基本使用流程爲：

　　1.獲取一個XMLHttpRequest對象

　　2.發送數據

　　3.接收處理服務器返回的數據

　　根據上面的步驟來實現一個異步請求數據的過程，首先獲取一個xhr對象，在現代瀏覽器中咱們能夠直接經過實例化來獲取一個xhr對象：var xhr = new XMLHttpRequest()；在IE五、IE6中咱們必須使用ActiveXObject來獲取xhr對象：var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

　　此時咱們已經獲得了xhr對象接下來就是發送數據，經過xhr.open()方法來執行發送數據的方式，xhr.open()能夠接收5個參數，咱們常常使用的是前三個：

xhr.open(arg1,arg2,arg3)

　　arg1表示請求數據的方式通常爲get或者post

　　arg2表示請求的服務器地址

　　arg3表示本次請求是同步仍是異步，ajax的突出特色就是異步因此咱們通常都是使用異步的方式第三個參數設置爲true（true表示進行異步請求false表示進行同步請求）

　　xhr.open()方法只是準備一個請求，在調用open以後並不會和服務器進行通信，而是在調用send()函數以後纔會和服務器開始通信，send()函數的參數將做爲請求體發送到服務端。若是咱們在open()函數中指定請求的方式爲get一般咱們將send()設置爲xhr.send(null)，若是咱們但願經過請求體發送數據則要將open()函數的請求方式設置爲post同時將咱們須要發送的數據做爲send()函數的參數：xhr.send(param)，在調用send()函數以後，和服務器的通信就開始了。

　　對xhr的全部的設置都應該在send()函數以前設置好：

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

 　　可是因爲xhr.onreadystatechange是一個事件，因此其放在send()以後也是能夠執行的，出於易讀性咱們通常都將對xhr的設置放在send()函數以前。

　　在send()以後能夠經過xhr.readyState和xhr.status的來監測本次請求的狀態，若是知足xhr.readyState==4&&xhr.status==200則本次請求成功：

　　在請求成功時咱們能夠經過xhr.responseText來獲取服務器返回的數據，須要注意xhr.responseText是一個字符串。

ajax經常使用API

　　上面的請求過程是一個最基本的請求過程xhr對象還有幾個常常使用的方法分別爲xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

　　xhr.abort()：終止一個請求，直接調用便可不須要設置參數

xhr.abort()

　　xhr.setRequestHeader()：設置發送的請求頭：

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

　　第一個參數表示要設置的header，第二個參數表示要設置的header的值。xhr.setRequestHeader()必須在xhr.open()和xhr.send()之間，不然會拋出異常，同時xhr.setRequestHeader()的第一個參數是對大小寫不敏感的只要咱們字母寫的對就可以設置成功，可是出於易讀性咱們要設置爲正確的格式。

　　xhr.overrideMimeType()：重寫響應頭的Content-Type：

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

 　　xhr.overrideMimeType()一樣要設置在xhr.send()以前。

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

　　JSON.parse()用來將一個對象轉換爲字符串，JSON.stringify()用來將一個字符串轉換爲對象。在利用ajax進行數據交互的過程當中返回的數據多數的時候是一個JSON格式的字符串，若是服務器給咱們返回了數據此時咱們就須要利用JSON.parse()來解析返回的數據（xhr.responseText即爲服務器返回的數據）：

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

 　　在使用post方式發送數據的過程當中，若是不是文件上傳通常狀況下傳輸的也是一個JSON數據，要想可以成功的發送到後臺就須要用JSON.stringify()來將JSON對象來轉換爲一個字符串，同時Content-Type要設置爲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:"...",//發送至服務端的數據
      contentType:"...",//設置發送數據的類型若是data是一個json字符串這裏要設置爲application/json
      success:function(data){...},//請求成功的回調函數data可看作是服務器返回的數據
      error:function(){...}//請求失敗的回調函數
    });

　　或者：

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

　　回調函數中的data即爲服務器返回的數據的一個代理，直接使用便可。

　　爲了簡化咱們的開發JQ提供了一些全局設置函數包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

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

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

　　咱們在使用$.ajax時能夠直接這樣設置：

  $.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()都是用來設置一些全局回調函數的。例如咱們在提交數據時爲了防止屢次提交咱們須要在發送請求時產生一個loading遮罩在數據發送完成後取消遮罩，若是在每一次ajax請求時咱們都設置一次就會很麻煩，此時咱們就能夠用全局回調函數來簡化咱們的操做：

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

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

 　　寫完以後發現了一位仁兄的全面講解=》傳送門