ajax原理 封裝步驟與思路

ajax 全名

Asynchronous Javascript and HML(被稱爲異步的Javascript 和 HML)

ajax特色

網頁某部分的局部刷新

 

ajax 工做原理

view--中間層(ajax引擎) --服務器

 

**ajax 核心

一：XHMHttpRequest 對象(方法， 屬性)

     1.0：open("method", "url", "async")

          method: 請求方式

          url： 請求地址

           async： 是否異步

      1.1:send(content) 向服務器發送請求

 

                                   經常使用的屬性

                                   向服務器請求狀態的階段

                                   onreadystatechange 請求狀態改變的觸發器

 

 

readyState(請求狀態)

0 未初始化

1 正在加載

2 已加載

3 交互中

4 完成

服務器反饋的階段

status(反饋階段狀態)

如 status = 200（ 成功）

 

服務器反饋的內容

responsetText

 

狀態碼：

200 - 請求成功

301 - 資源（ 網頁等） 被永久轉移到其它URL

404 - 請求的資源（ 網頁等） 不存在

500 - 內部服務器錯誤

 

 

 

 

//代碼演示

    var xhr = XHMHttpRequest() //建立 ajax的核心 XHMHttpRequest（）對象(實例化)
    xhr.open() /*使用XHMHttpRequest（）實例對象的方法 open(open("method", "url", "async")) method: 請求方式(get、post) url： 請求地址 async： 是否異步(true、false) */ xhr.send() //向服務器發送請求
    xhr.onreadystatechange = function () { // onreadystatechange 請求狀態改變的觸發器
        if (readyState == 4) {     // 判斷 readyState 服務器的請求狀態 是否成功 （4表明成功） 
            if (status == 200) {  //判斷 status 服務器和反饋階段 是否成功 (200表明成功)
                console.log(xhr.responsetText)//responsetText 服務器反饋的內容
 } } }