24.ajax

问答

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

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,它是通过原生的XMLHttpRequest对象发出HTTP请求，数据通常会以JSON的格式来进行发送，得到服务器返回的数据后，再进行处理。
AJAX通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。它可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)

①需要注意的事情有：
约定好数据和接口
例如：
约定数据：需要传输的数据；
约定接口：接口名称，请求和响应的格式；
②MOCK数据的方法有：
使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
使用XAMPP等工具，编写PHP文件来进行测试

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

可使用状态锁的方式：

var lock=false;   //设置初始值是false,解锁状态
btn.addEventListener('click',function(){
    if(lock){   //先判断一次，这里是false不执行，true的话就return
          return;
    };    
    lock=true;  //如果程序运行到这里的话，重复点击的话会return出去
    ajax({
          to do:function(){
           ....  //执行完某个动作后解锁
           locked=false
          }
     })
});

代码

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

function ajax(opts){
    // todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: 'getData.php',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});

function ajax(opts){

     //这里是创建ajax对象，获取ajax对象的后台响应文本
    var xmlhttp = new XMLHttpRequest();  
    xmlhttp.onreadystatechange = function(){   //在ajax上绑定事件监听
        if(xmlhttp.readyState==="4" && xmlhttp.status==="200"){
              var json=JSON.parse(xmlhttp.responseText);  
//把字符串形式的responseText转为JSON对象
               opts.success(json);
        }
        if(xmlhttp.readyState==="4" && xmlhttp.status==="404"){  //ajax通信失败,报错
              opts.error();
       }
    };

    //这里是为了获得数据，然后把数据变成key=value的形式
    var dataStr =" ";   //声明一个空字符串dataStr
    for(var key in opts.data){  //使用for in遍历opts.data对象，变为键值对形式
        dataStr +=key + "=" + opts.data[key] + "&";//把opts.data对象中每一项的key 和对应的值提取出来拼装进字符串dataStr
    };
    dataStr=dataStr.substr(0,dataStr.length-1);

    //这里是ajax对象两种数据传输类型
   if(opts.type.toLowerCase()==="get"){  //如果是get类型，url后面加上数据
        xmlhttp.open("GET",opts.url+"?"+dataStr,true); //连接服务器
        xmlhttp.send(); //发送数据过去
   };
   if(opts.type.toLowerCase()==="post"){
        xmlhttp.open("POST",opts.url,true);  
        xmlhttp.setRuquestHeader("Content-Type","application/x-www-form-urlencoded")
        xmlhttp.send(dataStr);   //如果是post类型，send里面发送数据，同时在发送前面加上ajax头部
  };

}

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

HTML代码






Examples






    
        内容1
        内容2
    
    点我加载更多

PHP代码

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