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('出错了')
        }
    })
});

代码

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来模拟数据

  
  
  


  

  加载更多

  

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...
})