ajax实践

ajax 是什么?有什么作用?

  • AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
  • ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
  • ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
  • 可以和后端交换数据,不用刷新页面

作用

  1. 最大的一点是页面无刷新,用户的体验非常好。
  2. 使用异步方式与服务器通信,具有更加迅速的响应能力。。
  3. 可以把以前一些服务器负担的工作转嫁到客户端
  4. 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
  5. ajax可使因特网应用程序更小、更快,更友好。

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

  • 需要和后端约定数据接口的名称
  • 需要和后端约定数据格式是什么
  • 约定请求数据格式和响应数据格式

根据约定自己设置模拟数据,然后来完成测试

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

设置一个变量作为状态锁,初始的时候打开,发送完请求后锁定,接收到响应数据后在解锁

var lock = true;
var btn = document.querySelector('button');
btn.onclick = function () {
  if (!lock) return;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        let res = xhr.response;
      }
    }
    lock = true;
  }
  xhr.open('GET', 'dizhi');
  xhr.send();
  lock = false;
}

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

<!doctype html>
<html>
<head>
  <style>
    body {
      max-width: 800px;
      margin: auto;
      text-align: center;
    }
    ul,li {
      list-style: none;
    }
    li {
      border: 1px solid;
    }
  </style>
</head>
<body>
    <ul class="more">
    </ul>
    <button>加载更多</button>   
  <script>
    var btn = document.querySelector('button')
    var more = document.querySelector('.more')
    var lock = true;
    var index = 0;

    btn.addEventListener('click', function(){
        if (!lock) return;
       var xhr = new XMLHttpRequest()
       xhr.onreadystatechange = function(){
         if(xhr.readyState === 4){
          if (xhr.status === 200 || xhr.status === 304) {
              var res = JSON.parse(xhr.responseText);
              var forgment = document.createDocumentFragment();
              for (var i = 0; i < res.news.length; i++) {
                var node = document.createElement('li');
                node.innerText = res.news[i];
                forgment.appendChild(node);
              }
              more.appendChild(forgment); 
              index = res.index;
              lock = true;
          }
         }
       }
      xhr.open('get', '/more?index=' + index + '&length=5')
      xhr.send()
      lock = false;
    })
  </script>
</body>
</html>
router.get('/more', function(req, res) {
  var index = parseInt(req.query.index); // 通过 req.query获取请求参数
  var length = parseInt(req.query.length);
  var news = [];
  var start = index * 5;
  for (var i = start; i < start + length; i++) {
    news.push('新闻' + i);
  }
  var moreNew  = {
    'news': news,
    'index': ++index
  }
  res.send(moreNew)
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ajax 是什么?有什么作用? 含义:AJAX = Asynchronous JavaScript and XML...
    邵志远阅读 179评论 0 0
  • 题目1: ajax 是什么?有什么作用?AJAX即“Asynchronous Javascript And XML...
    饥人谷_桶饭阅读 306评论 0 0
  • 1、ajax是什么,有什么用? AJAX是异步的JavaScript和XML,作用主要是利用js的XMLHttpR...
    七_五阅读 163评论 0 0
  • 1. ajax 是什么?有什么作用? AJAX是对Asynchronous JavaScript and XML的...
    Rising_suns阅读 261评论 0 0
  • ajax是什么?有什么作用? AJAX代表异步JavaScript和XML,简而言之,它是使用XMLHttpReq...
    饥人谷_菜菜阅读 267评论 0 0