題目1：
ajax 是什么？有什么作用？
含義：腳本發起HTTP通信
作用：傳輸數據到服務器，監聽狀態碼實現服務器返回結果，在整個網頁中，數據的發送響應過程中不會影響網頁其他位置的操作，這個過程實現了異步操作，節省用戶表單驗證時間，提高用戶體驗。
優點：
（1）無刷新更新數據。
AJAX最大優點就是能在不刷新整個頁面的前提下與服務器通信維護數據。這使得Web應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。
（2）異步與服務器通信。
AJAX使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。優化了Browser和Server之間的溝通，減少不必要的數據傳輸、時間及降低網絡上數據流量。
（3）前端和后端負載平衡。
AJAX可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕服務器的負擔，AJAX的原則是“按需取數據”，可以最大程度的減少冗余請求和響應對服務器造成的負擔，提升站點性能。
（4）基于標準被廣泛支持。
AJAX基于標準化的并被廣泛支持的技術，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執行。隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現了另一種輔助程序設計的技術，為那些不支持JavaScript的用戶提供替代功能。
（5）界面與應用分離。
Ajax使WEB中的界面與應用分離（也可以說是數據與呈現分離），有利于分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用于現在的發布系統。
題目2：
前后端開發聯調需要注意哪些事情？
（1），發生方式 ：是get還是post，后端用同樣的方式接收發送過來的數據
（2），統一接口
（3），前端發送什么數據格式給后端
后端接口完成前如何 mock 數據？
使用server-mock模擬前后端數據傳輸
//后端router.js文件
app.get(function(req,res){})
統一好接口和發生方式，后端router.js獲取前端發生過來的數據保存到req里面
var date1=req.query.xx
查詢到變量xx的數據復制給date1,date1就是我們獲取到的前端發生過來的xx的數據
獲取到前端發送全部數據后，進行某些操作
如：
if(date1===1){
//返回數據到客戶端
send(2);
}
前端通過ajax的 var arriDate=XMLHttpResqust.responseText
arriDate就保存著后端返回的數據
題目3：
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
添加一個狀態鎖，記住當前上次數據是否成功響應，如果沒有成功響應，return空
var dateArrive=true;
//監聽按鈕單擊狀態
Obtn.addEventListener("click",function(){
if(!dateArrive){
return;
}
//調用ajax函數
loadDate(function(news){
render(news);
pageindex=pageindex+5;
//還原狀態，不鎖定
dateArrive=true;
});
//鎖定狀態
dateArrive=false;
})
題目4：
封裝一個 ajax 函數，能通過如下方式調用。后端在本地使用server-mock來 mock 數據
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
text-align: center;
}
#btn{
padding: 6px 10px;
margin-top: 20px;
}
#btn:hover{
background: darkcyan;
}
</style>
</head>
<body>
<div>
<button id="btn" href="javascript:void(0);">登錄</button>
</div>
<script>
var Obtn=document.querySelector("#btn");
function loadDate(render){
var obj={
url: '/login', //接口地址
type: 'get', // 類型， post 或者 get,
datas: {
username: 'xiaoming',
passw: 'abcd1234'
},
success: render,
onerror: function(){
console.log('出錯了')
}
}
ajax(obj);
}
function render(ret){
console.log(ret,"歡迎您");
}
//ajax請求響應數據
function ajax(obj){
var xhr=new XMLHttpRequest();
var str=obj.url+'?';
for (key in obj.datas) {
str+=key+'='+obj.datas[key]+'&';
}
str=str.substr(0,str.length-1);
xhr.open(obj.type,str,true);
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var result=xhr.responseText;
obj.success(result);
}else{
obj.onerror;
}
}
}
xhr.send();
}
//監聽按鈕單擊狀態
Obtn.addEventListener("click",function(){
//調用ajax函數
loadDate(function(news){
render(news);
});
})
</script>
</body>
</html>
router.js文件
app.get('/login',function(req,res){
var username=req.query.username;
var passw=req.query.passw;
var dates;
if(username==='xiaoming'&&passw==='abcd1234') {
dates="xiaoming";
}else{
dates="用戶名或密碼不正確...";
}
res.send(dates);
})
數據mock成功
