ajax 是什么？有什么作用？
Asynchronous javascript and XML 即異步的JS和XML
是前后端數據交互的一種方法
通過原生的XMLHttpRequest對象，發出HTTP請求，并以異步方式（絕大多數時候）從服務器獲取信息
優點：
更新數據而不需要刷新頁面： 它能在不刷新整個頁面的前提下與服務器通信維護數據，由于ajax是按照需求請求數據，避免發送那些沒有改變的數據。
異步通信： 它與服務器使用異步的方式通信，不會打斷用戶的操作（卡死頁面）。
前后端負載平衡： 可以將后端服務器的一些工作轉移給客戶端，利用客戶端限制的能力來處理，減輕了服務器的負擔。
數據與呈現分離： 利于分工，降低前后耦合。
缺點：
瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當用戶想要回到上一個狀態時，無法使用瀏覽器提供的后退。
AJAX的安全問題： AJAX的出現就像建立起了一直通服務器的另一條通道，容易遭受到一些攻擊。
前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
約定數據：名稱、類型等
約定借口：名稱、格式、參數等
根據約定整理成接口文檔
前端人員可以自己使用服務器框架搭建一個模擬服務器環境，比如express&nodejs或xampp或server-mock。
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
var isOk = true; //設置狀態鎖
btn.onclick =function(){
if(!isOk){return} //狀態鎖沒開直接返回
isOk = false;//關閉狀態鎖
var XHR = new XMLHttpRequest();
XHR.open("GET","/json/page"+index+".json");
index++;
XHR.onreadystatechange = function(req,res){
if(XHR.readyState===4){
if(XHR.status===200){
success(XHR.response);
}else{
console.log("錯誤:"+XHR.status)
}
isOk = true; //打開關閉狀態鎖
}
}
XHR.send();
}
實現加載更多的功能，后端在本地使用server-mock來模擬數據
var btn = document.getElementById("clickme");
var box = document.getElementsByClassName("wrap")[0];
var index = 1;
var isOk = true;
btn.onclick =function(){
ajax(success);
}
function ajax(callback){
if(!isOk){return}
isOk = false;
var XHR = new XMLHttpRequest();
XHR.open("GET","/json/page"+index+".json");
index++;
XHR.onreadystatechange = function(req,res){
if(XHR.readyState===4){
if(XHR.status===200){
callback(XHR.response);
}else{
console.log("錯誤:"+XHR.status)
}
isOk = true;
}
}
XHR.send();
}
function success(response){
var obj = JSON.parse(response);
for(var i=0;i<obj.length;i++){
var newItem = document.createElement("div");
newItem.className = "item";
newItem.innerHTML = `<p class="title">`+obj.item[i].title+`</p>
<p class="content">`+obj.item[i].content+`</p>`;
box.insertBefore(newItem,btn);
}
console.log(obj);
if(!obj.hasNext){
btn.className="unclicked";
btn.innerText = "沒有更多了";
isOk = false;
}
}
后端
var http = require('http')
var fs = require('fs')
var url = require('url')
//console.log(Object.keys(http))
var port = process.env.PORT || 8888;
var server = http.createServer(function(req, res){
var temp = url.parse(req.url, true)
var path = temp.pathname
var query = temp.query
var method = req.method
if(path==="/index.html"||path==="/"){
var string = fs.readFileSync("index.html");
res.setHeader("Content-type","text/html")
res.end(string)
}else
if(path==="/css/main.css"){
var string = fs.readFileSync("css/main.css");
res.setHeader("Content-type","text/css")
res.end(string)
}else
if(path==="/js/main.js"){
var string = fs.readFileSync("js/main.js");
res.setHeader("Content-type","text/javascript")
res.end(string)
}else
if(path.slice(1,5)==="json"){
var string = fs.readFileSync(path.slice(1));
res.setHeader("Content-type","application/json");
setTimeout(function(){res.end(string)},0);
}else
if(path==="/img/new1.jpg"){
var string = fs.readFileSync(path.slice(1));
res.setHeader("Content-type","application/x-jpg");
res.end(string)
}
console.log(method + ' ' + req.url)
})
server.listen(port)
console.log('監聽 ' + port + ' 成功，打開 http://localhost:' + port)
