原生Ajax的原理和實現

2021-08-11 18:01:27 字數 1357 閱讀 2846

核心:xmlhttprequest物件(xhr)

xhr.timeout = 1000 //設定超時時間(ms)

xhr.ontimeout = function(){}

xhr.setrequestheader(header, value) //設定http頭部資訊

//get:

xhr.open("get", url, isasync)

xhr.send(null)

//post:

xhr.open("post", url, isasync)

xhr.send(serialize(form)) //請求資料

//使用formdata則不必明確的setrequestheader:

var data = newformdata();

xhr.send(data)

xhr.abort() //取消非同步請求

狀態碼 xhr.readystate

(0)---open---(1)--->send---(2)--->收到部分響應資料(3)--->接收並解析完成,可以在客戶端呼叫(4)

2xx:成功處理

3xx:重定向,304:not modified,可用本地快取

4xx:客戶端請求錯誤

5xx:服務端處理錯誤

跨域

網域名稱、協議、埠,其中之一不同就算跨域;瀏覽器有同源策略,預設禁止ajax跨域訪問;

可以跨域載入資源的:

跨域源資源共享:

一、 cors草案(cross-origin resource sharing)

用自定義的http頭部讓瀏覽器於伺服器進行溝通。需附加額外的origin頭部,包含請求頁面的源資訊。

需伺服器端配合,根據頭部資訊決定是否給予響應。

二、

jsonp

(json with padding)

被包含在函式呼叫中的json,利用跨域載入資料;

functionhandleresponse(response)

var script = document.createelement("script")

script.src = src

}

// 

原生ajax原理

不需要外掛程式的支援,原生 js 就可以使用 使用者體驗好 不需要重新整理頁面就可以更新資料 減輕服務端和頻寬的負擔 缺點 搜尋引擎的支援度不夠,因為資料都不在頁面上,搜尋引擎搜尋不到 ie9及以上 ie9以下 xhr 物件中的 open 方法是來配置請求資訊的 第乙個引數是本次請求的請求方式 ge...

原生ajax實現

方法 描述open method,url,async 規定請求的型別 url 以及是否非同步處理請求。method 請求的型別 get 或 post。url 檔案在伺服器上的位置。async true 非同步 或 false 同步 如果不寫預設非同步 send string 將請求傳送到伺服器。st...

原生態ajax和jquery實現ajax

js原生版實現 1 建立xmlhttprequest物件 2 然後用這個物件操作open 方法 即 xmlhttprequest.open post url,true 3 用這個物件操作onreadystatechange這個屬性 即xmlhttprequest.onreadystatechange...