问答

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

AJAX = Asynchronous JavaScript and XML，是可以异步和服务器交换数据，可以不重新加载整个页面的情况下，对网页的部分进行重新加载。

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

• 约定数据传输接口
• 约定接口的类型和参数

下载nodejs在终端运行server-mock运行，根据约定好的接口格式进行测试

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

        <script type="text/javascript">
            //设置0或1的状态，来作为状态锁。
            //在flag为0的时候，表示点击按钮会有响应。当状态为1的时候，表示正在响应中，多次点击无效。
            var flag = 0;
            el.addEventListener('click', function() {
                if(flag === 1) return;
                flag = 1; //将状态锁打开，再执行响应代码
                //响应代码⬇️
                ajax({
                        //to do
                        success: function() {
                            flag = 0; //在响应完之后保证状态回归到0，不影响下次响应
                            // to do
                        },
                        error: function() {
                            flag = 0; //在响应完之后保证状态回归到0，不影响下次响应
                            //to do 
                        },
                        //to do 
                    })
                    //to do 
            })
        </script>

代码

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

        <script type="text/javascript">
            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('出错了')
                    }
                })
            });
        </script>

//答

        <script type="text/javascript">
            function ajax(opt) {
                var xml = new XMLHttpRequest();
                xml.onreadystatechange = function() {
                    if(xml.readyState == 4 && xml.status == 200) {
                        var json = JSON.parse(xml.responseText);
                        xml.success(json);
                    }
                    if(xml.status == 404 && xml.readyState == 4) {
                        xml.error();
                    }
                }

                var sendmsg = '';
                for(var key in opt.data) {
                    sendmsg += key + '=' + opt.data[key] + '&';
                }
                sendmsg = sendmsg.substr(0, sendmsg.length - 1);
                if(opt.type.toLowerCase() == 'post'){
                    xml.open(opt.type, opt.url, true)
                    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xml.send(sendmsg);
                }
                if(opt.type.toLowerCase() == 'get'){
                    xml.open(opt.type, opt.url+'?'+sendmsg, true);
                    xml.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('出错了')
                    }
                })
            });
        </script>

2.实现如下加载更多的功能。
效果如下： http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html

答： http://book.jirengu.com/jirengu-inc/jrg-renwu5/%E5%BD%AD%E8%80%80%E6%85%B7/task24-ajax/loadmore/task24-2.html

3.实现注册表单验证功能
效果如下：http://jrgzuoye.applinzi.com/作业安排/jscode/JS7-ajax/3.html

答： http://book.jirengu.com/jirengu-inc/jrg-renwu5/彭耀慷/task24-ajax/register/task24-3.html