都知道實現頁面的異步操作需要使用Ajax,那么Ajax到是怎么實現異步操作的呢?
首先需要認識一個對象 --> XMLHttpRequest 對象 --> Ajax的核心。它有許多的屬性和方法事件以便於腳本處理和控制HTTP的請求和響應。
下面來認識幾個屬性:我不用官方的話來解釋,希望大家能一看就知道是什么意思
readyState 屬性
創建XMLHttpRequest對象(下面稱ajax對象)后,readyState屬性則表示當前對象處於一個什么狀態,一共5個狀態
0 未初始化狀態 ,ajax對象已經創建
1 准備發送狀態,調用了open()方法,並且已經准備好將一個請求發送到服務器
2 已發送狀態, 已經通過send()方法把一個請求發送到服務器,但是沒有收到一個響應
3 正在接受狀態,已經接收到HTTP的響應頭部信息,但是消息體還沒有還沒有完全接收
4 完成響應狀態,已經完成HttpResponse的響應接收
status 屬性:
描述了HTTP狀態代碼,當readyState值小於3時 不可讀取,會引發異常錯誤
下面是Ajax的封裝代碼,我們來逐步分析,以便於理解
View Code
1 .一個json2Url格式的方法
調用ajax()時里面是以json的形式傳數據,但是我們的url是這樣的
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1464_21105_18560_17001_;
所以我們需要把格式轉換這樣才能提交,由於ie存在緩存所以需要加一個隨機數,encodeURIComponent()用來轉碼

2 創建ajax函數
3 判斷傳進來的數據中是否有url,如果沒有url這直接return 並給一個提示

4 創建 XMLHttpRequest 對象,因為ie和其他瀏覽器不同,它是ActiveXObject對象所以我們來做一個兼容性封裝

5 對 數據就行賦值以及添加默認值

6 判斷提交方法,get 或者是post 按照規范最大最后轉成大寫
get方式,數據都在url中,所以send()中是空的寫null 或者不寫都可以
post方式,則需要設置一個請求頭來表明你的內容格式,數據隨着send()方法發送

7判斷ajax是否響應完成,並判斷HTTP的狀態 碼,根據狀態碼來決定執行函數
onreadystatechange事件:每當readyState值發生變化值都會觸發這個事件,可以理解它可以監聽ajax

8 超時響應 ,超時給個回調函數,用了提高用戶體驗,並讓readystatechange 等於null

總結起來的話:封裝ajax ,你需要了解它的5個狀態
正在去做封裝那么就記住上述8個步驟 ,我分的比較細以便於理解。如果去掉零碎部分大致可以分為下面5步
1 創建XMLHttpRequest對象 -->oAjax
2 數據賦值及默認值 -->json.data = json.data || {}
3 判斷提交方式 get 或者post -->switch(json.type.toUpperCase())
4 使用onreadystatechange事件 監聽ajax -->oAjax.onreadysatechange = function(){}
5 超時處理 -->setTimeout()
記住這5步 就差不多了,具體怎么分看個人情況吧,最重要是理解
