问答

1.ajax 是什么？有什么作用？

• AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。

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

• 联调
  约定好需要传输的数据和接口，包括请求的类型get/post，请求url，数据的格式等
• mock数据
• 安装nodejs，在系统终端中输入npm install -g server-mock安装mock
• mock init 初始化数据，mock start开始；
• 生成的三个文件中，index.html为静态页面，router.js为后端接口文件，user.ejs为静态页面分隔的模板文件。

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

• 上锁：

var isDataArrive=true;  
xxx.addEventListener('click',function(){  
  if(!isDataArrive) return; 
  yyy.onreadystatechange=function(){
    if(){
      if(){}
      isDataArrive=true;                
    }  
    yyy.open();
    yyy.send();    
    isDataArrive=false;
  };  
}

代码

1.封装一个 ajax 函数，能通过如下方式调用

function ajax(opts){

        var xmlhttp = new XMLLHttpRequest();
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var json = JSON.parse(xmlhttp.responseText);
            opts.success(json);
          }
          if(xmlhttp.status == 404){
            opts.error();
          }
        }
        var dataStr = '';
        for(var key in opts.data){
          dataStr += key + '=' + opts.data[key] + '&';
        }
        dataStr = dataStr.substr(0, dataStr.length-1);

        if(opts.type.toLowerCase() === 'post'){
          xmlhttp.open(opts.type, opts.url, true);
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xmlhttp.send(dataStr);
        }
        if(opts.type.toLowerCase() === 'get'){
          xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
          xmlhttp.send();
        }
      }


      document.getElementById('btn').addEventListener('click',function(){
        ajax({
          url:'use_ajax.php',
          type:'get',
          data:{
            username:document.getElementById('username').value
          },
          success:function(data){
            console.log(data);//dealWith(data);
          },
          error:function(){
            console.log("错误");//onError();
          }
        });
      });

2.实现如下加载更多的功能。

任务24-2 代码
新浪云预览

3.实现注册表单验证功能

任务24-3 代码
新浪云预览