前端培训-中级阶段（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-二、2-三、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. 前端培训-初级阶段（1三、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