Ajax實現原理,代碼封裝


都知道實現頁面的異步操作需要使用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步 就差不多了,具體怎么分看個人情況吧,最重要是理解


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM