ajax基本使用-PHP开发-PHP中文網

　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的職責就是發送資料和接收資料我們基本使用流程為：

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

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

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

xhr.open(arg1,arg2,arg3)

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

　　arg2表示請求的伺服器位址🎀就是異步所以我們一般都是使用非同步的方式第三個參數設定為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()。

ajax基本使用　　xhr.abort()：終止一個請求，直接呼叫即可不需要設定參數

xhr.abort()

　　xhr.setRequestHeader()：設定發送的請求頭：　　xhr.setRequestHeader()：設定傳送的請求頭： 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')

『、mendoD. ()之前。

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();
  });

登入後複製