深入理解ajax非同步請求的五個步驟（詳細代碼）

在前端工作中，常常會用到ajax，其實很多人只知道ajax是異步請求，不知道應該如何用它，它的基本步驟有哪些，ajax請求過程是怎樣的？接下來這篇文章就跟大家介紹Ajax的請求步驟，以及ajax請求步驟的詳細程式碼。有興趣的朋友可以看看。

AJAX（Asynchronous JavaScript and XML）：是指一種建立互動式網頁應用程式的網頁開發技術，透過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的局部進行更新。

1.建立xmlHttpRequest對象

所有現代瀏覽器（IE7 、Firefox、Chrome、Safari 以及Opera）均支援XMLHttpRequest 對象，而IE5 和IE6 使用的是ActiveXObject。

    if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest(); 
      if(xmlHttp.overrideMimeType){
        xmlHttp.overrideMimeType("text/xml");
      }
   }else if(window.ActiveXobject){
       var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0; i<activeName.length; i++){
          try{
              xmlHttp = new ActiveXobject(activeName[i]);
             break;
          }catch(e){
          }
       }     
   }
   if(!xmlHttp){
      alert("创建xmlhttprequest对象失败");
   }else{    
   }

2.設定回呼函數

   xmlHttp.onreadystatechange= callback;
   function callback(){}

#3.使用OPEN方法與伺服器建立連線  xmlHttp.open("get","ajax ?name=" name,true)

此步驟注意設定http的請求方式（post/get）,如果是POST方式，注意設定請求頭資訊xmlHttp.setRequestHeader("Content-Type","application /x-www-form-urlencoded")

4.傳送資料給伺服器端

  xmlHttp.send(null);

  如果是POST方式就不為空

#5.在回呼函數中針對不同的回應狀態進行處理

 if(xmlHttp.readyState == 4){
      //判断交互是否成功
      if(xmlHttp.status == 200){
        //获取服务器返回的数据
        //获取纯文本数据
        var responseText =xmlHttp.responseText;
       document.getElementById("info").innerHTML = responseText;
      }
  }

#readyState屬性：表示請求/回應過程的目前階段

0：未初始化。尚未呼叫 open()方法。
1：啟動。已經呼叫 open()方法，但尚未呼叫 send()方法。
2：發送。已經呼叫 send()方法，但尚未接收到回應。
3：接收。已經接收到部分響應資料。
4：完成。已經接收到全部回應數據，而且已經可以在客戶端使用了。

只有在XMLHttpRequest物件完成了上述5個步驟之後，才可以取得從伺服器端回傳的資料。

status屬性：回應的HTTP 狀態碼
200：回應成功
301：永久重定向/永久轉移
302：暫時重定向/暫時轉移
304：本次取得內容是讀取快取中的資料
400：請求參數錯誤
401：無權限存取
404：存取的資源不存在

總結：以上介紹了Ajax請求的五個步驟以及詳細代碼 ，沒有接觸過朋友可能看起來比較困難，沒關係，看了以後，多去動手敲敲，慢慢就懂了，希望可以幫助到你！

以上是深入理解ajax非同步請求的五個步驟（詳細代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！