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

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模型中打包信息。

Ajax的原理

浏览器发送请求 HttpRequest，服务器给出响应 HttpResponse。不同于正常打开页面的是，Ajax通常使用的数据需要二次加工。

比如一首歌的歌曲信息，使用Ajax加载到之后，我们再通过一定的方式把数据显示在页面之上。

当然，我们的html页面，也是通过这样的原理展示的，只不过是浏览器去拉，然后解析html，渲染给我们看。

Ajax的优点

1. 速度更快。同等条件下，降低了流量，减少了无用数据的加载。

2. 流量少。一个html和一个json那个更小，我就不说了吧。

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

Ajax的核心API

1. XMLHttpRequest

a.var xhr= new XMLHttpRequest(); 创建一个XHR对象，用于发起请求

b.xhr.open('GET', 'https://www.lilnong.top/static/json/manifest.json'); 设置为GET请求，请求https://www.lilnong.top/stati...

c.xhr.send(); 发送请求。这个时候浏览器会开启一个线程去请求，回调函数会放在等待队列中。

d.回调函数

1. onload
2. onerror
3. abort
4. onreadystatechange

2. Fetch

一个比 XHR 更新的 API。支持 Promise，简直不要太爽。

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

XMLHttpRequest

之前我们已经大体的了解一下XHR，下面我们深入的介绍一下。测试地址，可以点按钮，然后看network中的请求

new 一个 XHR 对象

new XMLHttpRequest();无参

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：new

ActiveXObject("Microsoft.XMLHTTP");。话说兼容ie，还不用jquery的人很少吧。

使用 XHR 对象发送请求

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

open(method,url,async)

设置一个请求

1. methods为请求类型。参数如 GETPOSTPUTDELETEHEAD

2. url为请求地址。

3. async。true（异步） false（同步）。

send(params)

发送这个请求，如果是post的话，参数是body的内容。get的话，需要带在open的url上。

1. 支持String

2. FormData

3. blob

设置请求头 setRequestHeader

xhr.setRequestHeader(key,value);

通常有几种情况我们需要设置。

1. 上传
   setRequestHeader("Content-type","application/x-www-form-urlencoded");这样设置等于砸场子。肯定不支持。

那么常用的Content-type有什么呢？分别对应的数据是什么呢？留个作业吧（毕竟我之前写过）

2. token 验证
   一般名字都是自定义的。登录的token。csrf 的 token。

响应

一般来说就是拿到 response 来处理了。因为这些都是和后端协商好的。JSON、XML、或者其他数据。

可以返回ArrayBuffer、Blob、Document、DOMString，具体是哪种类型取决于XMLHttpRequest.responseType的值。

readyState

每当 readyState 改变时，就会触发 onreadystatechange 事件。标明当前XHR的状态，onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪（status为返回的状态码）

回调

1. onload 请求成功

2. onerror 请求失败

3. onreadystatechange readyState 改变时

4. progress 下载进度

5. .upload.progress 上传进度

6. ontimeout 超时

7. onabort 被终止

其他 属性&方法

1. timeout
   unsigned long 即无符号长整型，表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。

2. withCredentials
   Boolean，用来指定跨域的请求是否应该使用证书（如cookie或授权header头）。

3. .abort()
   如果请求已经被发送,则立刻中止请求.

4. .getResponseHeader()

返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。
可以用来拿服务器时间

fetch

fetch --mdn，感兴趣的可以去看看，我这里只简单介绍。毕竟这个api还需要发展。

但是promise真的好爽。写起来真的好短。支持的返回类型也好多。还有就是新的API基本都是想要跨平台（想想axios）。

Window 和 WorkerGlobalScope 都实现了 WorkerOrGlobalScope。——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。

创建&发送

fetch(input[, init]);

input是你想要请求的资源。支持两种类型

1. 一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.

2. 一个 Request 对象。

init就是一些参数

1. method 请求使用的方法，如 GET、POST。

2. headers 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。

3. body 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

4. 等等，还有好多，可以去MDN查看

HTTP response codes

附上MDN原文地址，我只列举一些常见的。

简单来说分为五类

1. 1xx 消息响应

2. 2xx 成功响应

3. 3xx 重定向

4. 4xx 客户端错误

5. 5xx 服务器端错误