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

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

ajax 对于现在的前端来说已经是一件必需品了。单页应用？前后端分离？远程搜索？异步加载？能做的功能太多了。
当然，一直以来我们都是用一些封装好的 api 去使用（jQuery.ajax、axios）。今天我们就来了解原生的 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

   1. var xhr= new XMLHttpRequest(); 创建一个 XHR 对象，用于发起请求
   2. xhr.open('GET', 'https://www.lilnong.top/static/json/manifest.json'); 设置为 GET 请求，请求 https://www.lilnong.top/stati…
   3. xhr.send(); 发送请求。这个时候浏览器会开启一个线程去请求，回调函数会放在等待队列中。

   4. 回调函数

      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为请求类型。参数如 GET POST PUT DELETE HEAD
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 服务器端错误

微信公众号：前端 linong

初级阶段文章目录

1. 前端培训 - 初级阶段（17）– 数据存储（cookie、session、stroage）
2. 前端培训 - 初级阶段（13）– 正则表达式
3. 前端培训 - 初级阶段（13）– 类、模块、继承
4. 前端培训 - 初级阶段（13）– ECMAScript（内置对象、函数）
5. 前端培训 - 初级阶段（13）– ECMAScript（语法、变量、值、类型、运算符、语句）
6. 前端培训 - 初级阶段（13、18）
7. 前端培训 - 初级阶段（9 -12）
8. 前端培训 - 初级阶段（5 – 8）
9. 前端培训 - 初级阶段（1 – 4）

中级阶段文章目录

1. 前端培训 - 中级阶段（2）– 事件(event) 事件冒泡、捕获 –（2019-06-20 期）
2. 前端培训 - 中级阶段（3）– DOM 文档对象模型（2019-06-27 期）
3. 前端培训 - 中级阶段（4）- BOM 浏览器对象模型（2019-07-04 期）
4. 前端培训 - 中级阶段（5）- jQuery 的概念与基本使用（2019-07-11 期）
5. 前端培训 - 中级阶段（6）- jQuery 元素节点操作（2019-07-18 期）
6. 前端培训 - 中级阶段（7）- jQuery 的事件绑定链式操作及原理（2019-07-25 期）
7. 前端培训 - 中级阶段（8）- jQuery 元素属性样式操作（2019-08-01 期）

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. XMLHttpRequest
3. XMLHttpRequest.upload
4. XMLHttpRequest.readyState