jquery ajax header 收藏 0

​XMLHttpRequest VS. Fetch, 谁才是 2019 最适合的 AJAX 技术？

XHR VS. Fetch, 谁才是最适合的 AJAX 技术？

原 作 者：Craig Buckler

原文链接：https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/

注：本文是一篇译文。

XMLHttpRequest 最初是由 1999 年发布的 IE5.0 ActiveX 组件实现的，到目前为止（2019 年），刚好 20 年。

在此之前，倒是有一些办法可以在不刷新页面的情况下从服务器获取数据，但是他们通常依赖一些笨拙的技术，例如通过 <script> 注入或是一些第三方插件。微软开发了XMLHttpRequest的初始版本, 用于替代 Outlook 基于浏览器的电子邮件客户端。

直到 2006 年 XMLHttpRequest 才成为 Web 标准，但在此之前已经非常多的浏览器将其实现了。由于这项技术在 Gmail 和 Google Maps 中的广泛使用，并且 Jesse James Garrett 在 2005 年发表了一篇文章：AJAX: A New Approach to Web Applications[1]。使得这个新术语吸引了开发人员的大量关注。

AJAX 是 Asynchronous JavaScript and XML 的简称。\”Asynchronous\” 一词，理解起来很简单就是 “异步” 的意思，但是有如下 2 点，需要注意一下：

1. 虽然 VBScript 和 Flash 也可以实现异步，但是 JavaScript 更为合适。
2. 请求的参数格式不一定非得是 XML，尽管这在当时确实很流行。但它可以使用任何的数据格式，现如今开发者的首选，一般是 JSON。

现在，\”Ajax\” 一般是指在客户端向服务器获取数据并动态的更新 DOM，使得无需刷新整个页面的通用术语。“Ajax” 是大多数 Web 应用程序和单页应用程序（SPA）的核心技术。

以下 JavaScript 代码展示了如何使用XMLHttpRequest(通常简称为 XHR)向http://domain/service发出的 HTTP GET 请求。

`XMLHttpRequest`[2]对象有许多属性、方法和事件。例如，可以设置和监测以毫秒为单位的超时：

并且 progress 事件可以报告长时间运行的文件上传：

属性的数量可能令人困惑，而且XMLHttpRequest的早期实现在跨浏览器之间也不一致。因此，很多库和框架都提供了 Ajax 的封装函数，例如jQuery.ajax()方法：

Fetch API[3]是XMLHttpRequest的现代替代方案。通用的Header[4]，Request[5]和Response[6]接口提供了一致性，同时 Promises 允许更简单的的链式调用和不需要回调的 async / await。

Fetch 简洁，优雅，易于理解，并且在 PWA Service Worker 中大量使用。为什么不用它替代古老的 XMLHttpRequest 呢？

不幸的是，Web 开发从未如此明确。Fetch 还不是用于 Ajax 的完美替代品…

Fetch API 在大部分浏览器中得到了很好的支持[7]，但是不支持所有版本的 IE。使用 2017 年之前版本的 Chrome，Firefox 和 Safari 的人可能也会遇到问题。这些用户或许只占你用户群的一小部分……也有可能是主要客户。所以编码之前，请务必确认兼容性！

此外，与成熟的 XHR 对象相比，Fetch API 较新，并且会接收更多正在进行的更新。这些更新不太可能破坏原始代码，但预计未来几年会进行一定的维护工作。

与XMLHttpRequest不同，Fetch 并不会默认发送 cookie，因此应用的身份验证可能会失败。可以通过更改第二个参数中传递的初始值[8]来解决此问题，例如：

令人惊讶的是，HTTP 错误（例如404 Page Not Found 或 500 Internal Server Error）不会导致 Fetch 返回的 Promise 标记为 reject；.catch()也不会被执行。想要精确的判断 fetch 是否成功，需要包含 promise resolved 的情况，此时再判断 response.ok是不是为 true。如下：

仅当请求无法完成时才触发reject，例如网络故障或请求被阻止。这会使错误捕获更加复杂。

Fetch 不支持超时，只要浏览器允许，请求将继续。解决方法是可以将 Fetch 包装在一个 Promise 中，例如：

或使用Promise.race()决定 fetch 或 timeout 何时首先完成，例如：

通过xhr.abort()很容易结束一个 XHR 请求，另外也可以通过xhr.onabort函数监测事件解决。

之前一直无法中止一个 Fetch 请求，但是现在实现了AbortController API[9]的浏览器可以支持它。这将触发一个信号，该信号可以传递给 Fetch 启动对象：

Fetch 可以通过调用controller.abort()来中止。Promise 被标记 reject 后，会调用.catch()函数。

在撰写本文时，Fetch 仍不支持进度事件。因此，不可能显示文件上传或大型表单提交的进度状态。

最后，选择还是看你自己……除非你的应用是要求有上传进度条的 IE 客户端。你也可以选择将Fetch polyfill[10]与Promise polyfill[11]结合使用，以便在 IE 中执行 Fetch 代码。

对于更简单的 Ajax 调用，XMLHttpRequest是低级别的，更复杂的，并且你需要封装函数。不幸的是，一旦你开始考虑超时，中止调用和错误捕获的复杂性，Fetch 也会如此。

Fetch 的未来可期。但是，该 API 是相对较新，它不提供所有 XHR 的功能，并且某些参数设置比较繁琐。因此在以后的使用过程中，请注意上述问题。

大家好，这里是 FEHub，每天早上 9 点更新，为你分享优质精选文章，与你一起进步。

如果喜欢这篇文章，希望大家点赞，评论，转发。你的支持，是我最大的动力，咱们明天见 ?

关注 「FEHub」，每天进步一点点。

[1]

AJAX: A New Approach to Web Applications: https://adaptivepath.org/ideas/ajax-new-approach-web-applications/

[2]

XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

[3]

Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

[4]

Header: https://developer.mozilla.org/en-US/docs/Web/API/Headers

[5]

Request: https://developer.mozilla.org/en-US/docs/Web/API/Request

[6]

Response: https://developer.mozilla.org/en-US/docs/Web/API/Response

[7]

支持: https://caniuse.com/#search=fetch

[8]

初始值: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters

[9]

AbortController API: https://developer.mozilla.org/en-US/docs/Web/API/AbortController

[10]

Fetch polyfill: https://github.github.io/fetch/

[11]

Promise polyfill: https://www.npmjs.com/package/promise-polyfill

AJAX教程

关注我，带你了解java

一、AJAX简介

1.什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

2.原生JS实现AJAX

代码实现：

网页代码：

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

3.JQuery的三种方式实现AJAX：

3.1 $.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为\”jQuery中Ajax系列方法之母\”。

1.url：链接地址，字符串表示

2.data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}

3.type：“POST” 或 “GET”，请求类型

4.timeout：请求超时时间，单位为毫秒，数值表示

5.cache：是否缓存请求结果，bool表示

6.contentType：内容类型，默认为\”application/x-www-form-urlencoded\”

7.dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8.success：请求成功后，服务器回调的函数

9.error：请求失败后，服务器回调的函数

10.complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11.async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

3.2 $.get()

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

参数介绍：

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

发起带参数的请求时，以参数对象的形式添加第二个参数

3.3 $.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

语法：

参数介绍：

使用 $post() 向服务器提交数据

星辰大海，永不止步

END

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com