一、概念
1.什么是Ajax
Ajax（Asynchronous Javascript And XML），即是異步的JavaScript和XML，Ajax其實就是瀏覽器與服務器之間的一種異步通信方式
異步的JavaScript
它可以異步地向服務器發送請求，在等待回應的程序中，不會阻塞當前頁面，在這種情況下，瀏覽器可以做自己的事情，直到成功獲取回應后，瀏覽器才開始處理回應資料，
XML
是前后端資料通信時傳輸資料的一種格式，現在已經不怎么用了，現在比較常用的是 JSON
所以歸納上述的概念，Ajax就是在瀏覽器不重新加載網頁的情況下，對頁面的某部分進行更新，
2.應用場景
注冊頁面
搜索提示
還有很多很多...
所以Ajax最大的優點就是，發送請求的時候不會影響用戶的操作，相當于兩條平行線一樣，“你忙你的，我忙我的”，不需要去等待頁面的跳轉而浪費時間，
二、實作Ajax
我們先看一組代碼：在這里創建的json檔案和html檔案都在同一個檔案夾中
//test.josn的代碼
{
"reply":"我收到啦！"
}
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'text.json', true);
xhr.send(null);執行結果：
在這里要啰嗦兩句：json檔案中的物件鍵名一定要用雙引號包裹，如果屬性值里面有字串，也需要用雙引號包裹，
執行步驟
1.創建xhr物件
const xhr = new XMLHttpRequest();2.利用onreadystatechange屬性，封裝一個函式，用于監聽 readyState的變化，
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300 ){
console.log(xhr.responseText);
}
};2.1在xhr物件執行收發資料的時候，它會經歷五種狀態：
| Ajax狀態碼 | 狀態 |
| 0 | （未初始化）未啟動 |
| 1 | （啟動）已經呼叫 open()，但尚未呼叫 send() |
| 2 | （發送）發送狀態，已經呼叫 send()，但尚未接收到回應 |
| 3 | （接收）已經接收到部分回應資料 |
| 4 | （完成）已經接收到全部回應資料，而且已經可以在瀏覽器中使用了 |
加兩句console.log()就可以看見狀態碼的變化了，
上述的readyStateChange事件是專門用來監聽xhr物件的Ajax狀態碼，只要readyState（也就是Ajax狀態碼）發生了變化，就會觸發這個事件，
2.2判斷HTTP狀態碼是否為200-299
Ajax狀態碼為4是不夠的，這僅僅表明收到服務器端回應的全部資料，并不能保障資料都是正確的，
所以，我們還需要判斷HTTP的狀態碼，判斷xhr物件的status屬性值是否在200到300之間（200-299 用于表示請求成功）
if (xhr.status >= 200 && xhr.status < 300 ){
console.log(xhr.responseText);
}所以要想請求成功完成，必須要滿足上面兩個條件，
3.準備發送請求
xhr.open('GET','text.json', true);引數1：選用"GET"或者“POST”的請求方式
引數2：發送請求的地址
引數3：是否異步
4.發送請求
xhr.send(null)注意：send() 的引數是通過請求體攜帶的資料，而GET請求是通過請求頭攜帶資料的，所以要把send的引數置為null
三、跨域
概念
什么是跨域？為什么會有跨域這種問題存在？
跨域的字面意思來說，就是向一個域發送請求，如果要請求的域和當前域是不同域，就叫跨域
https（協議）://a.xxx.com（域名）:8080（埠號）/flie/list（路徑）
只要協議、域名、埠號，只要有任何一個不一樣，都是不同域
同源策略
同源策略限制了跨域，同源策略是瀏覽器核心的安全機制，如果沒有了同源策略，瀏覽器的正常功能就會受到影響，所以web是構建在同源策略的基礎之上，
如果非同源，那么在請求資料時，瀏覽器會在控制臺中報一個例外，提示拒絕訪問，
以下就是不同源：
前端： http://a.com:8080/
服務端：https//b.com/api/xxx
所以同源就是協議、域名、 埠號都要一樣，
跨域解決方法
1.CORS 跨域資源共享
2.JSONP
感興趣的同學可以去查閱一下這兩個解決方法，因為需要后端API的支持，所以這里就不給大家演示了，
四、寫一個簡易的Ajax
這個代碼結合了Promise和Ajax的知識點，如果有小伙伴對Promise不熟悉的，可以點這里：
JavaScript異步（必考三座大三之三）——第三集：Promise_精通各種hello world的小希的博客-CSDN博客_js異步加載的方式
function ajax(url) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true)
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
resolve(
JSON.parse(xhr.response)
)
}else{
reject(new Error('Response error'))
}
}
}
xhr.send(null)
})
return p
}
const url = 'text.json'
ajax(url).then(res => console.log(res)).catch(err => console.log(err))
小結
我們再記住一遍Ajax的執行步驟，一定要記住哦！
1.創建一個xhr物件
2.使用xhr的readystatechange屬性，判斷Ajax的狀態碼
3.判斷HTTP的狀態碼
4.xhr.open()準備發送請求
5.xhr.send()發送請求
今天你學廢了嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/387928.html
標籤：其他