ajax实践

Ajax和XMLHttpRequest

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

• 含义：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。

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

• 前后端开发联调需要注意事项：

  • 约定数据：有哪些需要传输的数据，数据类型是什么；
  • 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
  • 根据这些约定整理成接口文档

• 如何mock数据：

  • 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
  • 可以用xampp进行模拟
  • 也可使用server-mock

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

            var btn = document.querySelector('.btn');
        var ct = document.querySelector('.ct')
        var pageIdx = 0
        var isDataArrive = true;

        btn.addEventListener('click',function(){
            if(!isDataArrive) {
                return;
            }
            
            ajax({
                 isDataArrive = true;
            })
            isDataArrive = false;
        }

先设置一个开关，在ajax没有监听到后台数据时，将开关关闭，只有当后台数据返回并且监听到后才能将开关打开

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

   function ajax(opts){
    opts.success = opts.success || function(){};
    opts.error = opts.error || function(){};
    opts.type = opts.type || 'get';
    opts.data = opts.data || {};
    opts.dataType = opts.dataType || 'json';

    var html = '';
    for(var key in opts.data) {
        html += key + '=' + opts.data[key] + '&';
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.status === 304){
                if(opts.dataType == 'text'){
                    opts.success(xhr.responseText);
                }else if(opts.dataType == 'json'){
                    var json = JSON.parse(xhr.responseText);
                    opts.success(json);
                }  
            }else{
                opts.error();
            } 
        }   
    }
    var html = html.substr(0,html.length-1);

    if(opts.type.toLowerCase() === 'get'){
        html = opts.url + '?' + html;
        xhr.open(opts.type,html,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(html);
    }
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});

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

1.png

题目源码