摘要：前端最基礎的就是。的原理瀏覽器發送請求，服務器給出響應。保持之前的界面不變化。的核心創建一個對象，用于發起請求設置為請求，請求發送請求。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。

ajax 對于現在的前端來說已經是一件必需品了。單頁應用？前后端分離？遠程搜索？異步加載？能做的功能太多了。
當然，一直以來我們都是用一些封裝好的api去使用（jQuery.ajax 、axios）。今天我們就來了解原生的Ajax。

Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種技術，而是一個在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。當使用結合了這些技術的AJAX模型以后， 網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地回應用戶的操作。

盡管X在Ajax中代表XML, 但由于JSON的許多優勢，比如更加輕量以及作為Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

瀏覽器發送請求 HttpRequest，服務器給出響應 HttpResponse。不同于正常打開頁面的是，Ajax通常使用的數據需要二次加工。
比如一首歌的歌曲信息，使用Ajax加載到之后，我們再通過一定的方式把數據顯示在頁面之上。

當然，我們的html頁面，也是通過這樣的原理展示的，只不過是瀏覽器去拉，然后解析html，渲染給我們看。

速度更快。同等條件下，降低了流量，減少了無用數據的加載。

流量少。一個html和一個json那個更小，我就不說了吧。

保持之前的界面不變化。比如說驗證碼，比如說異步加載等等?？梢员Ａ魵v史的輸入。

XMLHttpRequest

var xhr= new XMLHttpRequest(); 創建一個XHR對象，用于發起請求

xhr.open("GET", "https://www.lilnong.top/static/json/manifest.json"); 設置為GET請求，請求https://www.lilnong.top/stati...

xhr.send(); 發送請求。這個時候瀏覽器會開啟一個線程去請求，回調函數會放在等待隊列中。

回調函數

onload

onerror

abort

onreadystatechange

Fetch
一個比 XHR 更新的 API。支持 Promise，簡直不要太爽。

 fetch("https://www.lilnong.top/static/json/manifest.json")
     .then(response=>response.json())
     .then(data=>console.log(data));

之前我們已經大體的了解一下XHR，下面我們深入的介紹一下。測試地址，可以點按鈕，然后看network中的請求

new XMLHttpRequest();無參

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：new ActiveXObject("Microsoft.XMLHTTP");。話說兼容ie，還不用jquery的人很少吧。

xhr = new XMLHttpRequest();
xhr.open("GET","https://www.lilnong.top/static/json/front-end.json",true);
xhr.send();

設置一個請求

methods為請求類型。參數如 GET POST PUT DELETE HEAD

url為請求地址。

async。true（異步） false（同步）。

發送這個請求，如果是post的話，參數是body的內容。get的話，需要帶在open的url上。

支持String

FormData

blob

xhr.setRequestHeader(key,value);
通常有幾種情況我們需要設置。

上傳
setRequestHeader("Content-type","application/x-www-form-urlencoded");這樣設置等于砸場子。肯定不支持。
那么常用的Content-type有什么呢？分別對應的數據是什么呢？留個作業吧（畢竟我之前寫過）

token 驗證
一般名字都是自定義的。登錄的token。csrf 的 token。

一般來說就是拿到 response 來處理了。因為這些都是和后端協商好的。JSON、XML、或者其他數據。
可以返回ArrayBuffer、Blob、Document、DOMString，具體是哪種類型取決于XMLHttpRequest.responseType的值。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。標明當前XHR的狀態，onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒（status為返回的狀態碼）

onload 請求成功

onerror 請求失敗

onreadystatechange readyState 改變時

progress 下載進度

.upload.progress 上傳進度

ontimeout 超時

onabort 被終止

timeout
unsigned long 即無符號長整型，表示該請求的最大請求時間（毫秒），超過該時間請求會自動結束。

withCredentials
Boolean，用來指定跨域的請求是否應該使用證書（如cookie或授權header頭）。

.abort()
如果請求已經被發送,則立刻中止請求.

.getResponseHeader()
返回包含指定響應頭的字符串，如果響應尚未收到或響應中不存在該報頭，則返回null。
可以用來拿服務器時間

fetch --mdn，感興趣的可以去看看，我這里只簡單介紹。畢竟這個api還需要發展。

但是promise真的好爽。寫起來真的好短。支持的返回類型也好多。還有就是新的API基本都是想要跨平臺（想想axios）。

Window 和 WorkerGlobalScope 都實現了 WorkerOrGlobalScope?！@意味著基本在任何場景下只要你想獲取資源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。

fetch(input[, init]);
input是你想要請求的資源。支持兩種類型

一個 USVString 字符串，包含要獲取資源的 URL。一些瀏覽器會接受 blob: 和 data: 作為 schemes.

一個 Request 對象。

init就是一些參數

method 請求使用的方法，如 GET、POST。

headers 請求的頭信息，形式為 Headers 的對象或包含 ByteString 值的對象字面量。

body 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。

等等，還有好多，可以去MDN查看

附上MDN原文地址，我只列舉一些常見的。
簡單來說分為五類

1xx 消息響應

2xx 成功響應

3xx 重定向

4xx 客戶端錯誤

5xx 服務器端錯誤

前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）

前端培訓-初級階段（13） - 正則表達式

前端培訓-初級階段（13） - 類、模塊、繼承

前端培訓-初級階段（13） - ECMAScript （內置對象、函數）

前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓-初級階段（13、18）

前端培訓-初級階段（9 -12）

前端培訓-初級階段（5 - 8）

前端培訓-初級階段（1 - 4）

前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）

前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）

前端培訓-中級階段（7）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

前端培訓目錄、前端培訓規劃、前端培訓計劃

XMLHttpRequest

XMLHttpRequest.upload

XMLHttpRequest.readyState