面試題6：Ajax請求原理

相當於在用戶和服務器之間加了一箇中間層（AJAX引擎），使用戶操作與服務器響應異步化。

對於用戶請求ajax引擎會做一些數據驗證和數據處理，不是所有請求都提交給服務器，當需要從服務器讀取新數據時由Ajax引擎代爲向服務器提交請求。AJAX最大優點就是不刷新整個頁面的前提下與服務器通信維護數據。

過程：

1. 創建一個ajax引擎對象，ie6是new ActiveXbject其他瀏覽器是new一個xmlHttpRequest對象；
2. 調用open方法啓動一個請求以備發送，open方法傳入三個參數請求類型，請求url和一個布爾值
3. 調用send方法發送；
4. 處理回調函數onreadystatechange,當readState =4，響應數據完成時，並且status=200，請求成功的時候，處理響應數據。

注意：回調函數要寫在open（）和send（）之前；

1.創建Ajax核心對象XMLHttpRequest

var xmlhttp;  
if (window.XMLHttpRequest)  
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// 兼容 IE6, IE5  
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");  
  }  

2.向服務器發送請求

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

注意：open 的參數要牢記，很多面試官愛問這樣的細節
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
send(string)方法post請求時才使用字符串參數，否則不用帶參數。

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

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

3.服務器響應處理

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

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

3.1 同步處理

xmlhttp.open("GET","ajax_info.txt",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"
403   （禁止） 服務器拒絕請求。
404   （未找到） 服務器找不到請求的網頁。
408  （請求超時） 服務器等候請求時發生超時

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

文章轉載：https://blog.csdn.net/sinat_35836870/article/details/53256603