ajax屬於前後端半分離開發技術.
  ajax非同步無刷新技術，是基於單頁應用的出現ajax技術才普及大眾化，

是1999年微軟推出的一種可以用xmlhttprequest物件來發送http請求
在使用Ajax請求的時候需要通過一下四個步驟

1. 建立xmlhtttprequest（小黃人）物件
2. 派遣xmlhttprequest物件去伺服器拿資料
3. xmlhttprequest拿到資料返回客戶端
4. 更新頁面

在初步剛學習ajax時候因為後臺不存在所以無法排遣xmlhttprequest去後臺拿到資料為了能夠除錯資料就會需要虛擬的資料，這時候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));
    }
  }
}