(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
目錄
XMLHttpRequest
了解XMLHttpRequest
使用 XMLHttpRequest ?
XMLHttpRequest - 查詢參數(shù)
XMLHttpRequest - 數(shù)據(jù)提交
Promise
了解Promise
Promise - 三種狀態(tài)
封裝_簡(jiǎn)易axios_獲取省份列表 ?
XMLHttpRequest
了解XMLHttpRequest
定義：
關(guān)系：axios 內(nèi)部采用 XMLHttpRequest 與服務(wù)器交互?
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602618.html
好處：掌握使用 XHR 與服務(wù)器進(jìn)行數(shù)據(jù)交互，了解 axios 內(nèi)部原理
使用 XMLHttpRequest ?
步驟：1. 創(chuàng)建 XMLHttpRequest 對(duì)象2. 配置 請(qǐng)求方法 和請(qǐng)求 url 地址3. 監(jiān)聽(tīng) loadend 事件，接收 響應(yīng)結(jié)果4. 發(fā)起請(qǐng)求
<script>
/**
* 目標(biāo)：使用XMLHttpRequest對(duì)象與服務(wù)器通信
* 1. 創(chuàng)建 XMLHttpRequest 對(duì)象
* 2. 配置請(qǐng)求方法和請(qǐng)求 url 地址
* 3. 監(jiān)聽(tīng) loadend 事件，接收響應(yīng)結(jié)果
* 4. 發(fā)起請(qǐng)求
*/
//1.創(chuàng)建XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest()
//2.配置請(qǐng)求方法和請(qǐng)求url地址
xhr.open('GET','http://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
})
xhr.send()
</script>XMLHttpRequest - 查詢參數(shù)
定義：瀏覽器提供給服務(wù)器的 額外信息 ，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)語(yǔ)法：http://xxxx.com/xxx/xxx ? 參數(shù)名1=值1 & 參數(shù)名2=值2
<body>
<p class="city"></p>
<script>
/**
* 目標(biāo)：使用XHR攜帶查詢參數(shù)，展示某個(gè)省下屬的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET','http://hmajax.itheima.net/api/city?pname=河南省')
xhr.addEventListener('loadend',()=>{
//打印字符串
console.log(xhr.response)
//將字符串轉(zhuǎn)換為對(duì)象
const data=JSON.parse(xhr.response)
document.querySelector('.city').innerHTML=data.list.join('<br>')
})
xhr.send()
</script>
</body>XMLHttpRequest - 數(shù)據(jù)提交
需求：通過(guò) XHR 提交用戶名和密碼，完成注冊(cè)功能核心：請(qǐng)求頭 設(shè)置 Content-Type：application/json請(qǐng)求體 攜帶 JSON 字符串
<body>
<button class="reg-btn">注冊(cè)用戶</button>
<script>
/**
* 目標(biāo)：使用xhr進(jìn)行數(shù)據(jù)提交-完成注冊(cè)功能
*/
document.querySelector('.reg-btn').addEventListener('click', () => {
const xhr = new XMLHttpRequest()
xhr.open('POST','http://hmajax.itheima.net/api/register')
xhr.addEventListener('loadend',()=>{
//打印字符串
console.log(xhr.response)
})
//設(shè)置請(qǐng)求頭
xhr.setRequestHeader('Content-Type','application/json')
//準(zhǔn)備提交的數(shù)據(jù)
const userObj={
username:'zxc123456',
password:'7654321'
}
const userStr=JSON.stringify(userObj)
//設(shè)置請(qǐng)求體，發(fā)起請(qǐng)求
xhr.send(userStr)
})
</script>
</body>
</html>Promise
了解Promise
定義：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-602618.html
好處：1. 邏輯更清晰2. 了解 axios 函數(shù)內(nèi)部運(yùn)作機(jī)制3. 能解決回調(diào)函數(shù)地獄問(wèn)題語(yǔ)法：
<body>
<script>
/**
* 目標(biāo)：使用Promise管理異步任務(wù)
*/
// 1. 創(chuàng)建Promise對(duì)象
const p = new Promise((resolve, reject) => {
// 2. 執(zhí)行異步代碼
setTimeout(() => {
// resolve('模擬AJAX請(qǐng)求-成功結(jié)果')
reject(new Error('模擬AJAX請(qǐng)求-失敗結(jié)果'))
}, 2000)
})
// 3. 獲取結(jié)果
p.then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
</script>
</body>Promise - 三種狀態(tài)
作用：了解Promise對(duì)象如何 關(guān)聯(lián) 的 處理函數(shù) ，以及代碼執(zhí)行順序概念：一個(gè)Promise對(duì)象，必然處于以下幾種狀態(tài)之一????????待定（pending） ：初始狀態(tài)，既沒(méi)有被兌現(xiàn)，也沒(méi)有被拒絕????????已兌現(xiàn)（fulfilled） ：意味著，操作成功完成????????已拒絕（rejected） ：意味著，操作失敗
注意：Promise對(duì)象一旦被 兌現(xiàn)/拒絕就是 已敲定 了，狀態(tài)無(wú)法再被改變
封裝_簡(jiǎn)易axios_獲取省份列表 ?
需求：基于 Promise + XHR 封裝 myAxios 函數(shù)，獲取省份列表展示步驟：1. 定義 myAxios 函數(shù)，接收 配置對(duì)象 ，返回 Promise 對(duì)象2. 發(fā)起 XHR 請(qǐng)求，默認(rèn)請(qǐng)求方法 為 GET3. 調(diào)用成功/失敗的處理程序4. 使用 myAxios 函數(shù)，獲取 省份列表展示
<body>
<p class="my-p"></p>
<script>
/**
* 目標(biāo)：封裝_簡(jiǎn)易axios函數(shù)_獲取省份列表
* 1. 定義myAxios函數(shù)，接收配置對(duì)象，返回Promise對(duì)象
* 2. 發(fā)起XHR請(qǐng)求，默認(rèn)請(qǐng)求方法為GET
* 3. 調(diào)用成功/失敗的處理程序
* 4. 使用myAxios函數(shù)，獲取省份列表展示
*/
//1.定義myAxios函數(shù)，接收配置對(duì)象，返回Promise對(duì)象
function myAxios(config){
return new Promise((resolve,reject)=>{
//2.發(fā)起xhr請(qǐng)求，默認(rèn)請(qǐng)求方法為GET
const xhr = new XMLHttpRequest()
xhr.open(config.method || 'GET',config.url)
xhr.addEventListener('loadend',()=>{
//3.調(diào)用成功/失敗的處理程序
if(xhr.status>=200&&xhr.status<300){
resolve(JSON.parse(xhr.response))
}
else{
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
//4.使用myAxios函數(shù)，獲取省份列表展示
myAxios({
url:'http://hmajax.itheima.net/api/province'
}).then(result=>{
console.log(result);
document.querySelector('.my-p').innerHTML=result.list.join('<br>')
}).catch(error=>{
console.log(error);
})
</script>
</body>到了這里，關(guān)于AJAX-day02-AJAX原理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
