前端ajax入門：
導語：本人是一學了三年前端的菜鳥，今天復習ajax，感覺知識又還給老師了，翻閱ppt和筆記，小總結了一下，應該學前端的都會有ajax困惑吧，今天自己復習，順便小分享一下，如有錯誤，請各路大佬幫忙指出！
名詞解釋：
AJAX即“Asynchronous Javascript And XML”（異步的JavaScript和XML），是指一種創建互動式網頁應用的網頁開發技術，用于瀏覽器和服務器之間進行資料互動，AJAX在瀏覽器與Web服務器之間使用異步資料傳輸（HTTP請求），這樣就可使網頁從服務器請求少量的資訊，而不是整個頁面，AJAX描述了一種主要使用腳本操作HTTP的Web應用架構，AJAX應用的主要特點是使用腳本操縱HTTP和Web服務器進行資料交換，不會導致頁面多載，
作用：與后臺服務器互動，進行資料傳輸，實作頁面的區域重繪
應用：
五部曲：
1. 實體化一個xhr物件
var xhr = new XMLHttpRequest();
2. 設定請求行
xhr.open(method,url);
3. 設定請求頭
xhr.setRequestHeader(key,val)
4. 設定請求體，當請求方式為get的時候，data不需要設定；當請求方式為post的時候，data需要設定
xhr.send([data])
5. 獲取回應內容
xhr.onreadystatechange = function(){
//就緒狀態當為4的時候表示回應成功回來了
if(this.readystate === 4){
//后臺回應狀態
if(this.status === 200){
// 獲取回應資訊
this.response
}
}
}
傳參：
get
引數格式：查詢字串（表單資料）application/x-www-form-urlencoded
傳參位置：拼接到url地址后面，用 ? 來拼接
post
引數格式：查詢字串（表單資料）、json資料 application/json
傳參位置：send(data) 引數放在http請求報文的請求體
如何修改當前請求的引數格式
1.請求頭
xhr.setRequestHeader('Conte-Type','application/json')
2.將引數轉碼（和Conytene-Type保持一致)
將物件轉成查詢字串
qs.stringify(data)
物件 -> json字串
JSON.stringify(data)
json字串 -> 物件
JSON.parse(data)
認證：
xhr.setRequestHeader('Authorization',token)
以上內容來自本人ppt及本人課堂內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292057.html
標籤：其他