Ajax

ajax 是什么？有什么作用？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换）AJAX 可以使网页实现异步更新。这意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据，然后通过DOM将数据插入到页面中，另外。虽然名字中包含着XML的部分，但Ajax通信与数据格式无关，不一定是xml数据。
作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

• 前后端开发联调需要注意事项：
  约定数据：有哪些需要传输的数据，数据类型是什么；
  约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
  根据这些约定整理成接口文档
• 如何mock数据：
  可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
  可以搭建php本地服务器用，php写脚本提供临时数据；
  也可使用server-mock

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

var lock = fales;
btn.addEventListener('click',function(){
     if(lock){
        return
   }else{       
                  lock true;
                  //  .......
                  xhr.onreadystatechange = function(){
                  //do something
                   lock = false;  
               }
          xhr.send();
  }
  })

封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts) {
var type = opts.type || 'get';
type = type.toLowerCase() || 'get';
var url = opts.url || '';
var date = opts.date || null;
var success = opts.success || function(){};
var error = opts.success || function(){};
var xhr = window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject('microsoft.XMLHTTP');
var dateArry = [];
for(var key in date){
    dateArry.push(key + '=' +date[key]);
}
var dateStr = dateArry.join('&');
if(type === 'get'){
    xhr.open(type,url+'?'+dateStr,true);
    xhr.send();
}else{
    xhr.open(type,url,true)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
    xhr.send(dateStr)
}
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4  && xhr.status === 200){
        success(xhr.responseText)
    }else{
        error();
    }
}
}
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('出错了')
        }
    })
});