乐趣区

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

jiezi

前端最基础的就是 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
退出移动版