刨根問底ajax原理與封裝

2021-09-22 05:37:59 字數 3198 閱讀 4273

摘要: 說起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 左右,如何提高內頁收錄率成為關鍵性難題。在此與各位 內頁不收錄的幾大原因以及解決辦法,不足之處還望高人拍磚。一,內頁權重低 內頁權重未達到搜尋引擎的索引標準,自然會被判定為無意義頁面而放...