ajax实践

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

ajax即asynchronous javascript and xml(异步javascript和xml)
作用：

  • 实现网页的异步加载，局部刷新网页
  • 向服务器获取新数据时不需要刷新整个网页，提高用户体验

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

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

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

如何mock数据：

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

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

  var btn = document.querySelector('.btn')
  var lock = true
  btn.addEventListener('click',function(){
    if (!lock) {
      return
    }

    var xhr. = new XMLHttpRequest()
    xhr.onreadystatechange = function(opts){
      if (xhr.readyState === 4 && xhr.status ===200) {
        var data = JSON.parse(xhr.responseText)
        opts.success(data)
      }else if (xhr.readyState === 4) {
        opts.error()
      }
      lock = true
    }
    xhr.open()
    xhr.send()
    lock = false

  })

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

function ajax(opts){
    // todo ...
}
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('出错了')
        }
    })
});

代码

  <input class="username" type="text" name="username" placeholder="请输入用户名">
  <input class="password" type="password" name="password" placeholder="请输入密码">
  <input class="btn" type="submit" name="submit" value="提交">
  <ul class="ct"></ul>

  <script type="text/javascript">
    function ajax(opts) {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var results = JSON.parse(xhr.responseText)
          opts.success(results)
        } else if (xhr.readyState === 4 && xhr.status ===404) {
          opts.error()
        }
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
    }

    var username = document.querySelector('.username')
    var password = document.querySelector('.password')
    var ct = document.querySelector('.ct')
    var btn = document.querySelector('.btn')
    btn.addEventListener('click', function(){
      ajax({
        url: '/login',   //接口地址
        type: 'post',               // 类型， post 或者 get,
        data: {
          username: username.value,
          password: password.value
        },
        restype: 'json',
        success: function(ret){   
          ct.innerText = ret
          console.log(ret);       // {status: 0}
        },
        error: function(){
          console.log('出错了')
        }
      })
    });
  </script>

mock.js

app.get('/login', function(req, res) {
  var username = req.query.username
  var password = req.query.password
  console.log('有请求来了');
  console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
    res.send(friends);
    }else{
    var friends = ['请重新输入']
        res.send(friends);
    }
});
app.post('/login', function(req, res) {
  var username = req.body.username
  var password = req.body.password
  console.log('有请求来了');
    console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
      res.send(friends);
    }else{
      var friends = ['请重新输入']
      res.send(friends);
    }
});

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>加载更多</title>
  <style type="text/css">

    ul,li {
      list-style: none;
      padding: 0;
    }
    li {
     display: block;
     margin: 10px auto;
     border: 1px solid #ccc;
     padding: 5px;
     /*
     width: 600px;
     height: 30px;
     box-sizing: border-box;
     */
    }
    .ct li:hover {
      background-color: green;
      cursor: pointer;
    }
    .btn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      border-radius: 3px;
      font-size: 16px;
      margin: 20px auto;
      display: block;
      outline: none;
    }
    .btn:hover {
      background-color: pink;
      color: green;
    }
  </style>
</head>
<body>
  <ul class="ct"></ul>
  <button class="btn">加载更多</button>

  <script type="text/javascript">
    var ct = $('.ct')
    var btn = $('.btn')
    var lock = true
    var index = 0

    btn.addEventListener('click', function(){
      if (!lock) {
        return
      }
      ajax({
        url: '/loadMore',   //接口地址
        type: 'post',               // 类型， post 或者 get,
        data: {
          index: index,
          length: 5
        },
        restype: 'json',
        success: function(ret){
          var fragment = document.createDocumentFragment()
          for (var i = 0; i < ret.length; i++) {
                var li = document.createElement('li')
                li.innerText = ret[i]
                fragment.appendChild(li)
             }   
          ct.appendChild(fragment)
          index += 5       // {status: 0}
        },
        error: function(){
          console.log('出错了')
        }
        
      })

    });    

    function ajax(opts){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data
          if (opts.restype.toLowerCase() === 'text') {
            data = xhr.responseText
          } else if (opts.restype.toLowerCase() === 'json') {
            data = JSON.parse(xhr.responseText)
          } else if (opts.restype.toLowerCase() === 'xml') {
            data = xhr.responseXML
          }
          opts.success(data)
        }else if(xhr.readyState === 4){
          opts.error(); 
        }
        lock = true
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
      lock = false
    }

    function $(cls){
      return document.querySelector(cls)
    }
  </script>
</body>
</html>

mock数据

app.get('/loadMore',function(req,res) {
  var index = req.query.index
  var length = req.query.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('内容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
    // body...
})

app.post('/loadMore',function(req,res) {
  var index = req.body.index
  var length = req.body.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('内容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
  
    // body...
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • ajax实践
    ajax 是什么？有什么作用？ AJAX的全称是Asynchronous JavaScript and XML（异...
    cross_王阅读 2,635评论 0赞 0
  • js__Ajax__实践
    1： ajax 是什么？有什么作用？ Ajax是Asynchronous JavaScript and XML的缩...
    好奇而已阅读 2,656评论 0赞 0
  • ajax实践
    1. ajax 是什么？有什么作用？ AJAX即Asynchronous Javascript And XML（异...
    _李祺阅读 2,087评论 0赞 0
  • AJAX实践
    1.ajax 是什么？有什么作用？ Asynchronous JavaScript and XML（异步的 Jav...
    clark124阅读 1,677评论 0赞 0
  • ajax实践
    1. ajax 是什么？有什么作用？ Ajax(Asynchronous JavaScript + XML)是一种...
    madpluto阅读 1,163评论 0赞 0