前端培训-中级阶段（9）- 原生Ajax的运行原理与实现（2019-08-08期）

摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。

前端最基础的就是 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那个更小，我就不说了吧。

保持之前的界面不变化。比如说验证码，比如说异步加载等等。可以保留历史的输入。

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