Ajax簡單原生使用原理

2021-09-29 16:23:16 字數 808 閱讀 8485

let xhr =

''//由於存在相容問題,所以需要判斷是dom瀏覽器還是ie瀏覽器

)//第乙個引數 是get還是post請求,第二個引數,伺服器需要攔截的路由,第三個引數,ajax是否非同步,true為非同步,false為同步

xhr.

send

(null

)//get請求

xhr.

send

(options)

//post請求

xhr.

onreadystatechange=(

)=>

}

ajax狀態碼:

0 未建立

1 伺服器建立鏈結

2 請求已經接收

3 資料已經回來,ajax還未結束

4.請求響應已經完全結束

拿到的資料是string型別!!

記得進行轉換 比如傳過來的json字串 用json.parse()進行轉換即可,此時就可以向瀏覽器中寫資料了

原生ajax原理

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

原生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的值...