Ajax

  ajax属于前后端半分离开发技术.
  ajax异步无刷新技术，是基于单页应用的出现ajax技术才普及大众化，

是1999年微软推出的一种可以用xmlhttprequest对象来发送http请求
在使用Ajax请求的时候需要通过一下四个步骤

1. 创建xmlhtttprequest（小黄人）对象
2. 派遣xmlhttprequest对象去服务器拿数据
3. xmlhttprequest拿到数据返回客户端
4. 更新页面

在初步刚学习ajax时候因为后台不存在所以无法排遣xmlhttprequest去后台拿到数据为了能够调试数据就会需要虚拟的数据，这时候mockjs就出现了mockjs会生成一组随机的数据供开发人员使用，用于数据的调试
mockjs代码如下

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的使用
5. 创建xmlhttprequest

let xhr; // 这个变量拿来装 xhr 对象
if(window.XMLHttpRequest){//如果全局存在xmlhttprequest这个对象
  // firefox，chrome，opera，safari 等这些浏览器
  xhr = new XMLHttpRequest();//创建一个小黄人对象
} else {
  // 说明是 IE6，IE5 及其以下版本
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2.利用xmlhttprequest发送请求请求后台的数据

xhr.open(method,url,async)//open方法是用于建立后台数据库的连接

然后就使用send方法实际向服务器发送请求

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

当我们发送请求结束之后会返回一系列的状态值
请求未初始化（0）：还没有调用 send 方法的时候

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

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

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

请求已完成（4）：响应内容解析完毕，可以在客户端使用了
当返回的状态为4时候我们就可以对 请求回来的数据做出一系列的处理
具体代码如下

// 使用 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));
    }
  }
}