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

      你可能感兴趣的:(ajax实践)