-
關鍵詞：Ajax
Ajax：在不刷新頁面的情況下，向服務器發送請求、獲取數據，并異步更新網頁的某部分！
1. Ajax 是什么？有什么作用？
- Ajax 全稱“Asynchronous Javascript And XML”，即：異步的 JavaScript 和 XML。
- Ajax 本質就是一個 XMLHttpRequest 對象，這個對象提供了一些接口：用于向服務器發送請求和解析服務器響應。
- Ajax 就是一種技術，可在不刷新頁面的情況下，與服務器交互數據，采用異步方式更新網頁的部分內容。
- 采用 Ajax 與服務器交互數據，可使用戶擁有較好的體驗：運行頁面上某個功能時頁面不會重新加載，且等待過程中不會影響頁面上其他功能的運行。
2. 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
前后端在進行開發前，需要協作商定數據和接口的各項細節，后端負責提供數據，前端負責展示數據（根據數據負責頁面的開發）。
- 前后端開發聯調注意事項
- URL：接口名稱
- 發送請求的參數和格式（get/post）
- 數據響應的數據格式（數組/對象）
- 根據前后端約定，整理接口文檔
- 如何 mock 數據
- 搭建 web 服務器
- 根據接口文檔仿造假數據
- 關聯前后端文件，開啟 web 服務器
- 驗證前端頁面功能及顯示是否正確
3. 點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊？
- 思路
- 使用狀態鎖檢驗此刻是否正在請求數據（是否上鎖）：是則放棄請求，否則發送請求
- 請求數據之前，解鎖狀態：“ 發送 Ajax 請求 ” 代碼可執行
- 正在請求數據，上鎖狀態：“ 發送 Ajax 請求 ” 代碼被禁用
- 拿到后臺數據，解鎖狀態：“ 發送 Ajax 請求 ” 代碼被解禁
- 代碼
var btn = document.querySelector('.btn');
var isLoading = false; // 狀態鎖1：發送請求之前，解鎖狀態
btn.addEventListener('click', function () {
if(isLoading){
return; // 狀態鎖0：用于檢測是否正在請求數據，是則跳出，否則繼續
}
ajax({ // 調用封裝的 ajax 函數
method: 'get',
url: '/lockModal',
data: {},
async: 'true',
success: function () {
onSuccess();
isLoading = false; // 狀態鎖3.1：請求數據已完成（成功拿到數據），解鎖狀態
},
error: function() {
onError();
isLoading = false; // 狀態鎖3.2：請求數據已完成（失敗拿到數據），解鎖狀態
}
});
isLoading = true; // 狀態鎖2：正確請求數據，上鎖狀態
})
4. 封裝一個 ajax 函數，能通過如下方式調用。后端在本地使用server-mock來 mock 數據
- Download
- ajax 調用格式
ajax（{
method: '',
url: '',
data: {},
// dataType: '', // 若需要則添加，否則不需添加
asyns: true, // 根據需要可以設置封裝函數的默認值為 true
success: function () {},
error: function () {}
}）
- ajax 簡單封裝
function ajax(opts) {
// 三、對數據進行處理
// 3.1、若數據存在，將數據組裝成字符串
if(opts.data){
var dataStr = '';
for(var key in opts.data){
dataStr = dataStr + key + '=' + opts.data[key] + '&';
}
opts.data = dataStr.substring(0, dataStr.length-1);
}
// 3.2、將方法處理為小寫
opts.method = opts.method.toLowerCase();
// 3.3、若為 get 方法，重新組裝 url
if( (opts.method == 'get') && opts.data){
opts.url = opts.url + '?' + opts.data;
}
// 四、開始 AJAX 函數
// 4.1、創建 AJAX 對象
var xhr = new XMLHttpRequest();
// 4.2、規定所需數據格式
xhr.open(opts.method, opts.url, opts.asyns);
// 4.3、發送請求
if(opts.method == 'get'){
xhr.send();
}else if(opts.method == 'post'){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(opts.data);
}
// 4.4、檢測服務器響應
xhr.onreadystatechange = function () {
if( (xhr.readyState == 4) && (xhr.status == 200) ){
opts.success( JSON.parse(xhr.responseText) );
console.log(opts.method);
}else {
opts.error(); // 此處有待改進，目前到此為止
}
}
}
5. 實現加載更多的功能，后端在本地使用 server-mock 來模擬數據
- 思路
- 編寫 HTML 和 CSS 代碼
- JS部分：給 ‘加載更多’ 按鈕添加事件：當用戶點擊時，執行下列代碼
- 調用封裝好的 ajax 函數，將定義好的請求發送給后端
- 在后端 mock 數據，獲取前端參數，處理數據，給前端發送數據
- 前端接收并調用數據，將數據展示在頁面上
6. 額外實現一個功能：換一批看看，后端自行 mock 數據
- 思路：與第5題思路大致相同
- 代碼：穿梭到 github 查看代碼
