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)
