Ajax

问答：

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

Ajax是Asynchronous JavaScript and XML（异步JavaScript 和XML）的缩写，它能够向服务器请求额外的数据而无需从新加载页面的技术。

Ajax在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这意味着可以在不重新加载整个页面的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。

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

通常前端是负责模板，后端是负责数据，双方在联调时需要注意：
1.约定好数据，确认数据的传输格式，如JSON或XML等，然后确认数据的传输方式，如通过AJAX等方式传输数据。
2.约定好接口，确认接口的参数和返回值，以及接口名称。
Mock数据
1.自己编写模拟数据。
2.使用mockjs，来模拟数据。
3.使用server-mock，生成模板。

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

设置状态锁：设置一个变量locked，初始值为false，触发相关事件时为ture，并且设置当locked为true时return。当事件函数里面的ajax执行完之后设置locked为false，这样当ajax请求的数据还没来之前如果重复点击的话，就会直接return出该事件函数，使重复点击无效。

var locked = false;//设置状态锁
el.addEventListener('click',function(){
    if (locked) return;
    locked = ture;//上锁
    ajax({
        ...
        success:function() {
        locked = false//解锁
        ...
    }
         error: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('出错了')
        }
    })
});

ajax函数：

function ajax(opts){
    //创建ajax对象
    var xmlhttp = new XMLHttpRequest();
    //对ajax进行事件监听
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState ===4 && xmlhttp.status === 200){
            //将服务器返回的文本内容转为JSON格式
            var json = JSON.parse(xmlhttp.responseText);
            opts.success(json);;
        }
        if(xmlhttp.status === 404){
            opts.error()
        }
    };
    //创建发送到服务器的数据，为了让数据附加到url上，必须为key/value格式。
    var dataStr = "";
    for (var key in opts.data) {
        dataStr += key + '=' +opts.data[key]+'&';
    }
    dataStr = dataStr.substr(0,dataStr.length-1);
    //判断请求的方式为get
    if(opts.type.toLowerCase() === "get"){
        //链接服务器
        xmlhttp.open('GET',opts.url+'?' +dataStr,true);
        //发送请求
        xmlhttp.send();
    }
    //判断请求方式为post
    if(opts.type.toLowerCase() === "post"){
        xmlhttp.open('POST',opts.url,true);
        //为了使post请求与提交web表单相同，将 Content-Type 头部信息设置为 application/x-www-form-urlencoded来模仿表单提交功能。
        xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xmlhttp.send(dataStr);
    }
}

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

代码github地址：task24-2
本地运行效果：

更多加载

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

代码github地址：task24-3
本地运行效果：

注册表单

本文版权归本人和饥人谷所有，转载请注明来源。

最后编辑于：2017.12.04 05:42:12