柚子快報(bào)邀請(qǐng)碼778899分享：AJAX學(xué)習(xí)筆記
文章目錄
定義axios使用URL定義：組成：協(xié)議 + 域名 + 資源路徑協(xié)議：域名：資源路徑:
URL查詢參數(shù)定義語(yǔ)法axios提供的查詢參數(shù)eg:查詢某個(gè)省份下的城市
地區(qū)查詢案例
常用請(qǐng)求方法axios請(qǐng)求配置語(yǔ)法注冊(cè)賬號(hào)案例
接口文檔接口文檔：描述接口的文檔接口：使用AJAX和服務(wù)器通訊時(shí)，使用的URL，請(qǐng)求方法以及參數(shù)
AJAX原理-XMLHttpRequestpromiseasync函數(shù)和awaitPromise.all靜態(tài)方法
同步代碼和異步代碼
定義
使用XMLHttpRequest對(duì)象與服務(wù)器通信?？梢允褂肑SON、XML、HTML和Text文本等格式發(fā)送和接收數(shù)據(jù)。
axios使用
引入axios庫(kù) https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js使用axios函數(shù)
傳入配置對(duì)象在用.then回調(diào)函數(shù)接收結(jié)果 語(yǔ)法：
axios({
url:"目標(biāo)資源地址"
}).then((result)=>{
// 對(duì)服務(wù)器返回的數(shù)據(jù)做處理
})
eg:在瀏覽器獲取省份信息并展示到頁(yè)面
URL
定義：
統(tǒng)一資源定位符，簡(jiǎn)稱網(wǎng)址，用于訪問(wèn)網(wǎng)上資源。
組成：協(xié)議 + 域名 + 資源路徑
協(xié)議：
規(guī)定瀏覽器與服務(wù)器之間傳輸數(shù)據(jù)的格式
域名：
標(biāo)記服務(wù)器在互聯(lián)網(wǎng)中的方位
資源路徑:
標(biāo)記資源在服務(wù)器下的具體位置
URL查詢參數(shù)
定義
瀏覽器提供給服務(wù)器的額外信息，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)
語(yǔ)法
協(xié)議://域名/資源路徑?參數(shù)名1=值1&參數(shù)名2=值2
axios提供的查詢參數(shù)
eg:查詢某個(gè)省份下的城市
地區(qū)查詢案例
城市列表：
常用請(qǐng)求方法
請(qǐng)求方法操作GET獲取數(shù)據(jù)POST提交數(shù)據(jù)PUT修改數(shù)據(jù)（全部）DELETE刪除數(shù)據(jù)PATCH修改數(shù)據(jù)（部分）
axios請(qǐng)求配置
url：請(qǐng)求的網(wǎng)址method：請(qǐng)求的方法data：提交數(shù)據(jù)
語(yǔ)法
axios({
url:'目標(biāo)資源地址',
method:'請(qǐng)求方法',
data:{
參數(shù)名：值
}
}).then((result)=>{
// 對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行處理
})
注冊(cè)賬號(hào)案例
接口文檔
接口文檔：描述接口的文檔
接口：使用AJAX和服務(wù)器通訊時(shí)，使用的URL，請(qǐng)求方法以及參數(shù)
AJAX原理-XMLHttpRequest
定義：XMLHttpRequest對(duì)象用語(yǔ)與服務(wù)器交互。通過(guò)XMLHttpRequest可以在不刷新頁(yè)面的情況下請(qǐng)求特定的URL，獲取數(shù)據(jù)。這允許網(wǎng)頁(yè)在不影響用戶操作的情況下，更新頁(yè)面的局部?jī)?nèi)容。與axios的關(guān)系：axios內(nèi)部采用XMLHttpRequest與服務(wù)器交互步驟
創(chuàng)建XMLHttpRequest對(duì)象配置請(qǐng)求方法和請(qǐng)求url地址監(jiān)聽(tīng)loadend事件，接收響應(yīng)結(jié)果發(fā)起請(qǐng)求 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("請(qǐng)求方法","資源路徑")
// 監(jiān)聽(tīng)事件
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
})
// 發(fā)起請(qǐng)求
xhr.send()
數(shù)據(jù)提交
請(qǐng)求頭設(shè)置：Contend-Type：application/json請(qǐng)求體攜帶json字符串
const xhr = new XMLHttpRequest();
xhr.open("請(qǐng)求方法","資源路徑")
// 監(jiān)聽(tīng)事件
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
})
//告訴服務(wù)器傳遞的內(nèi)容類型
xhr.setRequestHeader('Content-Type','application/json')
//準(zhǔn)備數(shù)據(jù)并轉(zhuǎn)成json字符串
const data={};
const data1=JSON.stringify(data);
// 發(fā)起請(qǐng)求
xhr.send(data1)
promise
作用：用于表示一個(gè)異步操作的最終完成（或失?。┘捌浣Y(jié)果值。語(yǔ)法
// 創(chuàng)建promise對(duì)象
const p = new Promise((resolve,reject)=>{
// 執(zhí)行異步任務(wù)并傳遞結(jié)果
setTimeout(()=>{
// 成功調(diào)用：resolve(值)觸發(fā)then()執(zhí)行
resolve('模擬AJAX請(qǐng)求-成功結(jié)果')
// 失敗調(diào)用:reject(值)觸發(fā)catch()執(zhí)行
reject(new Error("模擬AJAX請(qǐng)求-失敗結(jié)果"))
},2000)
})
// 接收結(jié)果
p.then(result=>{
// 成功
console.log(result)
}).catch(error=>{
// 失敗
console.log(error)
})
三種狀態(tài)
pending–待定fufilled–已兌現(xiàn)，操作成功rejected–操作失敗，操作失敗
async函數(shù)和await
async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)，async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例，并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更加簡(jiǎn)潔的方式寫出基于promise的雨布行為。在async函數(shù)內(nèi)，使用await關(guān)鍵字取代then函數(shù)，等待獲取Promise對(duì)象成功狀態(tài)的結(jié)果值。示例：
Promise.all靜態(tài)方法
語(yǔ)法
const p = Promise.all([Promise對(duì)象,Promise對(duì)象,...,Promise對(duì)象])
p.then(result=>{
}).catch(erroe=>{
})
同步代碼和異步代碼
同步代碼：按照順序逐行執(zhí)行，原地等待結(jié)果后繼續(xù)執(zhí)行異步代碼：調(diào)用后耗時(shí)，不阻塞代碼繼續(xù)執(zhí)行，在將來(lái)完成后觸發(fā)一個(gè)回調(diào)函數(shù)
柚子快報(bào)邀請(qǐng)碼778899分享：AJAX學(xué)習(xí)筆記
相關(guān)文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Emex電商精英
