Ajax实践

ajax是什么？有什么作用？

• AJAX代表异步JavaScript和XML，简而言之，它是使用XMLHttpRequest对象与服务器端脚本进行通信，它可以发送以及接收各种格式的信息。
• AJAX的两个主要功能允许执行以下操作：
  1. 向服务器发出请求，而不重新加载页面
  2. 接收和处理服务器中的数据

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

• 注意事项
  • 约定页面接口参数
  • 约定页面数据格式
  • 约定请求参数
  • 约定需要数据类型
• 后端可以通过XMAPP或者server-mock来模拟mock数据

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

• 在提交数据后，直到获取数据的这段时间内，设置按钮的属性不可用
• 设置状态锁

var lock = false;
  document.querySelector('#btn').addEventListener('click', function() {
        if (lock) return;
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('get', '/getMusic?name=' + musicName, true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.querySelector('#container').innerHTML = xhr.responseText;
                lock = false;
                console.log(lock);
            }
        }
        lock = true;
    })

封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts) {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            }
            if (xhr.status === 404) {
                opts.error();
            }
        }
        var data = '';
        for (var key in opts.data) {
            data += key + '=' + opts.data[key] + '&';
        }
        data = data.substr(0, data.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, opts.url + '?' + data, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, opts.url, true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

    }

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

 var lock = false;
    var curIndex = 2;
    $('#btn').addEventListener('click', function() {
        if (lock) return;
        ajax({
            url: '/loadMore',
            type: 'get',
            data: {
                curIndex: curIndex,
                len: 5
            },
            success: function(data) {
                appendData(data);
                curIndex += 4;
                lock = false;
            },
            error: function() {
                console.log('错误')
            }
        })
        lock = true;
    })

    // ajax封装
    function ajax(opts) {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            }
            if (xhr.status === 404) {
                opts.error();
            }
        }
        var data = '';
        for (var key in opts.data) {
            data += key + '=' + opts.data[key] + '&';
        }
        data = data.substr(0, data.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, opts.url + '?' + data, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, opts.url, true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

    }

//渲染数据
 function appendData(data) {
        for (var i = 0; i < data.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = data[i];
            $('#doc-list-content').append(li);
        }
    }

function $(id) {
        return document.querySelector(id);
    }