ajax請求過程

原生態Ajax使用的步驟，最後告訴面試官，咱們在工做中是使用jQuery來實現Ajax請求和處理的。在回答的時候儘可能詳盡，包括方法的參數的個數，順序和做用，以避免被面試官抓住不放。不給面試官提問的機會，那你的回答就牛逼了！

Ajax是什麼

我理解Ajax 是一種異步請求數據的一種技術，對於改善用戶的體驗和程序的性能頗有幫助。

Ajax的使用

 

    (1)建立`XMLHttpRequest`對象,也就是建立一個異步調用對象. (2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息. (3)設置響應`HTTP`請求狀態變化的函數. (4)發送`HTTP`請求. (5)獲取異步調用返回的數據. (6)使用JavaScript和DOM實現局部刷新. var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }

 

 

如下步驟，若是不能理解你死記硬背都要記下來，總比你答不出來要好吧！

1.建立Ajax核心對象XMLHttpRequest

 

var xmlhttp;
if(window.XMLHttpRequest){
//IE7+,Chrome,Firefox,Safari,Opera執行此代碼 xmlhttp=new XMLHttpRequest;
}else{
   //IE5,IE6執行該代碼
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服務器發送請求

 

xmlhttp.open(method,url,async);
xmlhttp.send();

示例以下：

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);
xmlhttp.send();

注意一：open 的參數要牢記，不少面試官愛問這樣的細節

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置，相對位置或絕對位置
• async：true（異步）或 false（同步）

• 爲何使用 Async=true ？

  咱們的實例在 open() 的第三個參數中使用了 "true"。

  該參數規定請求是否異步處理。

  True 表示腳本會在 send() 方法以後繼續執行，而不等待來自服務器的響應。

   

  onreadystatechange 事件使代碼複雜化了。可是這是在沒有獲得服務器響應的狀況下，防止代碼中止的最安全的方法。

  經過把該參數設置爲 "false"，能夠省去額外的 onreadystatechange 代碼。若是在請求失敗時是否執行其他的代碼可有可無，那麼可使用這個參數

   

注意二：post請求不一樣於get請求

send(string)方法post請求時才使用字符串參數，不然不用帶參數。

注意三：post請求必定要設置請求頭的格式內容

 

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Herry&lname=Ford");

3.服務器響應處理

responseText    得到字符串形式的響應數據。

responseXML   得到XML 形式的響應數據。

3.1 同步處理

 

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);
xmlhttp.send();
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;

直接在send()後面處理返回來的數據。

3.2 異步處理

 異步處理相對比較麻煩，要在請求狀態改變事件中處理。

xmlhttp.onreadystatechange=function () {//接收到服務端響應時觸發
     if(xmlhttp.readyState==4&&xmlhttp.status==200){
           document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
      }
}

一共有5中請求狀態，從0 到 4 發生變化。

0: 請求未初始化

1: 服務器鏈接已創建

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

xmlhttp.status：響應狀態碼。這個也是面試比較愛問的，這個必須知道4個以上，比較常見的有：

200: "OK"

304：該資源在上次請求以後沒有任何修改（這一般用於瀏覽器的緩存機制，使用GET請求時尤爲須要注意）。

403   （禁止） 服務器拒絕請求。

404   （未找到） 服務器找不到請求的網頁。

408  （請求超時） 服務器等候請求時發生超時。

500   （服務器內部錯誤）  服務器遇到錯誤，沒法完成請求。