ajax实践

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)