ajax 的基礎原理

ajax 英文全稱 Asynchronous JavaScript and XML ， 也就是異步的 javascript 和 xml。

可以這麼說 ajax 給了web 新的生命力，如果沒有ajax，web的體驗是非常的差的，以前我們知道是桌面軟件的時代，現在是互聯網的時代，未來計算機可能就安裝一個瀏覽器就行了，不用安裝客戶端，通過接口和服務器通訊實現操作的目的，ajax起了很大的作用，如果像以前的form表單提交那樣的通訊體驗多差，所以ajax技術給了javascript 新的生命。當然現在html5 裡面新的websocket 也是很牛逼的一個存在

重點 ：ajax原理和XmlHttpRequest對象（官網上找）

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

所以我們先從XMLHttpRequest講起，來看看它的工作原理。

首先，我們先來看看XMLHttpRequest這個對象的屬性。

它的屬性有：

- onreadystatechange 每次狀態改變所觸發事件的事件處理程序。

- responseText 從服務器進程返回數據的字符串形式。

- responseXML 從服務器進程返回的DOM兼容的文檔數據對象。

- status 從服務器返回的數字代碼，比如常見的404（未找到）和200（已就緒）

- status Text 伴隨狀態碼的字符串信息

- readyState 對象狀態值

 0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
 1 (初始化) 對象已建立，尚未調用send方法
 2 (發送數據) send方法已調用，但是當前的狀態及http頭未知　　
 3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，　　
 4 (完成) 數據接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數據

這是我多年前封裝的ajax函數

function ajax(obj)
{
 var parameter={ //參數的對象。
 url:obj.url, //地址
 success:obj.success, //傳回來的函數
 method:obj.method || "get", //方式
 name:obj.data || null, //傳進的數據
 bool:obj.bool|| true, // boolean值同步異步
 type:obj.type || "", //數據類型
 fail:obj.fail || function(){} //失敗的函數
 }
 var ajax=new XMLHttpRequest(); //聲明這個函數
 if(parameter.method=="get"){ //get方法的傳輸數據
 if(parameter.name){
 parameter.url+="?"+encodeURI(parameter.data);//傳送數據的時候
 } 

 ajax.open("get",parameter.url,parameter.bool); //地址傳輸
 ajax.send(); //發送
 }else if(parameter.method=="post"){ //這是post方法
 ajax.open("post",parameter.url,parameter.bool);
 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //傳輸數據的時候有個請求頭的存在。
 ajax.send(parameter.data); //傳輸數據
 }
 ajax.onload?ajax.onload=fn:ajax.onreadystatechange=fn; //ie瀏覽器跟fireFox第一個函數
 function fn(){
 if(ajax.readyState==4){ //狀態碼
 if(200<=ajax.status&&ajax.status<=207){
 var str=(parameter.type=="xml")?ajax.responseXML:((parameter.type=="json")?(new Function("","return"+ajax.responseText))():ajax.responseText); //判斷數據類型
 parameter.success&&parameter.success(str);
 }else{ // 出錯
 parameter.fail&&parameter.fail(ajax.status);
 }
 }
 }
}
// 特別注意的是obj.data數據是name=name&data&data而不是json格式的數據。

當然這個是最簡陋的一個ajax的封裝了，在實際的項目中只能說勉強可用吧！

像類似jquery和axios 那麼強大還是要進一步來封裝。

函數完善：

// header 部分的補充（可以按照自己的需求來完成）
ajax.setRequestHeader() // 設置請求頭信息
ajax.getRequestHeader() // 獲得請求頭信息
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 標準的表單格式 

ajax.setRequestHeader('Content-Type','Content-type: application/json; charset=utf-8'); // 最常使用的json 格式
// 中斷請求
XMLHttpRequest 方法有 ajax.abort() 方法來中斷跟服務器的請求，實際上也是中斷服務器連接，可能服務器已經工作了。

三、XMLHttpRequest對象的屬性

XMLHttpRequest對象的屬性有哪些？有些什麼用？

屬性名

作用

readyState

只讀屬性，用於表示XMLHttpRequest請求的當前狀態，有五個數字(0,1,2,3,4);0：表示已經創建了XMLHttpRequest對象，但是open方法還未被調用；1：表示已調用open方法，但還未調用send方法（請求還未被髮送出去），此時可以對請求的header進行設定（setRequestHeader方法）；2：send方法已調用，數據已發送，並且服務器接收到了請求；3：表示服務器正在傳輸數據；4：數據傳輸完成；該方法一般在onreadystatechange事件中進行查看

status

只讀屬性，表示本次請求的狀態，只返回一個數字，常用的有如下幾個狀態碼：200：OK（正常訪問）；301：Moved Permanently（永久移動）；302：Moved temporarily（暫時移動）；304：Not Modified（未修改）；307：Temporary Redirect（暫時重定向）；401：Unauthorized （未授權）；403：Forbidden（禁止訪問）；404：Not Found（未找到該網址）；500：Internal Server Error （找到網址但服務器發生錯誤）；

statusText

與status屬性類似，返回本次請求的狀態，不同點在於，status只返回一個數字，而該屬性返回數字和狀態解析

responseType

可通過對該屬性賦值來指定接收的數據類型，默認為字符串，有如下幾種數據類型：text：以字符串形式接收數據；json：以json對象形式接收數據；blob：blob對象；ArrayBuffer：ArrayBuffer對象；

responseresponseTextresponseXML

三者都是服務器返回的數據，如果數據不完整或者獲取失敗，它們的值就為null；不同點：response返回的是數據的主體部分，可以為任何類型(數組，json，XML，字符串等)；responseText返回從服務器接收到的字符串；responseXML返回從服務器接收到的Document對象，若返回的數據不能解析為XML或者HTML格式，那該屬性的值為null，該值返回的數據會被直接解析DOM；

timeout

該屬性用以設置發送請求後多少毫秒後未接到回應就自動終止請求，0為無時間限制，默認值為0，可通過在open方法後send方法前對其進行賦值來制定

withCredentials

該屬性制定跨域請求時，個人的cookie信息是否附帶進請求herder中，默認為false（不攜帶cookie），可通過對其進行賦值來制定

四、XMLHttpRequest對象的方法

方法名

作用

open

類比：撥打電話時的撥號行為，確定撥打（連接）的目標；open方法用以設置請求的參數，常用的有三個參數：第一個參數：請求的類型（常用get或者post）；第二個參數是接口名和：這裡要分兩種情況：get請求時：接口名+請求參數（鍵值對形式）；post請求時：只需要接口名；第三個參數：一個布爾值，指定是否異步（true為異步，false為同步，通常為true，默認為true）；第四和第五個參數：填寫用於認證的用戶名和密碼；

send

類比：撥打電話時，填寫好電話號碼後按撥打鍵（發送請求）；send方法用以發送HTTP請求，需要在open方法調用後調用；參數分兩種形式：get：get請求時無參數；post：post請求時參數為請求參數（鍵值對形式）

setRequestHeader

類比：填好電話號碼後，想好是用人工接聽還是機器人接聽，再撥打電話（這個比喻不是很恰當）；setRequestHeader方法用以設置請求的header部分，用以指定數據發送的格式，調用必須在open方法後，send方法前；常用實例：setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

abort

類比：撥打電話後把電話給掛了；abort方法用以中斷已經發出的AJAX請求；可以用這個方法來防止用戶重複點擊造成的發送重複請求的問題；

getResponseHeader和getAllResponseHeaders

類比：打印我的通話清單（getResponseHeader為通話清單的指定信息，getAllResponseHeaders為通話清單的所有信息）；getResponseHeader和getAllResponseHeaders之間的不同點：getResponseHeader接收一個參數，該參數為需要返回的回應頭部信息；getAllResponseHeader無需參數，返回所有的回應頭信息；

overrideMimeType

用以將從服務器轉換回來的二進制信息轉換為文本信息，該方法已被responseText屬性代替

五、XMLHttpRequest對象的事件以及對應的事件監聽接口

事件名

接口名

作用

readyStateChange（請求狀態改變事件）

onreadystatechange

當readyState屬性的值發生變化時，就會觸發readyStateChange，可以對onreadystatechange指定函數來監控readyState的值；注：通常來說，一次交互中，readyState的值會發生五次變化，也就是說會觸發五次readyStateChange事件

abort（請求被中斷事件）

onabort

通過onabort事件接口，可指定當請求被中斷時的具體措施

error（請求發生錯誤事件）

onerror

通過onerror事件接口，可指定當請求出錯時的具體措施

load（請求完成，數據傳輸完畢事件）

onload

通過onload事件接口，可指定當數據傳輸完畢的具體措施

loadend（請求已完成事件）

onloaded

abort、error和load這三個事件的觸發都會另外觸發loadend事件，表示請求已完成，但成功與否未知

對應屬性timeout

ontimeout

可通過ontimeout接口指定當用戶請求超時的措施

progress（文件上傳事件）

onprogress

可通過對onprogress接口指定措施來監控文件上傳的進度

參考文獻：

鏈接：https://www.jianshu.com/p/94c12c6bfbe6

來源：簡書

閱讀更多 閣主無名 的文章

關鍵字: 軟件 屬性 事件