24.ajax

2016-11-19 本文已影响35人鸿鹄飞天

问答

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代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    body,ul,li{
        margin:0px;
        padding:0px;
    }
    li{
        list-style: none;
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        text-align: left;
    }
    li:hover{
        cursor: pointer;
        color: #fff;
        background:green;
    }
    #btn{
        height: 50px;
        width: 100px;
        color:#E27272;
        text-align: center;
        line-height: 50px;
        border: 1px solid #E27272;
        border-radius: 4px;
        margin:20px auto;
    }
    #btn:hover{
        cursor: pointer;
    }

</style>
</head>
<body>
    <ul id="content">
        <li>内容1</li>
        <li>内容2</li>
    </ul>
    <div id="btn">点我加载更多</div>

   <script>
         function ajax(opts){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var json = JSON.parse(xhr.responseText);
                    console.log(json);
                    opts.success(json);
                }
                if (xhr.readyState == 4 && xhr.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()=="get"){
                xhr.open(opts.type,opts.url+"?"+dataStr,true);
                xhr.send();
            }
            if (opts.type.toLowerCase()=="post"){
                xhr.open(opts.type,opts.url,true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(dataStr);
            }
        }

        var btn=document.querySelector('#btn');
                var lock=false;
        btn.addEventListener('click',function(){
            if(lock) {
                return;
            };
            lock=true;
            ajax({
                type:'get',
                url:'task24-2.php',
                data:{ 
                         begin:document.querySelector('#content').children.length,                                                                                                                 
                         len:4
                },
                success:function(arr){
                    dealWith(arr);
                       lock=false;
                },
                error:function(){
                    onError();
                }
              })
         });

        function dealWith(arr){
            for(var i=0;i<arr.length;i++){
                var newLi=document.createElement('li');
                newLi.innerHTML=arr[i];
                document.querySelector('#content').appendChild(newLi)
            }
        }

        function onError(){
            console.log('出错了');
        };
        
   </script>
</body>
</html>

PHP代码

<?php
    $start = $_GET['begin'];
    $len = $_GET['len'];
    $items = array();
    for($i = 0; $i < $len; $i++){
        array_push($items, '内容' . ($start+$i+1));
    }
    echo json_encode($items);

?>

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