摘要: 說起ajax,大家都不陌生。但是由於目前很多框架或者庫等都對網路請求做了封裝,導致了很多初學者只知其然而不知其所以然。所以今天我們就詳細了解一下ajax的實現原理和封裝ajax的關鍵步驟。 ajax的核心是xmlhttprequest物件。
說起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。
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實現原理並不複雜,複雜的是容錯、相容性等的處理,使用的時候盡量使用庫或者框架提供的封裝,避免不必要的漏洞。
**
刨根問底ajax原理與封裝
說起ajax,大家都不陌生。但是由於目前很多框架或者庫等都對網路請求做了封裝,導致了很多初學者只知其然而不知其所以然。所以今天我們就詳細了解一下ajax的實現原理和封裝ajax的關鍵步驟。ajax的核心是xmlhttprequest物件。首先我們先建立乙個xmlhttprequest物件var xh...
刨根問底ioremap (一)
硬是在動態對映或者靜態對映後,只能讀不能寫,逼著我對ioremap刨根問底 1 arch alpha include asm io.h static inline void iomem ioremap unsigned long port,unsigned long size 尋找io concat...
刨根問底 內頁不收錄原因何在
內頁不被收錄一直是困擾站長的一大難題,一般收錄率達到70 以上算是優質站點,程式設計客棧大多數 收錄率維持在50 左右,如何提高內頁收錄率成為關鍵性難題。在此與各位 內頁不收錄的幾大原因以及解決辦法,不足之處還望高人拍磚。一,內頁權重低 內頁權重未達到搜尋引擎的索引標準,自然會被判定為無意義頁面而放...