在準備js面試題時，遇到了許多知識盲區，或是已經遺忘的知識，所以來寫一下博客，記錄自己的成長，同時查漏補缺
Ajax是Asynchronous JavaScript and XML（異步JavaScript和XML）的簡寫，它可以異步地向服務器發送請求，在等待回應的程序中，不會阻塞當前頁面，瀏覽器可以做自己想做的事情，直到成功獲取回應后，瀏覽器才開始處理回應資料，通俗點講，就是瀏覽器和服務器之間的一種異步通信方式
ajax的使用步驟：//1.使用XMLHttpRequest這個建構式創建一個實體
//你也可以不取xhr這名字，只是我們一般都這么起
const xhr = new XMLHttpRequest()
2.準備發送請求，使用xhr.open()方法
里面傳入三個引數，第一個是請求方法，如get請求，post請求，請求方法要全部大寫
第二個引數是請求的地址url
第三個引數 是否使用異步，是：true 通常我們都是使用異步，不使用異步那太危險了
xhr.open('GET',url,true)3.發送請求 使用xhr.send()方法，括號里一般都不加引數
不加的時候我們把null填進去，這樣的兼容性好，當然你不加也沒關系
只是加了也不麻煩，幾個字而已
如果是post請求，可以把引數放這里面
因為post請求的引數可以放請求體里，get請求只能放請求頭
xhr.send(null)4，監聽事件，處理回應
當獲取到回應后，會觸發xhr物件的readystatechange事件，可以在該事件上對回應進行處理
readystatechange事件監聽readyState這個狀態的變化
readyState從0~4，一共五個狀態
0： 未初始化，尚未呼叫open()
1:啟動，已經呼叫open()但是還沒呼叫send（）
2:發送，已經呼叫send（），但是還沒接收回應
3:接收，已經接收了部分回應資料
4:完成，已經接收到全部的回應資料，而且已經可以在瀏覽器中使用了
xhr.onreadystatechange = () => {
//如果xhr.readyState不是4，那就直接回傳，因為根本沒接收完
if(xhr.readyState !== 4) return
//能獲取到回應，表示網路傳輸的程序中沒有問題
//但是我們不能保證我的請求，或者是服務器端不會出現問題，所以我們還需要用HTTPCODE狀態碼來判斷
//我們都知道，狀態碼200~300之間都是成功的，還有一個例外，304也是成功的
if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
// 獲取到回應后，回應的內容就會自動填充在xhr物件的屬性上
console.log(xhr.responseText);
}
}最后一個注意的點，由于兼容性的原因，我們的監聽事件一般放在xhr.open（）前后
const xhr = new XMLHttpRequest()
const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
xhr.onreadystatechange = () => {
if(xhr.readyState !== 4) return
if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
}
}
xhr.open('GET',url,true)
xhr.send(null)這就是一個基本的ajax請求，說完基本的用法，我們使用promise來將其給封裝一下
const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
function ajax(url) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.addEventListener('readystatechange', () => {
if(xhr.readyState === 4) {
if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
resolve(
JSON.parse(xhr.responseText)
)
}else if(xhr.status === 404) {
reject(new Error('404 not found'))
}
}
})
xhr.send(null)
})
return p
}
ajax(url).then( res=> console.log(res)).catch( err => console.log(err))請求成功
把url改成一個錯誤的地址再試一下
證明我們寫的沒毛病
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305713.html
標籤：其他