Ajax原生詳解 學習筆記

2021-09-02 22:30:21 字數 3541 閱讀 6612

ajax支援ie7以上版本,所以在用原生寫ajax的時候需要進行能力測試:

var xhr;

if(window.xmlhttprequest)else

(1)屬性

readystate:http請求狀態

當乙個xmlhttprequest初次建立時候,這個屬性的值從0開始,直到接收到完整的http響應,這個值增加到4。

狀態

名稱

描述

0

uninitialized

初始化狀態。

物件已建立或已被

abort()

方法重置。

1

open

open()

方法已呼叫,但是

send()

方法未呼叫。請求還沒有被傳送。

2

sent

send()

方法已呼叫,

請求已傳送到

web

伺服器。未接收到響應。

3

receiving

所有響應頭部都已經接收到。響應體開始接收但未完成。

響應已經完全接收。

readystate的值不會遞減,除非當乙個請求在處理過程中的時候呼叫了abort()或者open()方法,每次這個值增加的時候,都會觸發onreadystatechange事件控制代碼。

responsetext:響應體

伺服器接收到的響應體(不包括頭部),如果還沒有接收到資料,就是乙個空的字串。如果readystate的值小於3,那這個屬性就是個空字串,當readystate的值為3的時候,這個屬性的值是目前接收到的響應部分,當readystate的為4,這個屬性儲存了完整的響應體。

respon***ml

對請求的響應,解析為xml並作為document物件返回 。

status:伺服器返回的http狀態碼

例如200表示成功,404表示「not found」錯誤,當readystate小於3的時候,這個屬性會讀取乙個異常。

statustext:用名稱指定了伺服器響應的http狀態碼

例如狀態碼為200時,則該屬性的值是「ok」,狀態碼為404時,該屬性的值就是「not found」,和status屬性一樣,當readystate的值小於3時候,該屬性會導致乙個異常

(2)事件控制代碼

onreadystatechange

每當readystate屬性的值發生改變的時候,呼叫的事件控制代碼函式,當readystate為3 時,它也可能呼叫多次

(3)方法

abort()

取消當前響應,關閉連線並且結束任何未決的網路活動。

這個方法把

物件重置為

readystate 為0

的狀態,並且取消所有未決的網路活動。例如,如果請求用了太長時間,而且響應不再必要的時候,可以呼叫這個方法。

getallresponseheaders()

響應頭部作為未解析的字串返回。

如果

readystate 小於3

,這個方法返回

null

。否則,它返回伺服器傳送的所有

響應的頭部。頭部作為單個的字串返回,一行乙個頭部。每行用換行符

"\r\n"

隔開。

getresponseheader()

返回指定的 http 響應頭部的值。其引數是要返回的 http 響應頭部的名稱。可以使用任何大小寫來制定這個頭部名字,和響應頭部的比較是不區分大小寫的。

該方法的返回值是指定的 http 響應頭部的值,如果沒有接收到這個頭部或者 readystate 小於 3 則為空字串。如果接收到多個有指定名稱的頭部,這個頭部的值被連線起來並返回,使用逗號和空格分隔開各個頭部的值。

open()

初始化http請求的引數,例如url(請求的位址)或者請求的方法,但是並不傳送請求。

send()

傳送http請求,使用傳遞給open()方法的引數,以及傳遞給該方法的可選請求體。

setrequestheader()

向乙個開啟但未傳送的請求設定或新增乙個http請求

// 建立ajax物件

// 連線伺服器 open(方法get/post,請求位址, 非同步傳輸)

xhr.open('get', 'data.txt', true);

// 傳送請求

xhr.send();

// 處理返回資料

/*** 每當readystate改變時,就會觸發onreadystatechange事件

** readystate屬性儲存有xmlhttprequest的狀態資訊

** 0 :請求未初始化

** 1 :伺服器連線已建立

** 2 :請求已接受

** 3 : 請求處理中

** 4 :請求已完成,且相應就緒

*/xhr.onreadystatechange = function() else }}

}

原生JS實現ajax詳解

打 分下面4步 1.拿出手機 2.撥號 3.說話 4.聽對方說話 ajax也分下面4步 1.建立ajax物件 2.連線到伺服器 3.傳送請求 告訴伺服器我要什麼檔案 4.接收返回值 下面是原生js寫ajax的具體寫法 但是,不能每次用ajax的時候都寫那麼多 要把這段ajax 封裝起來,方便使用。封...

原生ajax解析 封裝原生ajax函式

前沿 對於此篇隨筆,完是簡要寫了幾個重要的地方,具體實現細節完在提供的原始碼做了筆記 一 ajax基本要點介紹 更好的介紹ajax 1.ajax物件中new xmlhttprequest 屬性和方法列表 2.常用事件介紹 事件觸發時機 onreadystatechange 當readystate的值...

原生ajax步驟詳解以及簡單封裝

一原生ajax詳解 二簡單封裝ajax 最後把 封裝起來,封裝起來以後,要給這個函式加上乙個引數url.引數是為了替換要讀取的檔名 function ajax url,fnsucc else ajax.open get url,true 把要讀取的引數的傳過來。ajax.send ajax.onre...