美文网首页
进阶12 ajax实践

进阶12 ajax实践

作者: 晓风残月1994 | 来源:发表于2017-09-15 01:16 被阅读44次

1. ajax 是什么?有什么作用?

Ajax(['eidʒæks])是Asynchronous JavaScript and XML的缩写,从标题里就能看出,是异步的JS和XML,这一技术能够向服务器请求额外的数据而无需卸载整个页面,会带来良好的用户体验。因为传统的HTTP 请求流程大概如下:

  1. 浏览器向服务器发送请求
  2. 服务器根据浏览器传来数据生成response
  3. 服务器把response返回给浏览器
  4. 浏览器刷新整个页面显示最新数据

这个过程是同步的,顺序执行。如果网络传输速率过慢或者其他情况导致,用户长时间等待请求结果,而浏览器是卡死状态,那么体验就很糟糕。

另外如果当前页面DOM结构特别复杂,内容繁多,而需要请求的仅仅是一小段数据,却要大费周章,数据到来后总是要重新渲染页面。

而使用AJAX技术,通过JavaScript操作浏览器提供的XMLHttpRequest 对象,去发送一个Ajax请求,并接收服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

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

  • 前后端联调时需要沟通定义接口:

  1. 约定好请求方法
  2. 请求路径(URL)
  3. 前端需要传递什么样的参数(入参)
  4. 数据格式(回参,包括可能的状态码)
  • mock数据:

在后端接口完成之前,前端通过mock数据,能够在不依赖后端环境的情况下进行开发,只要约定好接口。

常用的手段就是搭建本地mock server,如果装了nodejs,就可以用npm 下载安装了,然后只需要在本地的mock server中实现请求路由映射即可,如果使用js语言,也就是 router.js,可以按照约定在里面模拟假数据,以相应前端浏览器的请求。

除此之外,还可以使用线上的模拟数据生成服务,比如Easy Mock:
http://www.easy-mock.com 注册 打开任意一个项目 创建接口 使用接口(AJAX、JSONP都行,具体看文档)
xhr.open('get', 'http://www.easy-mock.com/mock/59b95cf3e0dc663341a8fa20/example/loadMore', true)

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

首先这样做的目的,是因为在真实的网络环境中,传输速率必然是没有用户鼠标双击按钮更快,在当前请求未到来之前,用户的习惯总爱再次点击按钮,这会导致浏览器重复发送请求,结果对于用户来说,占用更多带宽资源还好说,如果是网购付款按钮呢,另外对于服务器端来说,也会带来更大的运行压力。

一个典型的例子就是上大学的时候,到了选修课端口开放的时候,大家齐刷刷早起守着电脑,不停的刷新,结果平时很流畅的教务网站,到了选(抢)课的时候,变得异常卡顿,F5都磨烂了,也刷新不出来。其实这个时候服务器内心是崩溃的。

回到正题,阻止用户重复点击,一个简单的做法是,令用户的点击变得无效, 使用状态锁,请求未处理完成之前,拒绝再次请求,而请求到了并处理完之后,恢复到可请求状态。

具体的代码演示,在下文中,将会提到。

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

本地模拟成功:


代码地址,注意!想要看到效果,需要把 index.html 和 router.js 分别保存在同一个文件夹下,然后终端里使用server mock 开启mock。

5. 对AJAX进行封装,这是必须的(以get为例)

var btn = document.querySelector('#load-more')
    var ct = document.querySelector('#ct')
    var pageIndex = 0
    var isDataArrive = true //设计个状态锁

    btn.addEventListener('click', function(e){
      e.preventDefault() //防止点击 a 链接页面跳到顶部 或者href里 javascript:void(0)
      if(!isDataArrive){ // 1. 点击按钮后,一开始先判断,如果状态是false,数据还没到来,就直接忽略
        return;
      }
      loadData(function(news){  //loadData(renderPage) // 执行loadData时,数据到了,执行callback,也就是传入的函数 renderPage
        renderPage(news)
        pageIndex += 5
        isDataArrive = true
      })
      isDataArrive = false
    })

    function loadData(callback){
      ajax({
        type: 'get',
        url: 'loadMore',
        data: {
          index: pageIndex,
          length: 5 
        },
        onSuccess: callback,
        onError: function(){
          console.log('error')
        }
      })
    }

    function renderPage(news){
      var fragment = document.createDocumentFragment() 
      for( var i = 0; i < news.length; i++){
        var node = document.createElement('li')
        node.innerText = news[i]
        fragment.appendChild(node)
      }
      ct.appendChild(fragment)
    }

    function ajax(options){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200 || xhr.status === 304){
            var results = JSON.parse(xhr.responseText) 
            options.onSuccess(results) //相当于callback(results)
          }else{
          options.onError()
          }
        }
      }
      var query = '?'
      for(key in options.data){
        query += key + '=' + options.data[key] + '&'
      }
      query = query.substr(0, query.length-1) //舍去最后一个&,截取出来
      xhr.open(options.type, options.url + query, true)
      xhr.send()
    }

相关文章

  • 进阶12 ajax实践

    1. ajax 是什么?有什么作用? Ajax(['eidʒæks])是Asynchronous JavaScri...

  • 进阶12 ajax实践

    题目1:ajax 是什么?有什么作用? AJAX是Asynchronous Javascript and XML(...

  • 进阶12 ajax实践

    使用server-mock 1.安装nodejs2.打开gitbash,执行npm install -g serv...

  • 进阶12 ajax实践

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

  • 进阶12:ajax实践

    题目1: ajax 是什么?有什么作用? 1.ajax是什么?Ajax全称为"Asynchronous JavaS...

  • ajax实践(进阶12)

    题目1: ajax 是什么?有什么作用? ajax(Asynchronous JavaScript and XML...

  • 进阶任务12:ajax实践

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

  • 进阶12-ajax实践

    题目1: ajax 是什么?有什么作用?AJAX即“Asynchronous Javascript And XML...

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

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

  • 进阶12 ajax

    题目1: ajax 是什么?有什么作用? ajax(Asynchronous Javascript +XML)是异...

网友评论

      本文标题:进阶12 ajax实践

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