Ajax

1. Ajax

主要包括下面的内容：

• ajax 是什么
• mockjs
• ajax 的使用

ajax 是什么

ajax 翻译成中文叫做“异步无刷新”技术。

它是在 1999 年的时候由微软推出的一项技术。允许浏览器里面可以使用一个叫做XMLHttpRequest的对象来发送http请求。

最早的时候，大家并没有重视这一门技术，到了2005年的时候，Google推出了一个叫做Gmail的邮箱，以及还推出了 google map 服务，

由于良好的用户体验，所以 ajax 这门技术一下子就火了。

ajax 中 a 这个字母，代表的英语单词是 asynchronous，翻译成中文就是异步的意思。

j 这个字母代表的是 JavaScript，第二个a代表是 and，x代表的是 xml。

也就是说整个ajax，对应的英语是 asynchronous javascript and xml，如果直译的话，是“异步的JavaScript和 xml”。

ajax 其实不是一门全新的技术，而是一门当时早就已经存在的一系列技术的整合。里面涉及到了 html、css、js、dom 技术、XMLHttpRequest对象等。

ajax 实现的一个步骤：

1. 创建 XMLHttpRequest 对象（xhr）
2. 派xhr去服务器拿东西
3. xhr回来了，从服务器拿回来了东西
4. 更新网页

mockjs

因为现在还没有学习 nodejs，所以我们使用mockjs来拦截 ajax请求，并且返回随机生成的数据。

mock的基本用法如下：

下面的代码能够生成一组随机的数据

// 在配置对象 options object 里面进行配置
// 配置你要生成什么数据
let data = Mock.mock({
  'list|5' : [{
    'id|+1' : 1, // id 从1开始自增
    'name' : '@cname()', // 随机生成一个中文名
    'addr' : '@county(true)', // 随机生成一个国内的地址
    'age|18-30' : 1, // 生成一个年龄，年龄的取值范围 18-30
    'birth' : '@date', // 生成一个随机日期
    'gender': /[男女]/, // 性别
    'email' : '@email', // 生成一个邮箱
    'hobby|1' : ['玩游戏','看电影','睡觉'],
    'time' : '@date("yyyy-MM-dd")',
    'telephone' : /^1[3-9]\d{9}$/
  }]
});
console.log(data);

ajax 的使用

接下来我们就按照上面的步骤来一步一步使用 ajax。

1. 第一步，创建 xhr

   let xhr; // 这个变量拿来装 xhr 对象
   if(window.XMLHttpRequest){
     // firefox，chrome，opera，safari 等这些浏览器
     xhr = new XMLHttpRequest();
   } else {
     // 说明是 IE6，IE5 及其以下版本
     xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }
   

2. 我们要让 xhr 帮我们跑腿了，其实就是发送请求到服务器

首先需要调用 xhr 的 open 方法，建立客户端与服务器之间的连接：

xhr.open(method,url,async)

接下来就是调用xhr的send方法，这个方法就是实际的向服务器发送请求了。

这里需要注意，get 和 post 在调用open和send方法时，书写上有略微的区别。

get方式

xhr.open("GET","/users/isUser?name=xiejie&age=18",true);
xhr.send(null);

post方式

xhr.open("POST","/users/isUser",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencodeed;charset=UTF-8");
xhr.send("name=xiejie&age=18");

3. 当我们发送了请求之后，从请求发送到响应回来，其实有一系列的状态值

   请求未初始化（0）：还没有调用 send 方法的时候

   服务器建立连接（1）：已经调用 send 方法，正在发送请求

   请求已接收（2）：send 执行完成

   请求处理中（3）：正在解析响应内容

   请求已完成（4）：响应内容解析完毕，可以在客户端使用了

一般来讲，我们只需要关心最后一个值为 4 的状态，当状态值为 4 的时候，我们就可以将取回来的数据做出一定的操作。

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    // 做出具体的操作
  }
}

完整的代码如下：

// 使用 mock 来拦截请求
Mock.mock(/users/, function () {
  return Mock.mock({
    'list|5': [{
      'id|+1': 1, // id 从1开始自增
      'name': '@cname()', // 随机生成一个中文名
      'addr': '@county(true)', // 随机生成一个国内的地址
      'age|18-30': 1, // 生成一个年龄，年龄的取值范围 18-30
      'birth': '@date', // 生成一个随机日期
      'gender': /[男女]/, // 性别
      'email': '@email', // 生成一个邮箱
      'hobby|1': ['玩游戏', '看电影', '睡觉'],
      'time': '@date("yyyy-MM-dd")',
      'telephone': /^1[3-9]\d{9}$/
    }]
  })
})
btn.onclick = function () {
  // 1. 创建 xhr 对象
  let xhr; // 这个变量拿来装 xhr 对象
  if (window.XMLHttpRequest) {
    // firefox，chrome，opera，safari 等这些浏览器
    xhr = new XMLHttpRequest();
  } else {
    // 说明是 IE6，IE5 及其以下版本
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  // 2. 发送请求
  xhr.open("GET", "/users", true);
  xhr.send(null);

  // 3. 监听xhr回来没有
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // console.log(111)
      console.log(JSON.parse(xhr.responseText));
    }
  }
}