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