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

前端最基础的就是 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 服务器端错误

状态码	状态描述	详细描述	常见场景
200	OK (成功)	请求成功.成功的意义根据请求所使用的方法不同而不同.GET: 资源已被提取,并作为响应体传回客户端.HEAD: 实体头已作为响应头传回客户端.POST: 经过服务器处理客户端传来的数据,适合的资源作为响应体传回客户端.TRACE: 服务器收到请求消息作为响应体传回客户端.PUT、DELETE、OPTIONS 方法永远不会返回 200 状态码.	加载网页，加载资源，加载成功，可以说最常见
206	Partial Content (部分内容)	当客户端通过使用range头字段进行文件分段下载时使用该状态码	一般出现在大文件，比如MP4
301	Moved Permanently (永久移动)	该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到.	用于永久移动，比如说http跳转到https，比如想要更换域名。通常搜索引擎爬虫抓到301会替换保存的资源地址。
302	Found (临时移动)	该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到	用于临时重定向，比如登录失效需要去登录页，比如作品目前在审核。
304	Not Modified(未修改)	告诉客户端,所请求的内容距离上次访问并没有变化. 客户端可以直接从浏览器缓存里获取该资源.	一般就是js被缓存，css被缓存。当然也有写get请求数据接口也会缓存。
400	Bad Request(错误请求)	因发送的请求语法错误,服务器无法正常读取.	一般来说都是body数据异常，比如服务端要params，body里面是JSON
401	Unauthorized(未授权)	需要身份验证后才能获取所请求的内容,类似于403错误.不同点是.401错误后,只要正确输入帐号密码,验证即可通过.
403	Forbidden(禁止访问)	客户端没有权利访问所请求内容,服务器拒绝本次请求.	通常都是token失效
404	Not Found(未找到)	服务器找不到所请求的资源.由于经常发生此种情况,所以该状态码在上网时是非常常见的.	接口未定义，资源不存在
500	Internal Server Error (内部服务器错误)	服务器遇到未知的无法解决的问题.
501	Implemented (未实现)	服务器不支持该请求中使用的方法,比如POST 和 PUT.只有GET 和 HEAD 是RFC2616规范中规定服务器必须实现的方法.
502	Bad Gateway (网关错误)	服务器作为网关且从上游服务器获取到了一个无效的HTTP响应.
503	Service Unavailable (服务不可用)	由于临时的服务器维护或者过载,服务器当前无法处理请求.这个状况是临时的,并且将在一段时间以后恢复.如果能够预计延迟时间,那么响应中可以包含一个Retry-After:头用以标明这个延迟时间.如果没有给出这个Retry-After:信息，那么客户端应当以处理500响应的方式处理它.同时,这种情况下,一个友好的用于解释服务器出现问题的页面应当被返回,并且,缓存相关的HTTP头信息也应该包含,因为通常这种错误提示网页不应当被客户端缓存.
504	Gateway Timeout (网关超时)	服务器作为网关且不能从上游服务器及时的得到响应返回给客户端.

微信公众号：前端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