任务24 ajax

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

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面；AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求，核心对象XMLHTTPRequest），通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。

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

• 需要注意的事情

1. 前后端充分了解项目的需求
2. 前后端沟通设计接口，约定好数据格式 以及前端需要传递什么样的参数，还有传递的方式，
3. 共同制定接口说明，出一个文档
4. 前后端独立开发，前端向Mock Server发送请求，获取模拟的数据进行开发和测试
5. 前后端都完成后，前后端连接调试（前端修改配置向Real Server而不是Mock Server发送请求）。

• mock数据

1. 使用XAMPP等工具，搭建本地php服务器用，编写php脚本提供临时数据；
2. 使用mock.js生成模拟数据，拦截AJAX请求，并且返回模拟的数据进行测试；
3. 使用node server-mock，解决后端模板的渲染和AJAX接口的处理来模拟数据

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

1. setTimeout + clearTimeout连续的点击会把上一次点击清除掉，也就是ajax请求会在最后一次点击后发出去

2. disable 按扭

3. 用一个变量锁定啊。用户一点击，flag变成false，再点也不发送请求，ajax成功以后flag设为true

      var lock= false;    //设置锁变量； document.querySelector('.btn').addEventListener('click',function(){
      if(lock){        //如果有锁存在，则不执行AJAX
        return;  
      }
        lock= true;      //上锁
        ajax({
        url:'',
        type:'';
        data:{},
            success:function(ret){
        lock= false;  //解锁 
          },
        error:function(){
        }
      });
    });
   

参考知乎

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

//封装ajax
    function ajax(opts){
        //创建 XMLHttpRequest 对象
        var xhr=new XMLHttpRequest();
        //当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
            //将服务器返回的文本xhr.responseText转换为JSON格式字符串
                var str=JSON.parse(xhr.responseText);
            //使用succss方法
            opts.succss(str);
                }
            if (xhr.status==404&&xhr.readyState==4) {
                //若请求失败，调用error方法
                opts.error();
                }
            }
    

        //创建发送到服务器的数据
        var dataStr="";
        for(var key in opts.data){
            dataStr+=key+"="+opts.data[key]+"&";
            }
        dataStr= dataStr.substr(0,dataStr.length-1);
        dataStr+='&='+new Date().getTime();

        //判断请求方式get or post
        if(opts.type.toLowerCase()=="get"){
            xhr.open("GET",opts.url+"?"+dataStr,true)
            xhr.send();
        }
        if(opts.type.toLowerCase()=="post"){
            xhr.open("POST",opts.url,true)
            //为了使post请求与提交web表单相同，将 Content-Type 头部信息设置为 application/x-www-form-urlencoded来模仿表单提交功能（post必须的)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(dataStr);
        }
    }
        //ajax 对象 调用前面的函数
        document.getElementById('btn').addEventListener("click",function(){
            ajax({
                url:'phpajax.php',//后端接口地址
                type:"get",     // 类型， post 或者 get,
                data:{
                    username: 'xiaoming',
                    password: 'abcd1234'
                },
                succss:function(ret){
                    console.log(ret)         // {status: 0}
                },
                error:function(){
                    console.log("对不起，出错了")
                }
            })
        })

2.代码2-html
后端-php代码

  <?php 
    $start=$_GET['start'];
      $add=$_GET['len'];
      $li=array();
  for($i=0;$i<$add;$i++){
    $li[$i]='内容'.($start+$i+1);
    };
    echo json_encode($li);
 ?>

3.代码3
后端-php代码

<?php 
    $name=$_GET['username'];
    if($name=="hunger"){
    echo 0;
    }else{
    echo 1;
   }
?>

代码2和代码3本地服务器测试通过

版权为饥人谷和作者所有，若转发使用请注明出处.