1.AJAX原理

1.1 初識XML

AJAX原理是什么?

XMLHttpRequest對象

XHR對象定義:
通過XMLHttpRequest可以在不刷新頁面的情況下請求特定URL,獲取數據.這允許頁面在不影響用戶操作的情況下,更新頁面的局部內容.XMLHttpRequest 在 AJAX 編程中被大量使用

為什么學習XHR?

有更多與服務器數據通信方式
了解axios內部原理

XHR使用步驟?

1.創建XHR對象
2.調用open方法,設置url和請求方法
3.監聽loadend事件,接收結果
4.調用send方法,發起請求

下面是代碼實例:

//1.創建 XMLHttpRequest 對象
const xhr=new XMLHttpRequest()// 2.配置請求方法和請求 url 地址
xhr.open('GET','http://hmajax.itheima.net/api/province')// 3.監聽 loadend 事件,接收響應結果
xhr.addEventList('loadend',()=>{
console.log(xhr.reponse)
//將數據分離--為了展示數據--不是必要步驟
const data =JSON.parse(xhr.response)
console.log(data.list.join('<br>')
document.querySelector('.my-p').innerHTML=data.list.join('<br>'
})

1.2 查詢參數

 <script>/*** 目標：使用XHR攜帶查詢參數，展示某個省下屬的城市列表*///  使用 XHR4步走// 1.創建 XML 對象const xhr=new XMLHttpRequest()// 2.配置請求方法和請求 url 地址xhr.open('GET','http://hmajax.itheima.net/api/city?pname=黑龍江省')// 3.監聽 loadend 事件,接收響應結果xhr.addEventListener('loadend',()=>{console.log(xhr.response)const data=JSON.parse(xhr.response)console.log(data)document.querySelector('.box').innerHTML=data.list.join('<br>')})// 4.發送xhr.send()</script>

1.3 案例-地區查詢

查看接口文檔:

通過查看接口文檔可知,查詢參數有兩個,正常通過 GET 查詢的時候,需要拼接 比如xhr.open(‘GET’,‘http://hmajax.itheima.net/api/city?pname=黑龍江省&…’),參數一多,拼接起來的效率就低了

通過一種方法:new URLSearchParams(),可以把你傳來的對象變成參數名=參數值&參數名=參數值…的這種形式,然后直接放入到 xhr.open 中使用

方法核心代碼:

 // 1.收集帶拼接的參數值const pname=document.querySelector('.province').valueconst cname=document.querySelector('.city').value//2.將收集的參數值,寫成對象的形式,對象中有參數名:參數值的形式const qObj={pname,cname}//3.將收集而來的對象,轉化成 XXX&XXX 的形式//步驟一:const paramsObj=new URLSearchParams(qObj)//步驟二:const queryString=parmsObj.toString()

完整代碼:

 <script>
document.querySelector('.sel-btn').addEventListener('click',()=>{// 1.收集帶拼接的參數值const pname=document.querySelector('.province').valueconst cname=document.querySelector('.city').value//2.將收集的參數值,寫成對象的形式,對象中有參數名:參數值的形式const qObj={pname,cname}//3.將收集而來的對象,轉化成 XXX&XXX 的形式//步驟一:const paramsObj=new URLSearchParams(qObj)//步驟二:const queryString=paramsObj.toString()//使用 XHR 對象查詢參數// 1.創建 XML 對象const xhr=new XMLHttpRequest()// 2.配置請求方法和請求 url 地址xhr.open('GET',`http://hmajax.itheima.net/api/area?${queryString}`)// 3.監聽 loadend 事件,接收響應結果xhr.addEventListener('loadend',()=>{console.log(xhr.response)const data=JSON.parse(xhr.response)console.log(data)//處理渲染數據const htmlStr =data.list.map(araeName=>{return `<li class="list-group-item">${araeName}</li>`}).join('')console.log(htmlStr)document.querySelector('.list-group').innerHTML=htmlStr})// 4.發送xhr.send()})</script>

渲染數據代碼詳解

const htmlStr = data.list.map(areaName => {return <li class="list-group-item">${areaName}</li>;
}).join('');

• data.list,拿數據的數組
• .map 循環每一項,拿到一個字符串數組,每一項就是 return 的 li 標簽
• ()里是箭頭函數,areaName就是每一項的值,后面用了模板字符串
• .join(‘’),將字符串數組拼接起來’'表示中間不加東西的拼接

1.4 案例-注冊-設置請求頭

根據接口文檔,使用 XHR 對象,需要告訴服務器內容類型,比如這個文檔就是告訴服務器傳 JSON 數據