余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

Ajax 之战:XMLHttpRequest 与 Fetch API(xmlhttprequest是什么)

xiyangw 2022-11-24 16:42 102 浏览 0 评论

本文最初发布于 OpenReplay 博客,由 InfoQ 中文站翻译并分享。


Ajax 是大多数 web 应用程序背后的核心技术,它允许页面向 web 服务发出异步请求,因此数据可以不经过页面往返服务器无刷新显示数据。


术语 Ajax 不是一种技术,相反,它指的是从客户端脚本加载服务器数据的方法。多年来已经引入了几种选择,目前有两种主要方法,大多数 JavaScript 框架使用其中一种或两种。


在本文中,我们将研究早期 XMLHttpRequest 和现代 Fetch 的优缺点,以确定哪种 Ajax API 最适合你的应用。

XMLHttpRequest


XMLHttpRequest 在 1999 年首次作为非标准的 Internet Explorer 5.0 ActiveX 组件出现,微软开发它是为了支持基于浏览器的 Outlook 版本,XML 是当时最流行(或被宣扬)的数据格式,除此之外,XMLHttpRequest 还支持文本和尚未发明的 JSON。


Jesse James Garrett 在他 2005 年的文章《AJAX: Web 应用程序的新方法》中提出了“AJAX”概念,那时谷歌邮箱和谷歌地图等基于 AJAX 的应用程序已经存在,但是这个术语激励了开发人员,并引起了流畅的 Web 2.0 体验爆炸式增长。


AJAX 是“Asynchronous JavaScript and XML”的缩写,尽管严格地说,开发人员并不需要使用异步方法、JavaScript 或 XML。我们现在将通用的“Ajax”术语表示任何从服务器获取数据、更新 DOM 而无需刷新整个页面的客户端过程。


所有主流浏览器都支持 XMLHttpRequest,并在 2006 年成为官方的 web 标准。下面是一个简单的例子,从你的域 / 服务 / 端点获取数据,然后在控制台将 JSON 结果显示为文本:


const xhr = new XMLHttpRequest();
xhr.open("GET", "/service");


// state change event
xhr.onreadystatechange = () => {
  // is request complete?
  if (xhr.readyState !== 4) return;


  if (xhr.status === 200) {
    // request successful
    console.log(JSON.parse(xhr.responseText));
  } else {
    // request not successful
    console.log("HTTP error", xhr.status, xhr.statusText);
  }
};


// start request
xhr.send();

复制代码


onreadystatechange 回调函数在请求的生命周期中运行好几次;XMLHttpRequest 对象的 readyState 属性则返回当前状态:


  • 0 (uninitialized) - 请求未初始化
  • 1(loading)- 服务器连接建立
  • 2(loaded)- 请求收到
  • 3(interactive)- 处理请求
  • 4(complete)- 请求完成,响应准备就绪


在达到状态 4 之前,几个函数就可以做很多事情。

Fetch


Fetch 是一个现代基于 promise 的 Ajax 请求 API,首次出现于 2015 年,在大多数浏览器中都得到了支持。它不是基于 XMLHttpRequest 构建的,并且用更简洁的语法提供了更好的一致性。下面的 Promise 链函数与上面的 XMLHttpRequest 例子相同:


fetch("/service", { method: "GET" })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.error("error:", err));

复制代码


或者你可以使用 async/await:


try {
  const res = await fetch("/service", { method: "GET" }),
    json = await res.json();


  console.log(json);
} catch (err) {
  console.error("error:", err);
}

复制代码


Fetch 更清晰、更简洁,并且经常在 Service worker 中使用。

开源会话重播


OpenReplay 是 FullStory 和 LogRocket 的开源替代品,它通过回放用户在你的应用程序上的一切操作,并显示每个问题的操作堆栈,提供完整的可观察性。OpenReplay 是自托管的,可以完全控制你的数据。



快乐调试吧!现代的前端团队 —— 开始自由地监控你的 web 应用程序。

第 1 回合:Fetch 获胜


与陈旧的 XMLHttpRequest 相比,Fetch API 除了具有更清晰简洁的语法之外,还有其它几个优势。

头、请求和响应对象


上面简单 fetch() 示例中,使用一个字符串定义 URL 端点,也可以传递一个可配置的 Request 对象,它提供了有关调用的一系列属性:


const request = new Request("/service", { method: "POST" });


console.log(request.url);
console.log(request.method);
console.log(request.credentials);


// FormData representation of body
const fd = await request.formData();


// clone request
const req2 = request.clone();


const res = await fetch(request);

复制代码


Response 对象提供了对访问所有详细信息的类似访问:


console.log(res.ok); // true/false
console.log(res.status); // HTTP status
console.log(res.url);


const json = await res.json(); // parses body as JSON
const text = await res.text(); // parses body as text
const fd = await res.formData(); // FormData representation of body

复制代码


Headers 对象提供了一个简单的接口来设置请求中的头信息或获取响应中的头信息:


// set request headers
const headers = new Headers();
headers.set("X-Requested-With", "ajax");
headers.append("Content-Type", "text/xml");


const request = new Request("/service", {
  method: "POST",
  headers,
});


const res = await fetch(request);


// examine response headers
console.log(res.headers.get("Content-Type"));

复制代码

缓存控制


在 XMLHttpRequest 中管理缓存具有挑战性,你可能会发现有必要附加一个随机查询字符串值来绕过浏览器缓存,Fetch 方法在第二个参数 init 对象中内置了对缓存的支持:


const res = await fetch("/service", {
  method: "GET",
  cache: "default",
});

复制代码


缓存可以设置为:


  • 'default' —— 如果有一个新的 (未过期的) 匹配,则使用浏览器缓存;如果没有,浏览器会发出一个带条件的请求来检查资源是否已改变,并在必要时会发出新的请求
  • 'no-store' —— 绕过浏览器缓存,并且网络响应不会更新它
  • 'reload' —— 绕过浏览器缓存,但是网络响应会更新它
  • 'no-cache' —— 类似于'default',除了一个条件请求总是被做
  • 'force-cache' —— 如果可能,使用缓存的版本,即使它过时了
  • 'only-if-cached' —— 相同的 force-cache,除了没有网络请求

跨域控制


跨域共享资源允许客户端脚本向另一个域发出 Ajax 请求,前提是该服务器允许 Access-Control-Allow-Origin 响应头中的源域;如果没有设置这个参数, fetch() 和 XMLHttpRequest 都会失败。但是,Fetch 提供了一个模式属性,可以在第二个参数的 init 对象中设置‘no-cors’属性。


const res = await fetch(
  'https://anotherdomain.com/service', 
  {
    method: 'GET',
    mode: 'no-cors'
  }
);

复制代码


这将返回一个不能读取但可以被其它的 API 使用的响应。例如,你可以使用 Cache API 存储返回再之后使用,可能从 Service Worker 返回一个图像、脚本或 CSS 文件。

凭证控制


XMLHttpRequest 总是发送浏览器 cookie,Fetch API 不会发送 cookie,除非你显式地在第二个参数 init 对象中设置 credentials 属性。


const res = await fetch("/service", {
  method: "GET",
  credentials: "same-origin",
});

复制代码


credentials 可以设置为:


  • 'omit' —— 排除 cookie 和 HTTP 认证项 (默认)
  • 'same-origin' —— 包含对同源 url 的请求的凭证
  • 'include' —— 包含所有请求的凭证


请注意,include 是早期 API 实现中的默认值,如果你的用户可能运行旧的浏览器,就得显式地设置 credentials 属性。

重定向控制


默认情况下,fetch() 和 XMLHttpRequest 都遵循服务器重定向。但是,fetch() 在第二个参数 init 对象中提供了替代选项:


const res = await fetch("/service", {
  method: "GET",
  redirect: "follow",
});

复制代码


redirect 可以设置为:


  • 'follow' —— 遵循所有重定向(默认)
  • 'error' —— 发生重定向时中止(拒绝)
  • 'manual' —— 返回手动处理的响应

数据流


XMLHttpRequest 将整个响应读入内存缓冲区,但是 fetch() 可以流式传输请求和响应数据,这是一项新技术,流允许你在发送或接收时处理更小的数据块。例如,你可以在完全下载前处理数兆字节文件中的信息,下面的示例将传入的(二进制)数据块转换为文本,并将其输出到控制台。在较慢的连接上,你会看到更小的数据块在较长的时间内到达。


const response = await fetch("/service"),
  reader = response.body
    .pipeThrough(new TextDecoderStream())
    .getReader();


while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log(value);
}

复制代码

服务器端支持


Deno 和 Node 18 中完全支持 Fetch,在服务器和客户端使用相同的 API 有助于减少认知成本,还提供了在任何地方运行的同构 JavaScript 库的可能性。

第二轮:XMLHttpRequest 获胜


尽管存在缺陷,XMLHttpRequest 还是有一些技巧可以超越 ajax Fetch()。

进度支持


我们可以监控请求的进度,通过将一个处理程序附加到 XMLHttpRequest 对象的进度事件上。这在上传大文件(如照片)时特别有用:


const xhr = new XMLHttpRequest();


// progress event
xhr.upload.onprogress = (p) => {
  console.log(Math.round((p.loaded / p.total) * 100) + "%");
};

复制代码


事件处理程序传递的对象有三个属性:


  1. lengthComputable —— 如果进度可以计算,则设置为 true
  2. total —— 消息体的工作总量或内容长度
  3. loaded —— 到目前为止完成的工作或内容的数量


Fetch API 没有提供任何方法来监控上传进度。

超时支持


XMLHttpRequest 对象提供了一个 timeout 属性,可以将其设置为请求自动终止前允许运行的毫秒数;如果超时,就触发一个 timeout 事件来处理:


const xhr = new XMLHttpRequest();
xhr.timeout = 5000; // 5-second maximum
xhr.ontimeout = () => console.log("timeout");

复制代码


fetch() 中可以封装一个函数来实现超时功能:


function fetchTimeout(url, init, timeout = 5000) {
  return new Promise((resolve, reject) => {
    fetch(url, init).then(resolve).catch(reject);
    setTimeout(reject, timeout);
  });
}

复制代码


或者,你可以使用 Promise.race():


Promise.race([
  fetch("/service", { method: "GET" }),
  new Promise((resolve) => setTimeout(resolve, 5000)),
]).then((res) => console.log(res));

复制代码


这两个方法都不容易使用,另外请求将在后台继续运行。

中止支持


运行中的请求可以通过 XMLHttpRequest 的 abort() 方法取消,如有必要,可以附加一个 abort 事件来处理:


const xhr = new XMLHttpRequest();
xhr.open("GET", "/service");
xhr.send();


// ...


xhr.onabort = () => console.log("aborted");
xhr.abort();

复制代码


你可以中止一个 fetch(),但它不是那么直接,需要一个 AbortController 对象:


const controller = new AbortController();


fetch("/service", {
  method: "GET",
  signal: controller.signal,
})
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((error) => console.error("Error:", error));


// abort request
controller.abort();

复制代码


当 fetch() 中止时,catch() 块执行。

更显式的故障检测


当开发人员第一次使用 fetch() 时,假设一个 HTTP 错误,如 404 Not Found 或 500 Internal Server error 将触发 Promise 拒绝并运行相关的 catch() 块,这似乎是合乎逻辑的,但事实并非如此:Promise 成功地解决了这些响应,只有当网络没有响应或请求被中断时,才会发生拒绝。


fetch() 的 Response 对象提供了 status 和 ok 属性,但并不总是显式地需要检查它们,XMLHttpRequest 更明确,因为单个回调函数处理每一个结果:你应该在每个示例中都看到 stuatus 检查。

浏览器支持


我希望你不必支持 Internet Explorer 或 2015 年之前的浏览器版本,但如果是这样的话,XMLHttpRequest 是你唯一的选择。XMLHttpRequest 也很稳定的,API 不太可能更新。Fetch 比较新,还缺少几个关键特性,虽然更新不太可能破坏代码,但你可以期待一些维护。


应该使用哪个 API ?


大多数开发人员都会使用更新的 Fetch API,它的语法更简洁,比 XMLHttpRequest 更有优势;也就是说,这些好处中的许多都有特定的用例,但在大多数应用程序中都不需要它们。只有两种情况下 XMLHttpRequest 仍必不可少:


  1. 你正在支持非常老的浏览器——这种需求会随着时间的推移而下降。
  2. 你需要显示上传进度条。Fetch 后续将会支持,但可能需要几年的时间。


这两种选择都很有趣,值得详细了解它们!


原文链接:


https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: