前后端數(shù)據(jù)交互與HTTP協(xié)議
===================================前后端通信====================================
1、前后端通信是什么
前端和后端數(shù)據(jù)交互的過程
瀏覽器和服務器之間數(shù)據(jù)交
2跋涣、前后端通信的過程
前后端的通信是在‘請求-響應’中完成的
3、概念解釋
前端：瀏覽器端
客戶端：只要能和服務器通信的就叫 客戶端
后端：服務器端
4搔弄、使用瀏覽器訪問網(wǎng)頁
在瀏覽器地址欄輸入網(wǎng)址，按下回車
5丰滑、HTML 的標簽
瀏覽器在解析 HTML 標簽的時候顾犹，遇到一些特殊的標簽，會再次向服務器發(fā)送請求
link/img/script/iframe
6吨枉、還有一些標簽蹦渣，瀏覽器解析的時候，不會向服務器發(fā)送請求貌亭，但是用戶可以使用他們向服務器發(fā)送請求
a/form
7柬唯、Ajax 和 Fetch

===============================初識HTTP=======================================

1、HTTP 是什么
HyperText Transfer Protocol
超文本傳輸協(xié)議
HTML：超文本標記語言
超文本：原先一個個單一的文本圃庭，通過超鏈接將其聯(lián)系起來锄奢。由原先的單一的文本變成了可無限延伸、擴展的超級文本剧腻、立體文本
HTML拘央、JS、CSS书在、圖片灰伟、字體、音頻儒旬、視頻等等文件栏账，都是通過 HTTP（超文本傳輸協(xié)議） 在服務器和瀏覽器之間傳輸
每一次前后端通信，前端需要主動向后端發(fā)出請求栈源，后端接收到前端的請求后挡爵，可以給出響應
HTTP 是一個請求-

2氧敢、HTTP 報文是什么
瀏覽器向服務器發(fā)送請求時罩锐，請求本身就是信息灸促，叫請求報文
服務器向瀏覽器發(fā)送響應時傳輸?shù)男畔⑻谖眩许憫獔笪?/p>

3、HTTP 報文格式
請求
請求頭：起始行+首部
請求體
GET 請求炒事，沒有請求體方咆，數(shù)據(jù)通過請求頭攜帶
POST 請求浸船，有請求體迄埃，數(shù)據(jù)通過請求體攜帶
響應
響應頭：起始行+首部
響應體
4男杈、常用的 HTTP 方法
瀏覽器發(fā)送請求時采用的方法，和響應無關

  GET调俘、POST伶棒、PUT、DELETE

  用來定義對于資源采取什么樣的操作的彩库，有各自的語義

5肤无、HTTP 方法的語義
GET 獲取數(shù)據(jù)
獲取資源（文件）

  POST 創(chuàng)建數(shù)據(jù)
  注冊

  PUT 更新數(shù)據(jù)
  修改個人信息，修改密碼

  DELETE 刪除數(shù)據(jù)
  刪除一條評論

  增刪改查

  這些方法雖然有各自的語義骇钦，但是并不是強制性的

6宛渐、RESTful 接口設計
一種接口設計風格，充分利用 HTTP 方法的語義

  通過用戶 ID 獲取個人信息眯搭，使用 GET 方法
  https://www.imooc.com/api/http/getUser?id=1

  GET
  https://www.imooc.com/api/http/user?id=1

  注冊新用戶窥翩，使用 POST 方法
  https://www.imooc.com/api/http/addUser

  POST
  https://www.imooc.com/api/http/user

  修改一個用戶，使用 POST 方法
  https://www.imooc.com/api/http/modifyUser

  PUT
  https://www.imooc.com/api/http/user

  刪除一個用戶鳞仙，使用 POST 方法
  https://www.imooc.com/api/http/deleteUser

  DELETE
  https://www.imooc.com/api/http/user

7寇蚊、GET和POS
語義
GET：獲取數(shù)據(jù)
POST：創(chuàng)建數(shù)據(jù)

8、發(fā)送數(shù)據(jù)
GET 通過地址在請求頭中攜帶數(shù)據(jù)
能攜帶的數(shù)據(jù)量和地址的長度有關系棍好，一般最多就幾K

  POST 既可以通過地址在請求頭中攜帶數(shù)據(jù)仗岸，也可以通過請求體攜帶數(shù)據(jù)
  能攜帶的數(shù)據(jù)量理論上是無限的

  攜帶少量數(shù)據(jù)，可以使用 GET 請求借笙，大量的數(shù)據(jù)可以使用 POST 請求

9扒怖、緩存
GET 可以被緩存，POST 不會被緩存

10业稼、安全性
GET 和 POST 都不安全

  發(fā)送密碼或其他敏感信息時不要使用 GET盗痒，主要是避免直接被他人窺屏或通過歷史記錄找到你的密碼

11、HTTP 狀態(tài)碼是什么
定義服務器對請求的處理結果低散，是服務器返回的

12俯邓、HTTP 狀態(tài)碼的語義
100~199 消息：代表請求已被接受，需要繼續(xù)處理
websocket

  200~299 成功
  200

  300~399 重定向
  http://www.imooc.com/
  https://www.imooc.com/

  301 Moved Permanently
  302 Move Temporarily
  304 Not Modifie

  400~499 請求錯誤
  404 Not Found

  500~599 服務器錯誤
  500 Internal Server Error

===============================本地存儲=================================
1谦纱、Cookie 是什么
Cookie 全稱 HTTP Cookie看成，簡稱 Cookie
是瀏覽器存儲數(shù)據(jù)的一種方式
因為存儲在用戶本地，而不是存儲在服務器上跨嘉，是本地存儲
一般會自動隨著瀏覽器每次請求發(fā)送到服務器端

2川慌、Cookie 有什么用
利用 Cookie 跟蹤統(tǒng)計用戶訪問該網(wǎng)站的習慣，比如什么時間訪問祠乃，訪問了哪些頁面梦重，在每個網(wǎng)頁的停留時間等

3、在瀏覽器中操作 Cookie
不要在 Cookie 中保存密碼等敏感信息

4亮瓷、寫入 Cookie
document.cookie = 'username=zs';
document.cookie = 'age=18';
不能一起設置琴拧，只能一個一個設置
document.cookie = 'username=zs; age=18';

5、讀取 Cookie
console.log(document.cookie);
讀取的是一個由名值對構成的字符串嘱支，每個名值對之間由“; ”（一個分號和一個空格）隔開
username=zs; age=18
6蚓胸、Cookie 的名稱（Name）和值（Value）
最重要的兩個屬性挣饥，創(chuàng)建 Cookie 時必須填寫，其它屬性可以使用默認值

  Cookie 的名稱或值如果包含非英文字母沛膳，則寫入時需要使用 encodeURIComponent() 編碼扔枫，讀取時使用 decodeURIComponent() 解碼
  document.cookie = 'username=alex';

  document.cookie = `username=${encodeURIComponent('張三')}`;
  document.cookie = `${encodeURIComponent('用戶名')}=${encodeURIComponent(
    '張三'
  )}`;

  一般名稱使用英文字母，不要用中文锹安，值可以用中文短荐，但是要編碼

7、失效（到期）時間
對于失效的 Cookie叹哭，會被瀏覽器清除
如果沒有設置失效（到期）時間忍宋，這樣的 Cookie 稱為會話 Cookie
它存在內存中，當會話結束风罩，也就是瀏覽器關閉時糠排，Cookie 消失

  document.cookie = 'username=alex';

  想長時間存在，設置 Expires 或 Max-Age
  expires
  值為 Date 類型
  document.cookie = `username=alex; expires=${new Date(
    '2100-1-01 00:00:00'
  )}`;

  max-age
  值為數(shù)字泊交，表示當前時間 + 多少秒后過期乳讥，單位是秒
  document.cookie = 'username=alex; max-age=5';
  document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;

  如果 max-age 的值是 0 或負數(shù)，則 Cookie 會被刪除
  document.cookie = 'username=alex';
  document.cookie = 'username=alex; max-age=0';
  document.cookie = 'username=alex; max-age=-1';

8廓俭、Domain 域
Domain 限定了訪問 Cookie 的范圍（不同域名）

  使用 JS 只能讀寫當前域或父域的 Cookie云石，無法讀寫其他域的 Cookie
  document.cookie = 'username=alex; domain=www.imooc.com';
  www.imooc.com m.imooc.com 當前域
  父域：.imooc.com

9、Path 路徑
Path 限定了訪問 Cookie 的范圍（同一個域名下）

  使用 JS 只能讀寫當前路徑和上級路徑的 Cookie研乒，無法讀寫下級路徑的 Cookie
  document.cookie = 'username=alex; path=/course/list';
  document.cookie = 'username=alex; path=/1.Cookie/';
  當 Name汹忠、Domain、Path 這 3 個字段都相同的時候雹熬，才是同一個 Cookie

6宽菜、HttpOnly
設置了 HttpOnly 屬性的 Cookie 不能通過 JS 去訪問

7、Secure 安全標志
Secure 限定了只有在使用了 https 而不是 http 的情況下才可以發(fā)送給服務端
Domain竿报、Path铅乡、Secure 都要滿足條件，還不能過期的 Cookie 才能隨著請求發(fā)送到服務器端
8烈菌、cookie的封裝

// 寫入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

  if (typeof maxAge === 'number') {
    cookieText += `; max-age=${maxAge}`;
  }

  if (domain) {
    cookieText += `; domain=${domain}`;
  }

  if (path) {
    cookieText += `; path=${path}`;
  }

  if (secure) {
    cookieText += `; secure`;
  }

  document.cookie = cookieText;

  // document.cookie='username=alex; max-age=5; domain='
};

// 通過 name 獲取 cookie 的值
const get = name => {
  name = `${encodeURIComponent(name)}`;

  const cookies = document.cookie.split('; ');

  for (const item of cookies) {
    const [cookieName, cookieValue] = item.split('=');

    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }

  return;
};

// 'username=alex; age=18; sex=male'
// ["username=alex", "age=18", "sex=male"]
// ["username","alex"]

// get('用戶名');

// 根據(jù) name阵幸、domain 和 path 刪除 Cookie
const remove = (name, { domain, path } = {}) => {
  set(name, '', { domain, path, maxAge: -1 });
};

export { set, get, remove };

10、cookie的注意事項
1).前后端都可以創(chuàng)建 Cookie

2).Cookie 有數(shù)量限制
  每個域名下的 Cookie 數(shù)量有限
  當超過單個域名限制之后芽世，再設置 Cookie挚赊，瀏覽器就會清除以前設置的 Cookie

3).Cookie 有大小限制
  每個 Cookie 的存儲容量很小，最多只有 4KB 左右

11济瓢、localStorage 是什么
localStorage 也是一種瀏覽器存儲數(shù)據(jù)的方式（本地存儲）荠割，它只是存儲在本地，不會發(fā)送到服務器端
單個域名下的 localStorage 總大小有限制

12旺矾、在瀏覽器中操作 localStorage

13蔑鹦、localStorage 的基本用法
console.log(localStorage);

  // setItem()
  localStorage.setItem('username', 'alex');
  localStorage.setItem('username', 'zs');
  localStorage.setItem('age', 18);
  localStorage.setItem('sex', 'male');

  // length
  // console.log(localStorage.length);

  // getItem()
  // console.log(localStorage.getItem('username'));
  // console.log(localStorage.getItem('age'));

  // // 獲取不存在的返回 null
  // console.log(localStorage.getItem('name'));

  // removeItem()
  // localStorage.removeItem('username');
  // localStorage.removeItem('age');

  // // 刪除不存在的 key夺克，不報錯
  // localStorage.removeItem('name');

  // clear()
  localStorage.clear();

  console.log(localStorage);

14、 localStorage 的注意事項
1）举反、localStorage 的存儲期限
localStorage 是持久化的本地存儲懊直，除非手動清除（比如通過 js 刪除，或者清除瀏覽器緩存）火鼻，否則數(shù)據(jù)是永遠不會過期的

  sessionStorage
  當會話結束（比如關閉瀏覽器）的時候，sessionStorage 中的數(shù)據(jù)會被清空
  sessionStorage.setItem('username', 'alex');
  sessionStorage.getItem('username');
  sessionStorage.removeItem('username');
  sessionStorage.clear();

2）雕崩、localStorage 鍵和值的類型
localStorage 存儲的鍵和值只能是字符串類型
不是字符串類型魁索，也會先轉化成字符串類型再存進去

  localStorage.setItem({}, 18);
  // localStorage.setItem('students', [{},{}]);
  console.log(
    typeof localStorage.getItem('[object Object]'),
    localStorage.getItem('[object Object]')
  );

  console.log({}.toString());

3）、不同域名下能否共用 localStorage
不同的域名是不能共用 localStorage 的

4）盼铁、localStorage 的兼容性
IE7及以下版本不支持 localStorage粗蔚，IE8 開始支持

====================================Ajax和Fetch基礎=============================
1、Ajax 是什么
Ajax 是 Asynchronous JavaScript and XML（異步 JavaScript 和 XML）的簡寫
Ajax 中的異步：可以異步地向服務器發(fā)送請求饶火，在等待響應的過程中鹏控，不會阻塞當前頁面，瀏覽器可以做自己的事情肤寝。直到成功獲取響應后当辐，瀏覽器才開始處理響應數(shù)據(jù)
XML（可擴展標記語言）是前后端數(shù)據(jù)通信時傳輸數(shù)據(jù)的一種格式
XML 現(xiàn)在已經(jīng)不怎么用了，現(xiàn)在比較常用的是 JSON
Ajax 其實就是瀏覽器與服務器之間的一種異步通信方式
使用 Ajax 可以在不重新加載整個頁面的情況下鲤看，對頁面的某部分進行更新
① 慕課網(wǎng)注冊檢測
② 慕課網(wǎng)搜索提示
2缘揪、搭建 Ajax 開發(fā)環(huán)境
Ajax 需要服務器環(huán)境，非服務器環(huán)境下义桂，很多瀏覽器無法正常使用 Ajax
Live Server
windows phpStudy
Mac MAMP
3找筝、Ajax 的使用步驟
1）創(chuàng)建 xhr 對象
2）監(jiān)聽事件，處理響應
3）準備發(fā)送請求
4）發(fā)送請求

4慷吊、使用 Ajax 完成前后端通信

     const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4) return;

       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
         console.log(xhr.responseText);
         console.log(typeof xhr.responseText);
       }
     };
     xhr.open('GET', url, true);  
     xhr.send(null);

5袖裕、Get請求
1）、攜帶數(shù)據(jù)
GET 請求不能通過請求體攜帶數(shù)據(jù)溉瓶，但可以通過請求頭攜帶
const url = 'https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18';
2）急鳄、數(shù)據(jù)編碼
如果攜帶的數(shù)據(jù)是非英文字母的話，比如說漢字嚷闭，就需要編碼之后再發(fā)送給后端攒岛，不然會造成亂碼問題
可以使用 encodeURIComponent() 編碼
6、POST請求
1）攜帶數(shù)據(jù)
2）POST 請求主要通過請求體攜帶數(shù)據(jù)胞锰，同時也可以通過請求頭攜帶
如果想發(fā)送數(shù)據(jù)灾锯，直接寫在 send() 的參數(shù)位置，一般是字符串
不能直接傳遞對象嗅榕，需要先將對象轉換成字符串的形式
3）數(shù)據(jù)編碼
xhr.send(username=${encodeURIComponent('張三')}&age=18);
7顺饮、 JSON 是什么
Ajax 發(fā)送和接收數(shù)據(jù)的一種格式
8吵聪、為什么需要 JSON
JSON 有 3 種形式，每種形式的寫法都和 JS 中的數(shù)據(jù)類型很像兼雄，可以很輕松的和 JS 中的數(shù)據(jù)類型互相轉換
9吟逝、JSON 的 3 種形式
1）簡單值形式
.json

  JSON 的簡單值形式就對應著 JS 中的基礎數(shù)據(jù)類型
  數(shù)字、字符串赦肋、布爾值块攒、null

  注意事項
  ① JSON 中沒有 undefined 值
  ② JSON 中的字符串必須使用雙引號
  ③ JSON 中是不能注釋的

2）對象形式
  JSON 的對象形式就對應著 JS 中的對象

  注意事項
  JSON 中對象的屬性名必須用雙引號，屬性值如果是字符串也必須用雙引號
  JSON 中只要涉及到字符串佃乘，就必須使用雙引號
  不支持 undefined

3）數(shù)組形式
  JSON 的數(shù)組形式就對應著 JS 中的數(shù)組
  [1, "hi", null]
  注意事項
  數(shù)組中的字符串必須用雙引號
  JSON 中只要涉及到字符串囱井，就必須使用雙引號
  不支持 undefined

10、JSON 的常用方法
1）JSON.parse()
JSON.parse() 可以將 JSON 格式的字符串解析成 JS 中的對應值
一定要是合法的 JSON 字符串趣避，否則會報錯
2）JSON.stringify()
JSON.stringify() 可以將 JS 的基本數(shù)據(jù)類型庞呕、對象或者數(shù)組轉換成 JSON 格式的字符串
11、使用 JSON.parse() 和 JSON.stringify() 封裝 localStorage

const storage = window.localStorage;

// 設置
const set = (key, value) => {
  // {
  //   username: 'alex'
  // }
  storage.setItem(key, JSON.stringify(value));
};

// 獲取
const get = key => {
  // 'alex'
  // {
  //   "username": "alex"
  // }
  return JSON.parse(storage.getItem(key));
};

// 刪除
const remove = key => {
  storage.removeItem(key);
};

// 清空
const clear = () => {
  storage.clear();
};

export { set, get, remove, clear };

12程帕、跨域是什么
向一個域發(fā)送請求住练，如果要請求的域和當前域是不同域，就叫跨域
不同域之間的請求愁拭，就是跨域請求
13讲逛、什么是不同域，什么是同域
協(xié)議敛苇、域名妆绞、端口號，任何一個不一樣枫攀，就是不同域
與路徑無關括饶，路徑一不一樣無所謂
14、.跨域請求為什么會被阻止
阻止跨域請求来涨，其實是瀏覽器本身的一種安全策略--同源策略
其他客戶端或者服務器都不存在跨域被阻止的問題

15图焰、.跨域解決方案
① CORS 跨域資源共享
② JSONP

  優(yōu)先使用 CORS 跨域資源共享，如果瀏覽器不支持 CORS 的話蹦掐，再使用 JSONP

16技羔、JSONP 的原理
script 標簽跨域不會被瀏覽器阻止
JSONP 主要就是利用 script 標簽，加載跨域文件

17卧抗、使用 JSONP 實現(xiàn)跨域
服務器端準備好 JSONP 接口
https://www.imooc.com/api/http/jsonp?callback=handleResponse

const script = document.createElement('script');
    script.src =
      'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
    document.body.appendChild(script);

    // 聲明函數(shù)
    const handleResponse = data => {
      console.log(data);
    };

18藤滥、XHR 的屬性

1.responseType 和 response 屬性
     const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
     const xhr = new XMLHttpRequest();

     xhr.onreadystatechange = () => {
       if (xhr.readyState != 4) return;

       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
         // 文本形式的響應內容
         // responseText 只能在沒有設置 responseType 或者 responseType = '' 或 'text' 的時候才能使用
         // console.log('responseText:', xhr.responseText);

         // 可以用來替代 responseText
         console.log('response:', xhr.response);
         // console.log(JSON.parse(xhr.responseText));
       }
     };
     xhr.open('GET', url, true);

     // xhr.responseType = '';
     // xhr.responseType = 'text';
     xhr.responseType = 'json';

     xhr.send(null);

     IE6~9 不支持，IE10 開始支持

     2.timeout 屬性
     設置請求的超時時間（單位 ms）
     const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
     const xhr = new XMLHttpRequest();

     xhr.onreadystatechange = () => {
       if (xhr.readyState != 4) return;

       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
         console.log(xhr.response);
       }
     };

     xhr.open('GET', url, true);

     xhr.timeout = 10000;

     xhr.send(null);

     IE6~7 不支持社裆，IE8 開始支持

     3.withCredentials 屬性
     指定使用 Ajax 發(fā)送請求時是否攜帶 Cookie

     使用 Ajax 發(fā)送請求拙绊，默認情況下，同域時，會攜帶 Cookie标沪；跨域時榄攀，不會
     xhr.withCredentials = true;
     最終能否成功跨域攜帶 Cookie，還要看服務器同不同意

     const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
     // const url = './index.html';

     const xhr = new XMLHttpRequest();

     xhr.onreadystatechange = () => {
       if (xhr.readyState != 4) return;

       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
         console.log(xhr.response);
       }
     };

     xhr.open('GET', url, true);

     xhr.withCredentials = true;

     xhr.send(null);

     IE6~9 不支持金句，IE10 開始支持

19檩赢、XHR 的方法

// 1.abort()
      // 終止當前請求
      // 一般配合 abort 事件一起使用
      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      // const xhr = new XMLHttpRequest();

      // xhr.onreadystatechange = () => {
      //   if (xhr.readyState != 4) return;

      //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //     console.log(xhr.response);
      //   }
      // };

      // xhr.open('GET', url, true);

      // xhr.send(null);

      // xhr.abort();

      // 2.setRequestHeader()
      // 可以設置請求頭信息
      // xhr.setRequestHeader(頭部字段的名稱, 頭部字段的值);
      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
      };
      xhr.open('POST', url, true);

      // 請求頭中的 Content-Type 字段用來告訴服務器，瀏覽器發(fā)送的數(shù)據(jù)是什么格式的
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.setRequestHeader('Content-Type', 'application/json');

      // xhr.send(null);
      // xhr.send('username=alex&age=18');
      xhr.send(
        JSON.stringify({
          username: 'alex'
        })
      );

20违寞、XHR 的事件

 // 1.load 事件
      // 響應數(shù)據(jù)可用時觸發(fā)
      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      // const xhr = new XMLHttpRequest();

      // // xhr.onload = () => {
      // //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      // //     console.log(xhr.response);
      // //   }
      // // };
      // xhr.addEventListener(
      //   'load',
      //   () => {
      //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //       console.log(xhr.response);
      //     }
      //   },
      //   false
      // );

      // xhr.open('GET', url, true);

      // xhr.send(null);

      // IE6~8 不支持 load 事件

      // 2.error 事件
      // 請求發(fā)生錯誤時觸發(fā)

      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      // const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
      // const xhr = new XMLHttpRequest();

      // xhr.addEventListener(
      //   'load',
      //   () => {
      //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //       console.log(xhr.response);
      //     }
      //   },
      //   false
      // );
      // xhr.addEventListener(
      //   'error',
      //   () => {
      //     console.log('error');
      //   },
      //   false
      // );

      // xhr.open('GET', url, true);

      // xhr.send(null);

      // IE10 開始支持

      // 3.abort 事件
      // 調用 abort() 終止請求時觸發(fā)
      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      // const xhr = new XMLHttpRequest();

      // xhr.addEventListener(
      //   'load',
      //   () => {
      //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //       console.log(xhr.response);
      //     }
      //   },
      //   false
      // );
      // xhr.addEventListener(
      //   'abort',
      //   () => {
      //     console.log('abort');
      //   },
      //   false
      // );

      // xhr.open('GET', url, true);

      // xhr.send(null);

      // xhr.abort();

      // IE10 開始支持

      // 4.timeout 事件
      // 請求超時后觸發(fā)
      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.addEventListener(
        'load',
        () => {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
          }
        },
        false
      );
      xhr.addEventListener(
        'timeout',
        () => {
          console.log('timeout');
        },
        false
      );

      xhr.open('GET', url, true);

      xhr.timeout = 10;

      xhr.send(null);

21贞瞒、axios
axios 是什么
axios 是一個基于 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
第三方 Ajax 庫