大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

Ajax实战

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

  • AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。
  • AJAX可以使用页面不刷新更新数据,AJAX应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。

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

  • 前后端联调需要注意一下几点:
    1. 约定前后端联调的时间。
    2. 约定双方需要传输的数据和接口,在接口文档中确定好参数的名称、格式等。
    3. 约定请求和响应的格式和内容。
  • 可以使用server-mock模拟后端数据。
    1. 安装node.js,使用npm install -g server -mock安装server-mock
    2. 创建一个文件,如果是windows使用git-bash,如果是苹果系统使用终端打开这个文件,使用mock start 启动一个web服务器,会显示这个服务器地址,例如:localhost:8080
    3. 打开localhost:8080就是你创建的这个文件
    4. 使用终端输入:mock init 会在动在你创建的文件下面生成3个文件。
    5. 当html使用url对接口进行请求,会被router.js里相同的接口接受

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

  • 可以声明一个变量处理是否可以再次发送请求的一个状态。
var btn = document.querySelector('.query-area button')
    var input = document.querySelector('.query-area input')
    var isArrive = true;
    btn.addEventListener('click', function () {
      if (!isArrive) {return};
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          isArrive = true;
          if (xhr.status === 200 || xhr.status === 304) {
            var result = JSON.parse(xhr.responseText);
            render(result);
          }
        }
      }
      xhr.open('get', '/getFriends?username=' + input.value, true)
      xhr.send()
      isArrive =false;
    })

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

加载更多ajax.html
加载更多router.js