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

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

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

Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種技術(shù)，而是一個(gè)在 2005年被Jesse James Garrett提出的新術(shù)語(yǔ)，用來(lái)描述一種使用現(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è)應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁(yè)面。這使得程序能夠更快地回應(yīng)用戶的操作。

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

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

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

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

流量少。一個(gè)html和一個(gè)json那個(gè)更小，我就不說(shuō)了吧。

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

XMLHttpRequest

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

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

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

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

onload

onerror

abort

onreadystatechange

Fetch
一個(gè)比 XHR 更新的 API。支持 Promise，簡(jiǎn)直不要太爽。

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

之前我們已經(jīng)大體的了解一下XHR，下面我們深入的介紹一下。測(cè)試地址，可以點(diǎn)按鈕，然后看network中的請(qǐng)求

new XMLHttpRequest();無(wú)參

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

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

設(shè)置一個(gè)請(qǐng)求

methods為請(qǐng)求類(lèi)型。參數(shù)如 GET POST PUT DELETE HEAD

url為請(qǐng)求地址。

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

發(fā)送這個(gè)請(qǐng)求，如果是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è)置等于砸場(chǎng)子?？隙ú恢С帧?br>那么常用的Content-type有什么呢？分別對(duì)應(yīng)的數(shù)據(jù)是什么呢？留個(gè)作業(yè)吧（畢竟我之前寫(xiě)過(guò)）

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

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

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

onload 請(qǐng)求成功

onerror 請(qǐng)求失敗

onreadystatechange readyState 改變時(shí)

progress 下載進(jìn)度

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

ontimeout 超時(shí)

onabort 被終止

timeout
unsigned long 即無(wú)符號(hào)長(zhǎng)整型，表示該請(qǐng)求的最大請(qǐng)求時(shí)間（毫秒），超過(guò)該時(shí)間請(qǐng)求會(huì)自動(dòng)結(jié)束。

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

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

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

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

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

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

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

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

一個(gè) Request 對(duì)象。

init就是一些參數(shù)

method 請(qǐng)求使用的方法，如 GET、POST。

headers 請(qǐng)求的頭信息，形式為 Headers 的對(duì)象或包含 ByteString 值的對(duì)象字面量。

body 請(qǐng)求的 body 信息：可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。

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

附上MDN原文地址，我只列舉一些常見(jiàn)的。
簡(jiǎn)單來(lái)說(shuō)分為五類(lèi)

1xx 消息響應(yīng)

2xx 成功響應(yīng)

3xx 重定向

4xx 客戶端錯(cuò)誤

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XMLHttpRequest

XMLHttpRequest.upload

XMLHttpRequest.readyState