原生ajax原理

2021-10-24 19:40:16 字數 1088 閱讀 1016

不需要外掛程式的支援,原生 js 就可以使用

使用者體驗好(不需要重新整理頁面就可以更新資料)

減輕服務端和頻寬的負擔

缺點: 搜尋引擎的支援度不夠,因為資料都不在頁面上,搜尋引擎搜尋不到

// ie9及以上

// ie9以下

// xhr 物件中的 open 方法是來配置請求資訊的

// 第乙個引數是本次請求的請求方式 get / post / put / ...

// 第二個引數是本次請求的 url

// 第三個引數是本次請求是否非同步,預設 true 表示非同步,false 表示同步

// xhr.open('請求方式', '請求位址', 是否非同步)

)// 使用 xhr 物件中的 send 方法來傳送請求

xhr.

send

()

這個時候我們就會發現,當乙個 ajax 請求的全部過程中,只有當readystate === 4的時候,我們才可以正常使用服務端給我們的資料

所以,配合 http 狀態碼為 200 ~ 299

兩個條件都滿足的時候,才是本次請求正常完成

我們管觸發了同源策略的請求叫做跨域請求

所以我們就可以利用這個script標籤的src屬性來進行跨域請求了

Ajax簡單原生使用原理

let xhr 由於存在相容問題,所以需要判斷是dom瀏覽器還是ie瀏覽器 第乙個引數 是get還是post請求,第二個引數,伺服器需要攔截的路由,第三個引數,ajax是否非同步,true為非同步,false為同步xhr.send null get請求 xhr.send options post請求...

原生Ajax的原理和實現

核心 xmlhttprequest物件 xhr xhr.timeout 1000 設定超時時間 ms xhr.ontimeout function xhr.setrequestheader header,value 設定http頭部資訊 get xhr.open get url,isasync xh...

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

前沿 對於此篇隨筆,完是簡要寫了幾個重要的地方,具體實現細節完在提供的原始碼做了筆記 一 ajax基本要點介紹 更好的介紹ajax 1.ajax物件中new xmlhttprequest 屬性和方法列表 2.常用事件介紹 事件觸發時機 onreadystatechange 當readystate的值...