进阶任务12（主线任务）：ajax实践

题目1： ajax 是什么？有什么作用？

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。
作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。

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

前后端开发联调需要注意事项：

• 约定数据：有哪些需要传输的数据，数据类型是什么；
• 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
• 根据这些约定整理成接口文档

如何mock数据：

• 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
• 可以用xampp进行模拟
• 也可使用server-mock

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

设置一个状态变量来防止重复发送请求

var isDataArrival = true; 
btn.addEventListener('click',function (e) { 
      if (!isDataArrival){ 
            return; 
      } 
      if(xhr.readyState === 4){ 
           isDataArrival=true; 
       } 
      xhr.open('get',url); 
      xhr.send(); 
      isDataArrival = false; 
});

题目4：实现加载更多的功能，效果范例345，后端在本地使用server-mock来模拟数据

function ajax(opts) { 
          var xmlhttp = new XMLHttpRequest(); 
          xmlhttp.onreadystatechange = function() { 
             if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                  var result = JSON.parse(xmlhttp.responseText) opts.success(result);
             } 
             if(xmlhttp.readyState == 4 && xmlhttp.status == 404) { 
                opts.error(); 
              } 
          }; 
          var dataString = ''; for(var key in opts.data) { 
              dataString += key + '=' + opts.data[key] + '&';
           } 
          dataString = dataString.substring(0, dataString.length - 1);                  
          if(opts.type.toLowerCase() === 'get') { 
               xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send(); 
          } 
          if(opts.type.toLowerCase() === 'post') { 
              xmlhttp.open('post', opts.url, true); 
              xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); 
              xmlhttp.send(dataString); 
           }
 } 
 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('出错了') 
          } 
    }) 
});