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

前沿：對於此篇隨筆，完是簡要寫了幾個重要的地方，具體實現細節完在提供的原始碼做了筆記

《一》ajax基本要點介紹--更好的介紹ajax

1. ajax物件中new xmlhttprequest()屬性和方法列表

2. 常用事件介紹

事件觸發時機

onreadystatechange

當readystate的值改變時觸發，除了當它從非0變成0時

onloadstart

當呼叫send方法時會觸發xhr.onloadstart,然後會觸發xhr.upload.onloadstart，代表開始上傳資料

onprogress

onabort

呼叫abort方法後會觸發

onerror

當發生網路異常的時候會觸發，如果上傳資料的過程還未結束，此時會先觸發xhr.upload.onerror，然後再觸發xhr.onerror；如果上傳資料的過程已經結束，此時只會觸發xhr.onerror

onload

ontimeout

當服務端響應的時間超過指定的timeout時間時，會觸發此事件

onloadend

3.請求開始和結束零界點

【3.1】請求開始

xhr.onloadstart事件觸發的時候，也就是你呼叫xhr.send()方法的時候。

因為xhr.open()只是建立了乙個連線，但並沒有真正開始資料的傳輸，而xhr.send()才是真正開始了資料的傳輸過程。只有呼叫了xhr.send()，才會觸發xhr.onloadstart。

【3.2】請求結束

xhr.loadend事件觸發的時候

備註：a.可以在send()之後再設定此xhr.timeout，但計時起始點仍為呼叫xhr.send()方法的時刻。

b.當xhr為乙個sync同步請求時，xhr.timeout必須置為0，否則會拋錯。原因可以參考本文的【如何發乙個同步請求】一節。

4. 具體實現細節--封裝ajax

function

_ajax(obj)
}else
if(window.activexobject)
catch
(e) }
}//預設是非同步請求
var asyc = obj.asyc || true
; 
var type = obj.type.touppercase() || "get";
var url =obj.url;
var data = obj.data ||{};
console.log(objtostr(data));
//選擇傳送請求方式
if(type === "get")
else
if(type === "post")
//設定超時請求時間
xhr.timeout = 3000;
//傳送非同步**函式
xhr.onreadystatechange = function
() 
if(xhr.readystate === 4 && xhr.status === 200)
else
};//請求開始
xhr.onloadstart = function
(e) ;
//ajax請求結束
xhr.loadend = function
(e) ;
//超時函式處理
xhr.ontimeout = function
(e) ;
//ajax請求錯誤處理
xhr.onerror = function
(e) ;
//上傳進度處理--upload用於在資料傳輸到伺服器時收集一些傳輸資訊，比如上傳了多少位元組，總共多少位元組等，其裡面還包含了一些事件**
xhr.upload.onprogress = function
(e) ;
console.log(xhr.getallresponseheaders(),'0000');
//把物件轉換成字串
function
objtostr(obj) 
return arr.join('&');}}

window.onload = function

() ,
success:
function
(data) ,
error:
function
() });}};

封裝原生ajax

封裝原生ajax四個步驟 類似於手機打 建立xmlhttprequest物件 買手機 開啟與伺服器的連線 撥號 傳送到伺服器 按下撥號鍵 等待伺服器的響應 有可能關機，不在服務區，無人接聽，有人接聽 function ajax obj else data user xiaocuo age 23 if...

原生ajax封裝請求

封裝ajax function ajax obj else 2.開啟請求 第乙個引數表示請求方式,值為get post,是字串 第二個引數表示請求的位址 第三個引數是布林值,預設是true表示非同步,false表示同步 xhr.open obj.type,obj.url,obj.async 3.判斷...

TypeScript 封裝原生 Ajax

typescript 封裝原生 ajax，crud 對應post,delete,put,get 實列如下 1.定義 ajax 請求所需的引數介面 inte ce iajaxconfig 2.定義 crud 對應的抽象方法 inte ce iajaxconfig 2.定義 crud 對應的抽象方法 e...