ajax 未完

问答

---

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

ajax即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部更新。

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

需要注意的事情

• 约定前后端联调的事件。
• 约定双方需要传输的数据和接口，在接口问盎中确定好参数的名称、格式等。
• 约定请求和响应的格式和内容。

MOCK数据段方法

• 使用server-mock 或者 mock.js搭建模拟服务器，进行模拟测试；
• 使用XAMMPP等工具，编写PHP文件来进行测试。

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

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

---

代码

---

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

function ajax(opts){

            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    var json = JSON.parse(xmhttp.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-urllencoded");
                xmlhttp.send(dataStr);
            }
            if(opts.type.toLowerCase() === 'get'){
                xmlhttp.open(opts.type, opts.url + '?' +dataStr, true);
                xmlhttp.send();
            }
        }
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('出错了')
        }
    })
});

2.实现如下加载更多的功能。效果如下： 加载更多的功能
3.实现注册表单验证功能效果如下：注册表单验证功能

---

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