1、 ajax 是什么?有什么作用?
ajax(Asynchronous JavaScript and XML 異步的JavaScript與XML技術)通過在后臺與服務器進行少量數據交換,可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
具體流程:
創建AJAX對象
發出HTTP請求
接受服務器傳回的數據
更新網頁數據
2、 前后端開發聯調需要注意事項
- 約定數據:有哪些需要傳輸的數據,數據類型是什么
- 約定接口:確定接口名稱及請求和響應的格式,請求的參數名稱、響應的數據格式
- 根據這些約定整理成接口文檔
舉例
{
"status":0,
"data":["新聞0","新聞1","新聞2","新聞3","新聞4"]
}
3、后端接口完成前如何 mock 數據
- 可以根據接口文檔,使用假數據來驗證我們制作的頁面響應和接口是否正常。
- 可以搭建php本地服務器用,php寫腳本提供臨時數據
- 可使用Mock.js,它能攔截ajax請求并根據請求中的內容來隨機生成符合你要求的假數據,模擬后端環境讓你完成對頁面和接口的測試。
4、點擊按鈕,使用 ajax 獲取數據,如何在數據到來之前防止重復點擊?
var ajaxLock = true //1.設置一個狀態鎖,默認狀態不會被return
button.addEventListener('click',function(){
if(!ajaxLock){
return //服務器還未返回數據,鎖未打開點擊無效直接return
}
ajax({
...
ajaxLock = true //3.得到數據后,恢復狀態,可以繼續點擊發送請求
})
ajaxLock = false //2.請求發送完成,在數據到來之前設為false,會被上面的驗證直接return
})
5、你真的會使用XMLHttpRequest嗎?
ajax是一種技術方案,但并不是一種新技術。它依賴的是現有的CSS/HTML/Javascript,而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象,是這個對象使得瀏覽器可以發出HTTP請求與接收HTTP響應。
用一句話來總結兩者的關系:我們使用XMLHttpRequest對象來發送一個Ajax請求
xhr提供了3個屬性來獲取請求返回的數據,分別是:xhr.response、xhr.responseText、xhr.responseXML