前 言
這篇文章將給大家詳細介紹一下，與JQuery對照用原生的js怎么去實現Ajax。
| JQuery提供的Ajax方法： |
$.ajax({
url: ,
type: '',
dataType: '',
data: {
},
success: function(){
},
error: function(){
}
})
| 用原生JS實現Ajax原理： |
1獲得XMLHttpRequest對象
var ajax=new XMLHttpRequest();
2設置狀態監聽函數
ajax.onreadystatechange=function(){
console.log(ajax.readyState);
console.log(ajax.status);
}
ajax readyState的五種狀態值詳解
0 － （未初始化）還沒有調用send()方法
1 － （載入）已調用send()方法，正在發送請求
2 － （載入完成）send()方法執行完成，已經接收到全部響應內容
3 － （交互）正在解析響應內容
4 － （完成）響應內容解析完成，可以在客戶端調用了
ajax.status常見狀態碼
1**：請求收到，繼續處理
2**：操作成功收到，分析、接受
3**：完成此請求必須進一步處理
4**：請求包含一個錯誤語法或不能完成
5**：服務器執行一個完全有效請求失敗
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
3open一個鏈接
ajax.open("GET","h51701.json",true);
open(method, url, async) 方法需要三個參數:
method：發送請求所使用的方法（GET或POST）；
url：規定服務器端腳本的 URL(該文件可以是任何類型的文件，比如 .json 和 .xml，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前，能夠在服務器上執行任務）)；
async：規定應當對請求進行異步（true）或同步（false）處理；true是在等待服務器響應時執行其他腳本，當響應就緒后對響應進行處理；false是等待服務器響應再執行。
4send 一個請求。可以發送對象和字符串，不需要傳遞數據發送null
ajax.send(null);
send() 方法可將請求送往服務器。
5在監聽函數中，判斷readyState=4&&status=200表示請求成功
if(ajax.readyState==4&&ajax.status==200){}
6使用responseText、responseXML接受響應數據，並使用原生js操作DOM進行顯示
console.log(ajax.responseText);
console.log(ajax.responseXML);
console.log(JSON.parse(ajax.rensponseText));
console.log(eval("("+ajax.responseText+")"));
eval函數用於將字符串中的js代碼解析出來並執行
當使用eval函數解析JSON字符串時，需要在函數內部將JSON字符串用()拼接
console.log(eval("("+json1+")"));
表示eval函數中的字符串不是用於執行，而是要進行字符串解析
eval("("+json1+")")=JSON.parse(json1);
打印結果：
