說起ajax，大家都不陌生。但是由於目前很多框架或者庫等都對網路請求做了封裝，導致了很多初學者只知其然而不知其所以然。所以今天我們就詳細了解一下ajax的實現原理和封裝ajax的關鍵步驟。
ajax的核心是xmlhttprequest物件。首先我們先建立乙個xmlhttprequest物件var xhr = new xmlhttprequest();。
在使用xmlhttprequest物件的第一步，我們首先要呼叫open方法來初始化請求引數，xhr.open('get','/test',true)，雖然名字叫open，但是此時請求還並沒有傳送。
open(method, url[, async, username, password])
如果呼叫了open方法後再次對它進行呼叫，則相當於呼叫了abort方法，abort方法我們在後面介紹。如果我們想為為請求繫結一些操作，這個時候就可以開始啦。常用的操作有如下幾個：
setrequestheader(key, value)
顧名思義，這個方法用於設定請求頭內容。
overridemimetype(type)
重寫伺服器返回的mime型別。通過這個方法可以告訴伺服器你想要的資料型別。
注意：以上這些操作必須定義在send方法之前。否則，就拿setrequestheader來說，你都把請求發出去了再設定還有什麼用？這個時候，我們就可以通過呼叫send 方法來傳送請求了，
xhr.send(null)。
send(data)
傳送請求，如果是同步請求的話，會阻塞**的執行，直至收到伺服器響應才會繼續。
readystatechanhe()
每次readystate的值改變的時候都會觸發這個函式。
getresponseheader(name)
獲取指定響應頭部的值，引數是響應頭部的名稱，並且不區分大小寫。
getallresponseheaders()
獲取伺服器傳送的所有http響應的頭部。
在這裡我們穿插幾個概念，readystate，這個屬性表明了請求的狀態，伴隨http請求的整個生命週期，它的值表明此時請求所處的階段，具體如下：
readystate
數值描述0
初始化,open()尚未呼叫
1open()已經呼叫，但是send未呼叫
2已獲取到返回頭資訊34
請求完成
還有幾個較為常用的屬性
名稱含義
responsetext
響應的文字
status
響應的狀態碼
statustext
響應的狀態資訊
respon***ml
我們用下面這段**做個測試
下圖我們可以直觀的看到在建立了xmlhttprequest物件的時候，readystate的值為0。
然後我們定義了onreadystatechange函式，讓其列印一些屬性，並呼叫open方法，此時readystate變為1。
最後我們呼叫send方法，可以看到經歷了如下過程：
send方法呼叫之後，readystate變為2，此時responseheader已經獲取到了，responsetext為空；
abort()
取消響應，呼叫這個方法會終止已傳送的請求。我們嘗試在之前的**最後加一句。
xhr.abort();
console.log(xhr.readystate)；
也就是說，send執行以後，並沒有去嘗試請求資料，而是直接取消掉了，並且我們發現abort會將readystate的值置為0。
除此之外，xmlhttprequest還有乙個很重要的屬性withcredentials，cookie在同域請求的時候，會被自動攜帶在請求頭中，但是跨域請求則不會，除非把withcredentials的值設為true（預設為false）。同時需要在服務端的響應頭部中設定access-control-allow-credentials:true。不僅如此access-control-allow-origin的值也必須為當前頁面的網域名稱。
到此為止，我們終於講完了xmlhttprequest的一些常用概念。接下來，我們嘗試自己封裝乙個支援get和post的簡易jax請求。
}}// 測試呼叫
ajax('/***',,
success:function(),
fail:function()
});其實ajax實現原理並不複雜，複雜的是容錯、相容性等的處理，使用的時候盡量使用庫或者框架提供的封裝，避免不必要的漏洞。
感謝@蝦嗶嗶的提問，這裡做個簡單的補充說明。
async是乙個可選的布林值引數，預設為true,意味著是否執行非同步操作，如果值為false,則send()方法不會返回任何東西，直到接受到了伺服器的返回資料。如果為值為true，乙個對開發者透明的通知會傳送到相關的事件監聽者。這個值必須是true,如果multipart 屬性是true，否則將會出現乙個意外。根據我的分析，當async為false的時候，readystate會在send方法之後直接由1變成4。也就是說非同步模式,send方法會立刻返回。同步模式下,只有響應完全接受後,send才會返回。
另外，由於同步模式會阻塞，較新版本的chrome在主線程上的同步請求已被棄用。
刨根問底ajax原理與封裝
摘要 說起ajax，大家都不陌生。但是由於目前很多框架或者庫等都對網路請求做了封裝，導致了很多初學者只知其然而不知其所以然。所以今天我們就詳細了解一下ajax的實現原理和封裝ajax的關鍵步驟。ajax的核心是xmlhttprequest物件。說起ajax，大家都不陌生。但是由於目前很多框架或者庫等...
刨根問底ioremap （一）
硬是在動態對映或者靜態對映後，只能讀不能寫，逼著我對ioremap刨根問底 1 arch alpha include asm io.h static inline void iomem ioremap unsigned long port,unsigned long size 尋找io concat...
刨根問底 內頁不收錄原因何在
內頁不被收錄一直是困擾站長的一大難題，一般收錄率達到70 以上算是優質站點，程式設計客棧大多數 收錄率維持在50 左右，如何提高內頁收錄率成為關鍵性難題。在此與各位 內頁不收錄的幾大原因以及解決辦法，不足之處還望高人拍磚。一，內頁權重低 內頁權重未達到搜尋引擎的索引標準，自然會被判定為無意義頁面而放...