进阶-任务12

题目1：ajax 是什么？有什么作用？

• AJAX代表异步JavaScript和XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。
• 向服务器发出请求，而不重新加载页面；接收和处理服务器中的数据

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

接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
接口传什么？数据类型确定，数据大小等限制的确定。
接口的相关参数： 服务器？端口？方法？请求数据的一些限制？
按照上述确认后的版本严格执行

• 前端可以在本地模拟服务器环境，mock数据请求的响应

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

• 在表单submit按钮点击后，把按钮disabled
• 使用外部变量锁定，用户提交请求后将flag由true变为false，当响应成功后把flag变回true
• 可以多次提交请求，但是以最后一次操作为准，即尽快返回最后一次请求的响应，前面的请求abort()掉
• 设置时间间隔，使任意两次有效提交的间隔时间大于等于它

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

function ajax(opts){
          var httpRequest = new XMLHttpRequest()
          httpRequest.onreadystatechange = alertContents
          function alertContents() {
            if(httpRequest.readyState === XMLHttpRequest.DONE) {
              if(httpRequest.status === 200) {
                var response = JSON.parse(httpRequest.responseText)
                opts.success(response)
              } else {
                opts.error()
              }
            }
          }
          var query = ''
          for(var key in opts.data) {
            query += key + '=' + opts.data[key] + '&'
          }
          query = query.substr(0, query.length-1)
          if(opts.type.toLowerCase() === 'get') {
            httpRequest.open(opts.type, opts.url+'?'+query, true)
            httpRequest.send()
          }
          if(opts.type.toLowerCase() === 'post') {
            httpRequest.open(opts.type, opts.url, true)
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            httpRequest.send(query)
          }
        }

work_ajax.png

题目5：

var btn = document.getElementById('load-more')
        var ct = document.getElementById('ct')
        var start = 6
        var len = 5
        var isDataArrive = true
        btn.addEventListener('click',function(e) {
          e.preventDefault()
          if(!isDataArrive) {
            return
          }
          ajax({
            url: '/load',
            type: 'get',
            data: {
              curIdx: start,
              length: len
            },
            success: function(res){
              var data = res.data
              console.log(data)
              render(data)
              isDataArrive = true
              //btn.classList.remove('loading')
            },
            error: function(res) {
              console.log(res.status)
            }
          })
          isDataArrive = false
          //btn.classList.add('loading')
        })

        function render(data) {
          var fragment = document.createDocumentFragment()
          var text = ''
          for(var i=0;i<data.length;i++) {
            var li = document.createElement('li')
            li.innerText = '列表'+data[i]
            fragment.appendChild(li)
          }
          ct.appendChild(fragment)
          start += len
        }

        function ajax(opts){
          var httpRequest = new XMLHttpRequest()
          httpRequest.onreadystatechange = alertContents
          function alertContents() {
            if(httpRequest.readyState === XMLHttpRequest.DONE) {
              if(httpRequest.status === 200) {
                var response = JSON.parse(httpRequest.responseText)
                opts.success(response)
              } else {
                opts.error(response)
              }
            }
          }
          var query = ''
          for(var key in opts.data) {
            query += key + '=' + opts.data[key] + '&'
          }
          query = query.substr(0, query.length-1)
          if(opts.type.toLowerCase() === 'get') {
            httpRequest.open(opts.type, opts.url+'?'+query, true)
            httpRequest.send()
          }
          if(opts.type.toLowerCase() === 'post') {
            httpRequest.open(opts.type, opts.url, true)
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            httpRequest.send(query)
          }
        }

//router.js
/*
* url: '/load'
* reqPara: {start:1, len:5}
* resPara: {status:1, data:[1,2,3,4,5]}
*/
app.get('/load', function(req, res) {
    //req.query可以获取请求参数
    var curIdx = req.query.curIdx
    var len = req.query.length
    var data = []
    for(var i=0;i<len;i++) {
        data.push((parseInt(curIdx)+i))
    }
    res.send({
        status: 1,
        data: data
    })
})

ajax9.png