摘要：前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請求，服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個對象，用于發(fā)起請求設(shè)置為請求，請求發(fā)送請求。

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

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

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

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

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

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

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

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

保持之前的界面不變化。比如說驗(yàn)證碼，比如說異步加載等等。可以保留歷史的輸入。

XMLHttpRequest

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

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

xhr.send(); 發(fā)送請求。這個時候?yàn)g覽器會開啟一個線程去請求，回調(diào)函數(shù)會放在等待隊(duì)列中。

回調(diào)函數(shù)

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));

之前我們已經(jīng)大體的了解一下XHR，下面我們深入的介紹一下。測試地址，可以點(diǎn)按鈕，然后看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();

設(shè)置一個請求

methods為請求類型。參數(shù)如 GET POST PUT DELETE HEAD

url為請求地址。

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

發(fā)送這個請求，如果是post的話，參數(shù)是body的內(nèi)容。get的話，需要帶在open的url上。

支持String

FormData

blob

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

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

token 驗(yàn)證
一般名字都是自定義的。登錄的token。csrf 的 token。

一般來說就是拿到 response 來處理了。因?yàn)檫@些都是和后端協(xié)商好的。JSON、XML、或者其他數(shù)據(jù)。
可以返回ArrayBuffer、Blob、Document、DOMString，具體是哪種類型取決于XMLHttpRequest.responseType的值。

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

onload 請求成功

onerror 請求失敗

onreadystatechange readyState 改變時

progress 下載進(jìn)度

.upload.progress 上傳進(jìn)度

ontimeout 超時

onabort 被終止

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

withCredentials
Boolean，用來指定跨域的請求是否應(yīng)該使用證書（如cookie或授權(quán)header頭）。

.abort()
如果請求已經(jīng)被發(fā)送,則立刻中止請求.

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

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

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

Window 和 WorkerGlobalScope 都實(shí)現(xiàn)了 WorkerOrGlobalScope。——這意味著基本在任何場景下只要你想獲取資源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。

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

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

一個 Request 對象。

init就是一些參數(shù)

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

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

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

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

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

1xx 消息響應(yīng)

2xx 成功響應(yīng)

3xx 重定向

4xx 客戶端錯誤

5xx 服務(wù)器端錯誤

前端培訓(xùn)-初級階段（17） - 數(shù)據(jù)存儲（cookie、session、stroage）

前端培訓(xùn)-初級階段（13） - 正則表達(dá)式

前端培訓(xùn)-初級階段（13） - 類、模塊、繼承

前端培訓(xùn)-初級階段（13） - ECMAScript （內(nèi)置對象、函數(shù)）

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

前端培訓(xùn)-初級階段（13、18）

前端培訓(xùn)-初級階段（9 -12）

前端培訓(xùn)-初級階段（5 - 8）

前端培訓(xùn)-初級階段（1 - 4）

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

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

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

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

前端培訓(xùn)-中級階段（6）- jQuery元素節(jié)點(diǎn)操作（2019-07-18期）

前端培訓(xùn)-中級階段（7）- jQuery的事件綁定鏈?zhǔn)讲僮骷霸恚?019-07-25期）

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

前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃

XMLHttpRequest

XMLHttpRequest.upload

XMLHttpRequest.readyState