ajax实践总结

2017-09-07  本文已影响28人  osborne

1- 关于 ajax 及其作用

Ajax是Asynchronous JavaScript and XML的缩写。传统的从服务器获取数据都是要会刷新页面。包括了以下几个步骤：
1、浏览器向服务端发送请求，
2、服务器端获取请求信息后处理请求信息生成response，
3、服务器将response发送给浏览器，
4、浏览器刷新整个页面显示最新数据。
这个过程是同步的，按照顺序执行。这就会造成整个页面刷新用户体验差的情况，并且很多情况都只是页面的一部分内容改变，大部分内容是不改变的，这就造成多余的请求。这时候就是发挥ajax的作用了。
ajax利用xmlhttprequest对象脱离浏览器页面向服务器发送请求、加载等单独执行。这就能够不重新加载整个网页的情况下，对部分网页进行更新。

优点：
更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
数据与呈现分离： 利于分工，降低前后耦合。

缺点：
浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。

2- 关于前后端开发联调需要注意的事情，后端接口完成前如何 mock 数据

前后端开发联调需要注意哪些事情:

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

var ajaxLock = false;
if (ajaxLock) {
    return
}
xhr = new XMLHttpRequest();
ajaxLock = true;
xhr.onreadystatechange = function () {
    if(xhr.readystate == 4) {
        ajaxLock = false;
    }
}

4- 实现加载更多的功能，效果范例，后端在本地使用server-mock来模拟数据

//后端
app.get('/getmore', function(req, res) {
    var nodeCount = Number(req.query.childCount);
    var content = []
    for (var i = nodeCount + 1; i <= nodeCount + 5; i++) {
        content.push('内容' + i);
    }
    res.send(content);
});

//前端
<body>
    <div class="container">
        <ul>
            <li>内容1</li>
            <li>内容2</li>
        </ul>
        <div class="box">
            <a href="#" id="more">获取更多</a>
        </div>
    </div>
    <script>
        var more = document.getElementById("more");
        var ul = document.querySelector(".container > ul");
        var xhr = new XMLHttpRequest();

        function getMoreContent(event) {
        var child = ul.childElementCount;
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                insertHTML(JSON.parse(xhr.responseText));
            }
        }
        var url = '/getmore?childCount=' + child;
        xhr.open('get', url, true);
        xhr.send();
    }

    function insertHTML(data) {
        var i = 0;
        for (i = 0; i < data.length; i++) {
            var element = document.createElement('li');
            element.innerText = data[i];
            ul.appendChild(element);
        }
    }
    more.addEventListener('click', getMoreContent);
</script>

- 学习感想：

上一篇 下一篇

猜你喜欢

热点阅读