进阶12 ajax

题目1: ajax 是什么?有什么作用?

AJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求
如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因,就会得到一个404页面。
这就是Web的运作原理:一次HTTP请求对应一个页面
如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。
最早大规模使用AJAX的就是Gmail,Gmail的页面在首次加载后,剩下的所有数据都依赖于AJAX来更新。
用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应


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

前后端联调需要:
约定接口类型(get/post)和名称
约定前端发送数据的类型及格式
约定后端响应返回的数据类型及格式
mock数据:使用server mock搭建本地服务器,用router.js文件模拟网站后端

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

在按钮点击下至获取到数据之前这段时间,屏蔽掉按键所绑定的时间,使之在这一段时间之内的点击是无效的即可,以下是代码:

var dataArrive = true;   
btn.addEventListener('click', function () {
    if(!dataArrive)     
        return;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.status === 304){
                //...
            }
            else
                console.log('出错了,请稍后再试');
            isArrive = true; 
        }
    };
    xhr.open('get', '/load', true);
    xhr.send();
    isArrive = false; 
});

题目4:实现加载更多的功能

loadMore.html
router.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容