AJAX - Githubissues

AJAX 是什么？有什么作用？

AJAX(Asynchronous JavaScript and XML) 通过原生的 XMLHttpRequest 对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。
简单来说，AJAX 就是用 JS 向服务端发起一个请求，并获取服务器返回的内容。
想要用 JS 发起一个请求很简单，一共 4 步。

创建一个对象

var request = new XMLHttpRequest()

监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

第三行的 request.responseText 就是服务器返回的内容了（默认是字符串）

设置请求参数

request.open("GET", "filename", true);

发送请求

request.send();

这 4 步看起来是有些复杂的，不要紧，jQuery.ajax 对这 4 步进行了封装，只需要一步就可以了：

$.get('filename').then(function(response){
  // 这里的 response 就是返回的内容
})

AJAX 的作用

更好的用户体验(不用刷新页面，或者说只需要刷新部分页面)

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

前后端开发时需要注意：

约定接口类型（GET 还是 POST)、名字（传递到那个路由）
前端传递给后端的参数（参数的类型、格式）
后端返回数据的格式（是数组还是字符串还是 JSON 格式）

后端接口完成之前，前端可以根据接口文档，模拟后端数据验证所写页面的响应和接口是否正常。
搭建 node.js 环境，使用 server-mock 模拟前后端数据传输
也可以使用 XAMPP 等集成软件使用 PHP 写一些后端程序来 mock 数据。

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

如果用户网速慢，数据响应缓慢，用户希望得到数据，很可能会重复点击，重复点击会请求多次 AJAX，而且一直请求一块区域的内容。这就导致加载过来的数据很多，而且重复。
解决思路：阻止用户的重复点击。第一次点击时请求的数据还没到之前，其他的点击操作无效，被忽略。
设计一个状态锁，实时监看响应数据的情况，默认为已经有响应。
当点击按钮时，判断请求是不是响应了。如果没有响应，不会做任何操作。

//状态锁伪代码
var lock = false;
btn.addEventListener("click",function(){
  if(lock){
    return; //如果没有收到数据 就不往下执行
  }else{
    lock = true;
    ajax({
      ....
      lock = false; //收到响应之后才把 false 赋值给 lock
    })
   }
});

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加载更多</title>
  <style>
    .ct{
      list-style: none;
      padding: 0;
    }
    .ct li{
      margin-bottom: 10px;
      border: 1px solid;
      cursor: pointer;
      height: 38px;
      padding-top: 10px;
    }
    .ct li:hover{
      background: green;
      color:white;
    }
    .button {
      display: block;
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      border: 1px solid red;
      text-align: center;
      text-decoration: none;
      color: red;

    }
  </style>
</head>
<body>
  <ul class="ct">
    <li>内容1</li>
    <li>内容2</li>
  </ul>
  <a href="#" class="button">加载更多</a>
  <script>
    var button = document.querySelector('.button')
    var content = document.querySelector('.ct')
    var xhr = new XMLHttpRequest()
    var index = 2
    var sendEnd = false
    button.addEventListener('click', function (e) {
      e.preventDefault()
      if (sendEnd){
        return
      }
      xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && (xhr.status == 200||xhr.status == 304)){
          //获取数据
          var data = JSON.parse(xhr.responseText)
          var fragment = document.createDocumentFragment()
          for (var i in data){
            //创建元素
            var li = document.createElement('li')
            //将内容放入元素
            li.innerText = data[i]
            fragment.appendChild(li)
          }
          content.appendChild(fragment)
          sendEnd = false
        }
      }

      xhr.open('get', '/loadMore?index=' + index + '&length=5', true)
      xhr.send()
      sendEnd = true
      index += 5

    })
  </script>
</body>
</html>

//  router.js
app.get('/loadMore', function(req, res) {
  var curIdx = req.query.index;
  var len = req.query.length;
  var data = [];

  for(var i = 0; i < len; i++) {
    data.push('新闻' + (parseInt(curIdx) + i))
  }
  res.send(data);
});

HarleyWang93 / learning

AJAX #24

AJAX 是什么？有什么作用？

AJAX 的作用

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

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

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

推荐阅读