美文网首页
进阶-任务12

进阶-任务12

作者: nicole914 | 来源:发表于2017-03-22 20:05 被阅读0次

题目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

相关文章

  • 进阶任务-12

    ajax 是什么?有什么作用? 1. 什么是ajax AJAX 的全称为 Asynchronous JavaScr...

  • 进阶-任务12

    题目1:ajax 是什么?有什么作用? AJAX代表异步JavaScript和XML。简而言之,它是使用 XMLH...

  • 进阶任务12 ajax

    题目1: ajax 是什么?有什么作用?异步JavaScript和XML ,Asynchronous JavaSc...

  • 进阶任务12(主线任务):ajax实践

    题目1: ajax 是什么?有什么作用? ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HT...

  • 进阶任务12-AJAX

    题目1: ajax 是什么?有什么作用? AJAX(Asynchronous JavaScript + XML),...

  • 进阶任务12:ajax实践

    题目1: ajax 是什么?有什么作用? ajax = ` 异步 JavaScript和HTMlajax 是一种...

  • Swift多线程:GCD进阶,单例、信号量、任务组

    Swift多线程:GCD进阶,单例、信号量、任务组 Swift多线程:GCD进阶,单例、信号量、任务组

  • 12-Python之路-进阶-多任务

    多任务:线程 多任务:简介 操作系统可以同时运行多个任务。操作系统轮流让各个任务交替执行,实现的多任务效果 并发:...

  • 进阶-任务2

    1、JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么? ...

  • 进阶-任务2

    1、JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么? ...

网友评论

      本文标题:进阶-任务12

      本文链接:https://www.haomeiwen.com/subject/mvzwnttx.html