1. ajax 是什么？有什么作用？
AJAX是對(duì)Asynchronous JavaScript and XML的簡(jiǎn)寫，它的誕生使得向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而不用刷新頁(yè)面。
作用：
- 更新數(shù)據(jù)而不需要刷新頁(yè)面： 它能在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)，由于ajax是按照需求請(qǐng)求數(shù)據(jù)，避免發(fā)送那些沒有改變的數(shù)據(jù)。
- 異步通信： 它與服務(wù)器使用異步的方式通信，不會(huì)打斷用戶的操作（卡死頁(yè)面）。
- 前后端負(fù)載平衡： 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端，利用客戶端限制的能力來(lái)處理，減輕了服務(wù)器的負(fù)擔(dān)。
- 數(shù)據(jù)與呈現(xiàn)分離： 利于分工，降低前后耦合。
2.前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
- 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)，數(shù)據(jù)類型是什么；
- 約定接口：確定接口名稱及請(qǐng)求和響應(yīng)的格式，請(qǐng)求的參數(shù)名
- 稱、響應(yīng)的數(shù)據(jù)格式；
- 根據(jù)這些約定整理成接口文檔
- mock數(shù)據(jù)：
可以根據(jù)接口文檔，使用假數(shù)據(jù)來(lái)驗(yàn)證我們制作的頁(yè)面響應(yīng)和接口是否正常。 - 使用server-mock，簡(jiǎn)單使用步驟如下：
- npm install -g server-mock：在全局中安裝server-mock
- mock init：生成3個(gè)mock文件(index.html,router.js,user.ejs)
- mock start：開啟服務(wù)器
3.點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
var isLoading = false;//狀態(tài)變量：用于在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊 btnNode.addEventListener('click', function() { if(isLoading) return;//正在加載則終止 var text = textNode.value; var xhr = new XMLHttpRequest(); xhr.open('get', '/test?text=' + text, true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { var content = xhr.responseText; console.log(content); contentNode.innerText = content; isLoading = false;//加載成功則重置狀態(tài)變量 } } isLoading = true;//加載開始時(shí)改變狀態(tài)變量的值 });
4.封裝一個(gè) ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來(lái) mock 數(shù)據(jù)
function ajax(opts){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = JSON.parse(xmlhttp.responseText) opts.success(result); } if(xmlhttp.readyState == 4 && xmlhttp.status == 404) { opts.error(); } }; var dataString = ''; for(var key in opts.data) { dataString += key + '=' + opts.data[key] + '&'; } dataString = dataString.substring(0, dataString.length - 1); if(opts.type.toLowerCase() === 'get') { xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send(); } if(opts.type.toLowerCase() === 'post') { xmlhttp.open('post', opts.url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(dataString); } } document.querySelector('#btn').addEventListener('click', function(){ ajax({ url: '/login', //接口地址 type: 'get', // 類型， post 或者 get, data: { username: 'xiaoming', password: 'abcd1234' }, success: function(ret){ console.log(ret); // {status: 0} }, error: function(){ console.log('出錯(cuò)了') } }) });
