Ajax、server-mock的使用

2017-09-01 本文已影响0人 _Dot912

ajax 是什么？有什么作用？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），
是一种技术的泛称，可以在不重新加载整个网页的情况下向服务器请求额外的数据，实现对网页的某部分进行更新，带来良好的用户体验。

AJAX和XMLHttpRequest的关系：
我们使用XMLHttpRequest对象来发送一个Ajax请求。

传统HTTP请求流程大概如下：

浏览器向服务器发起请求
服务器根据浏览器传递的数据生成responsive
服务器将responsive返回给浏览器
浏览器刷新整个页面显示最新数据

这些过程是同步的，会顺序执行。
AJAX在浏览器与web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据，这里的异步指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下通过JavaScript发送请求、接收服务器传来的数据，操作DOM将更新某部分网页的数据，使用AJAX对用户来说最直观的感受是获取新数据无需刷新页面。

AJAX优缺点

优点：
- 更新数据页面无需刷新，用户体验更佳
- 使用异步方式与服务器通信，响应速度更快
- 可将服务器以前负担的一些工作转嫁到客户端，利用客户端的闲置能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。AJAX的原则是“按需取数据”，可最大程度减少冗余请求
- 作为基于标准化的并被广泛支持的技术，无需下载插件或小程序
- 使因特网应用程序更小、更快、更友好
缺点：
- 不支持浏览器back按钮
- AJAX暴露了与服务器交互的细节带来安全问题
- 对搜索引擎的支持较弱
- 破坏了程序的异常机制
- 不容易调试

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

在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）

前后端开发联调注意事项：
- URL：接口名称
- 发送请求的参数和格式(get/post)
- 数据响应的数据格式(数组/对象)
- 根据前后端约定，整理接口文档
如何mock数据
- 搭建web服务器
- 根据接口文档仿造假数据
- 关联前后端文件，开启web服务器
- 验证前端页面功能及显示是否正确

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

初始时上锁，请求开始时解锁，请求结束时继续上锁，注意代码的执行顺序与书写顺序并不一致，涉及到异步的代码总是后执行，比如下列代码中，ajax部分会先执行open和send和lock=false，后执行onload和onerror

//添加一个状态锁，初始为true，上锁为true，解锁为false
var lock = true
btn.addEventListener('click', function () {
    //状态为false时直接return
    if (!lock) {
        return
    }
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onload = function () {
        //状态正确时拿到结果，此次请求结束，上锁
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.responseText)
        } else {
            console.log('error')
        }
            lock = true
    }
    xhr.onerror = function () {
        console.log('error')
    }
    xhr.send()
    //解锁，这时候请求开始
    lock = false
})

封装ajax

function ajax() {
  var url = opts.url
  var data = opts.data || {}
  var type = opts.type || 'GET'
  var dataType = opts.dataType || 'json'
  var onsuccess = opts.onsuccess || function () { }
  var onerror = opts.onerror || function () { }

  var dataStr = []
  for (var key in data) {
    dataStr.push(key + '=' + data[key])
  }
  dataStr = dataStr.join('&')

  if (type === 'GET') {
    url += '?' + dataStr
  }//get方法将字符串放在url末尾

  var xhr = new XMLHttpRequest()
  xhr.open(type, url, true)
  xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      if (dataType === 'json') {
        onsuccess(JSON.parse(xhr.responseText))
      } else {
        onsuccess(xhr.responseText)
      }
    } else {
      onerror()
    }
  }
  xhr.onerror = onerror

  if (type === 'POST') {
    xhr.send(dataStr)//post方法将字符串放在send中
  } else {
    xhr.send()//get的send内容
  }
}

ajax({
  url: 'http://api.jirengu.com/weather.php',
  data: {
    city: '北京'
  },
  onsuccess: function (ret) {
    console.log(ret)
  },
  onerror: function () {
    console.log('服务器异常')
  }
})

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

参考资料