您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Ajax 之战:XMLHttpRequest 与 Fetch API

时间:2022-05-06 12:54:14  来源:  作者:Mason程

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

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

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

XMLHttpRequest

XMLHttpRequest 在 1999 年首次作为非标准的 Inte.NET 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 是自托管的,可以完全控制你的数据。

Ajax 之战:XMLHttpRequest 与 Fetch API

 

快乐调试吧!现代的前端团队 —— 开始自由地监控你的 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 后续将会支持,但可能需要几年的时间。

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



Tags:Ajax   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Ajax是什么?JavaScript中如何使用Ajax技术进行网络请求?
在web初期阶段,前端想要获取后端服务信息需要刷新整个页面,这种方式既耗时又让用户体验十分糟糕,那么怎么解决这个问题呢?想要搭建起前端和后端的快速通道,这个时候就需要使用Aja...【详细内容】
2023-06-28  Search: Ajax  点击:(233)  评论:(0)  加入收藏
Java抓取前端Ajax的秘诀:andXML和XML
在当今互联网时代,前端技术的发展已经越来越快,越来越多的网站采用了Ajax技术来实现前端渲染。这种技术可以使得页面更加流畅,用户体验更好,但是它也给后端爬虫带来了很大的挑战...【详细内容】
2023-05-09  Search: Ajax  点击:(384)  评论:(0)  加入收藏
在 node 中使用 jquery ajax
对于前端同学来说,ajax 请求应该不会陌生。jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果:$.ajax({ url: "https://echo.apipost.cn/get.php"...【详细内容】
2022-09-01  Search: Ajax  点击:(408)  评论:(0)  加入收藏
Ajax 之战:XMLHttpRequest 与 Fetch API
Ajax 是大多数 web 应用程序背后的核心技术,它允许页面向 web 服务发出异步请求,因此数据可以不经过页面往返服务器无刷新显示数据。术语 Ajax 不是一种技术,相反,它指的是从客...【详细内容】
2022-05-06  Search: Ajax  点击:(299)  评论:(0)  加入收藏
在 JS 中如何使用 Ajax 来进行请求
本人已经过原 Danny Markov 授权翻译在本教程中,我们将学习如何使用 JS 进行AJAX调用。1.AJAX术语AJAX 表示 异步的 JavaScript 和 XML。AJAX 在 JS 中用于发出异步网络请求...【详细内容】
2021-01-12  Search: Ajax  点击:(454)  评论:(0)  加入收藏
ajax请求controller ajax跨域报错处理
报错:Access to XMLHttpRequest at 'http://localhost:8080/SpringBootServer/testfile' from origin 'null' has been blocked by CORS policy: No 'Ac...【详细内容】
2020-09-03  Search: Ajax  点击:(219)  评论:(0)  加入收藏
ajax跨域完全讲解
跨域产生的原因: 浏览器限制。如果浏览器发现请求是跨域的时候,就会做校验,如果校验不通过就会报跨域的错误 跨域。发出去的请求只要域名、端口、协议中的任意一个与当前域不同...【详细内容】
2020-07-02  Search: Ajax  点击:(382)  评论:(0)  加入收藏
JavaScript、Ajax、jQuery全部知识点,1分钟速懂!
本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开...【详细内容】
2020-04-29  Search: Ajax  点击:(307)  评论:(0)  加入收藏
PHP使用反向Ajax技术实现在线客服系统
反向Ajax技术,又称为服务器推技术,server push等。一般用于“在线客服”、“消息推送”、“即时通信”等功能中,比如新浪微博的私信功能,就是客户端不断的请求服务器并创建连接,...【详细内容】
2020-04-18  Search: Ajax  点击:(296)  评论:(0)  加入收藏
Java解决Ajax跨域解决方案
一、跨域问题的来源浏览器跨域处理原由:浏览器安全防护的“同源政策”影响。关于什么是“同源政策”,可以看这边文章,讲解比较详细易懂https://blog.csdn.net/dreamcatcher1...【详细内容】
2019-12-20  Search: Ajax  点击:(423)  评论:(0)  加入收藏
▌简易百科推荐
Meta如何将缓存一致性提高到99.99999999%
介绍缓存是一种强大的技术,广泛应用于计算机系统的各个方面,从硬件缓存到操作系统、网络浏览器,尤其是后端开发。对于Meta这样的公司来说,缓存尤为重要,因为它有助于减少延迟、扩...【详细内容】
2024-04-15    dbaplus社群  Tags:Meta   点击:(2)  评论:(0)  加入收藏
SELECT COUNT(*) 会造成全表扫描?回去等通知吧
前言SELECT COUNT(*)会不会导致全表扫描引起慢查询呢?SELECT COUNT(*) FROM SomeTable网上有一种说法,针对无 where_clause 的 COUNT(*),MySQL 是有优化的,优化器会选择成本最小...【详细内容】
2024-04-11  dbaplus社群    Tags:SELECT   点击:(2)  评论:(0)  加入收藏
10年架构师感悟:从问题出发,而非技术
这些感悟并非来自于具体的技术实现,而是关于我在架构设计和实施过程中所体会到的一些软性经验和领悟。我希望通过这些分享,能够激发大家对于架构设计和技术实践的思考,帮助大家...【详细内容】
2024-04-11  dbaplus社群    Tags:架构师   点击:(2)  评论:(0)  加入收藏
Netflix 是如何管理 2.38 亿会员的
作者 | Surabhi Diwan译者 | 明知山策划 | TinaNetflix 高级软件工程师 Surabhi Diwan 在 2023 年旧金山 QCon 大会上发表了题为管理 Netflix 的 2.38 亿会员 的演讲。她在...【详细内容】
2024-04-08    InfoQ  Tags:Netflix   点击:(5)  评论:(0)  加入收藏
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(9)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(16)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(13)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(9)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(14)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(10)  评论:(0)  加入收藏
站内最新
站内热门
站内头条