17 | WebAPI：XMLHttpRequest是怎么实现的？

李兵



该思维导图由 AI 生成，仅供参考

在上一篇文章中我们介绍了 setTimeout 是如何结合渲染进程的循环系统工作的，那本篇文章我们就继续介绍另外一种类型的 WebAPI——XMLHttpRequest。
自从网页中引入了 JavaScript，我们就可以操作 DOM 树中任意一个节点，例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等， 几乎可以“为所欲为”了。
不过在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面。而 XMLHttpRequest 提供了从 Web 服务器获取数据的能力，如果你想要更新某条数据，只需要通过 XMLHttpRequest 请求服务器提供的接口，就可以获取到服务器的数据，然后再操作 DOM 来更新页面内容，整个过程只需要更新网页的一部分就可以了，而不用像之前那样还得刷新整个页面，这样既有效率又不会打扰到用户。
关于 XMLHttpRequest，本来我是想一带而过的，后来发现这个 WebAPI 用于教学非常好。首先前面讲了那么网络内容，现在可以通过它把 HTTP 协议实践一遍；其次，XMLHttpRequest 是一个非常典型的 WebAPI，通过它来讲解浏览器是如何实现 WebAPI 的很合适，这对于你理解其他 WebAPI 也有非常大的帮助，同时在这个过程中我们还可以把一些安全问题给串起来。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

XMLHttpRequest是一种WebAPI，用于从Web服务器获取数据并实现局部页面更新而无需整体刷新。本文通过介绍同步回调和异步回调的概念，深入解析了XMLHttpRequest的工作原理，包括对象创建、回调函数注册、请求信息配置和发起请求等步骤。文章还提到了XMLHttpRequest的回调函数类型，如ontimeout、onerror和onreadystatechange，以及处理网络请求不同状态的方法。此外，文章还掏出了XMLHttpRequest使用过程中的“坑”，包括跨域问题和HTTPS混合内容的问题。通过示例代码和流程图，读者可以清晰地了解XMLHttpRequest的执行流程。总的来说，本文通过深入讲解XMLHttpRequest的实现机制，为读者理解浏览器如何实现WebAPI提供了帮助。文章跨度较大，不仅介绍了回调类型、循环系统、网络请求，还涉及了安全问题，将这些内容“串联”起来。对于开发者来说，Web安全理论的学习至关重要，文章也提出了开放性思考题，引发读者思考。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《浏览器工作原理与实践》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(52)

最新
精选

蓝配鸡
如何高效学习安全理论 1. why，知道为什么有这个安全机制，历史是什么样的 2. how，知道why之后自己先想想怎么解决这个问题，再去看看别人是怎么解决的，分析利弊 3. 学完之后自己上手试试 4. 拉个你身边最蠢的小伙伴把这件事给他说明白
作者回复: 很赞，学安全一定要知道why，知道why才知道how！等到了我们专栏的安全篇时，这套理论再结合实践就完美了。
2019-09-12
10
64
Geek_d972f2
建立tcp连接是在xhr open还是send?
作者回复: open方法仅仅是配置数据，没有任何真实的连接产生，所有连接阶段都是在send之后
2019-09-13
2
47
yihang
请教老师，我看到 es6中可以通过一个 fetch api来请求，它的实现是用了 xmlHttpRequest么？如果不是，原理上有什么不同？
作者回复: fetch采用了promise来封装，在使用方式上更强现代化，同时还原生支持async/await。在chromium中，fetch是完全重新实现的，和xmlhttprequest没有什么关系！在项目中推荐使用fetch
2019-09-12
3
37
imperial
老师，异步函数的调用不应该有三种方式吗，可以放到队列尾，微任务中，也可以放入延迟队列中，为什么不放入延迟队列中呢
作者回复: 延时队列中的任务包含JS通过定时器设置的回调函数、还有一些浏览器内部的延时回调函数。它们属于宏任务！另外正常的消息队列中的任务也属于宏任务！所以通常我说放入消息队列就是指放入了宏任务队列（包括了延时队列或者正常的消息队列）因为分开来描述会有点啰嗦！
2019-10-24

17
Hurry
IPC是什么
作者回复: 进程间通信，比如浏览器进程需要网络进程下载数据，浏览器进程就是通过IPC告诉网络进程需要下载哪些数据，网络进程接收到之后才会开启下载流程
2019-09-14
2
10
oc7
异步回调的第二种方式把异步函数添加到微任务队列中具体是哪些WebAPI呢? Promise.then?
作者回复: Promise的resolve和reject会创建微任务。还有MutationObserver，如果监听了某个节点，那么通过DOMAPI修改这些被监听的节点也会产生微任务。
2019-09-12

6
bobi
老师，什么时候专门讲微任务？
作者回复: 后面三节微任务 Promise async/await
2019-09-12

5
朱维娜🍍
想知道延时任务是不是一种微任务啊
作者回复: 不是，宏任务，定时器产生的任务都会保存到延时队列中
2019-09-12

4
mfist
作为一名前端开发工程师，要如何高效地学习前端web安全理论呢？作为web工程师可以稍微把自己领域知识向后端扩展一些，这样理解web问题、网络传输问题会更加得心应手。比如说前端浏览器因为跨域block，后端到底有没有处理请求；XSS 漏洞以及CSRF 漏洞如果能前后端一起模拟一下，会更容易理解的。今日总结 xmlhttprequest是为了解决网页局部数据刷新产生的技术。通过同步回调和异步回调以及系统调用栈来引出了 xmlhttprequest运行机制。一个xhr主要包含下面四个步骤：1. 创建xmlhttprequest对象；2. 为xhr对象注册回调函数（ontimeout、onerror、onreadystatechange）；3. 打开请求（xhr.open（'GET', url,true））4. 配置基础的请求信息（timeout/responseType/setRequestHeader）；5. 发送请求。xhr中场景的坑（跨域和混合内容）
作者回复: 通过这些实践理解安全问题是个好方法，最好还要搞清楚为什么有这种或者那种的安全问题，这样我们对安全问题就会融会贯通。
2019-09-12

4
レイン小雨
老师后面能详细的讲一下浏览器同源策略的具体实现吗？作为前端最基本的常识性知识却总是感觉理解的不够深入，开始我以为是跨域的请求是被浏览器“拦截在了门内”----即请求没有发送出去，但是看了很多文章中说，其实跨域的请求是发送出去了，服务器也接收到了并响应了，而是在返回的时候被浏览器“拦截在门外”，还有人说，不同的浏览器实现也不一样，很是困惑这里，希望老师能给一个确定的答案。
2019-09-14
13
20

收起评论