什么是xhr?

最新推荐文章于 2025-01-05 16:09:45 发布
最新推荐文章于 2025-01-05 16:09:45 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 前端 文章标签： 服务器 前端 javascript

1、概念

xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。

2、xhr

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

xhr 接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自己设定的。

浏览器会拒绝绝对不安全的首部重写，以保证应用不能假扮用户代理、用户或请求来源，如Origin由浏览器自动设置，Access-Control-Allow-Origin由服务器设置，如果接受该请求，不包含该字段即可，浏览器发出的请求将作废。

如果想要启用cookie和HTTP认证，客户端必须在发送请求时通过XHR对象发送额外的属性（withCredentials），而服务器也需要以Access-Control-Allow-Credentials响应，表示允许应用发送隐私数据。同样，如果客户需要写入或读取自定义HTTP标头或想要使用“非简单的方法”的请求，那么它必须首先通过发出一个预备请求，以获取第三方服务器的许可！

JS宏进阶：XMLHttpRequest对象
jackispy的博客
02-10 1258
XMLHttpRequest简称XHR，它是一个可以在JavaScript中使用的对象，用于在后台与服务器交换数据，实现页面的局部更新，而无需重新加载整个页面，也是Ajax（Asynchronous JavaScript and XML）技术的核心组成部分。通过XHR对象，开发者可以在不干扰用户当前操作的情况下，向服务器请求数据，并动态更新网页内容。XMLHttpRequest对象是一种强大的工具，用于在后台与服务器交换数据，实现页面的局部更新。
XHR 请求
xyq2024的博客
10-21 373
XMLHttpRequest（XHR）是JavaScript中的一个对象，它提供了一种在网页中发送网络请求的方法，使得网页可以与服务器进行数据交换而无需重新加载整个页面。这种技术是AJAX（Asynchronous JavaScript and XML）的基础，允许网页实现动态更新，从而提升用户体验。
XHR
03-01
XHR 博文链接：https://eric2007.iteye.com/blog/213570
什么是xhr
kwame211的博客
11-05 706
1、概念 xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。 2、xhr XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。 xhr 接口强...
xhr
qq_42603652的博客
09-03 1127
xhr数据请求流程 1.前端初始化xhr对象，设置请求方法：get方法，post方法，form方法， 以及请求接口 open() 此时xhr.readyState=0 开始发送数据到后台 send() <body> <button onclick="get()">xhr之get请求</button> <button onclick=...
XHR Proxy Tool插件(chrome浏览器）
09-14
**什么是XHR？** XMLHttpRequest（XHR）是JavaScript中一个用于在后台与服务器交换数据的API，它允许网页在不重新加载整个页面的情况下与服务器通信。这是实现AJAX（Asynchronous JavaScript and XML）技术的关键...
xhr：一个小的xhr包装器
02-03
xhr 一个小的XMLHttpRequest包装器。 设计用于使用 ，等。 API的一个子集这样你就可以在两个node.js中，通过使用浏览器的作品写的代码require('request')在你的代码，并告诉您的浏览器捆绑到加载xhr而不是request ...
前端开源库-mock-xhr
08-30
在前端开发中，Mock XHR 是一种非常重要的技术，它允许开发者在没有真实网络环境的情况下进行单元测试和功能测试。这个开源库“mock-xhr”就是专为这种目的设计的，它提供了一个XMLHttpRequest（XHR）的模拟实现，...
xhr2:jQuery XHR 包装器扩展
06-26
xhr2 是一个基于 jQuery 的扩展，它为原始的 XMLHttpRequest (XHR) 对象提供了一层封装，使得在 JavaScript 中进行 AJAX 请求更加便捷和强大。xhr2 主要针对的是 jQuery 1.5 及以上版本，利用 jQuery 的核心功能，...
什么是XHR，以及XHR常用的API
youhebuke225的博客
06-22 4777
1 XHR 详情点击 使用XMLHttpRequest(XHR)对象可以与服务器交互, 也就是发送 ajax 请求 前端可以获取到数据，而无需让整个的页面刷新 Web页面可以只更新页面的局部，而不影响用户的操作 2 http请求与ajax请求 http请求包括ajax请求，是一种特别的http请求 2.1 服务器端和浏览器端 对服务器端来说, 没有任何区别 浏览器端发请求: 只有XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求 2.2 浏览器端接收到响应 一
XHR 是什么？
热门推荐
程序员写的技术 FAQ 和杂文
01-15 1万+
XHR 全称：XMLHttpRequest 参考： https://www.cnblogs.com/syfwhu/p/6116323.html
xhr请求是什么？
zqzgng的博客
12-19 2142
xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。
xhr（XMLHttpRequest）可扩展标记语言超文本传输协议请求（eXtensible Markup Language Hypertext Transfer Protocol Request）
小丁的博客
01-05 1069
是一个浏览器接口，允许 JavaScript 代码向服务器发出 HTTP 请求，并在不重新加载整个页面的情况下接收响应。Fetch API 在很多方面是对 XMLHttpRequest 的改进，提供了更简洁的 API 和更多的功能，但底层仍然是类似的 HTTP 请求机制。但是，了解其全称有助于理解其本质，即它是一种用于发送和接收基于 XML 的 HTTP 请求的技术。通常在浏览器的开发者工具（例如 Chrome 的 Network 面板）中可以看到这些信息，用于调试和分析网络请求。
XHR简单介绍
idiot2B的博客
11-08 741
原文链接：https://blog.youkuaiyun.com/qq_26296197/article/details/79616480 实习被分了一个写爬虫的小任务，本来以为正则表达式要自己写，后来了解到有selector 和goquery这种神奇的东西，学习了一下仿照豆瓣的那个，发现还是爬不到，因为option在js里面，爬取不到，刚开始本来打算通过爬取url,记录一个相当于url列表的结构体数组，但...
python计算器程序设计课程报告_20193120 2019-2020-2 《Python程序设计》实验二报告
weixin_39956022的博客
12-09 2425
实验二 计算器设计(一)实验内容设计并完成一个完整的应用程序，完成加减乘除模等运算，功能多多益善。考核基本语法、判定语句、循环语句、逻辑运算等知识点(二)实验要求创建工程项目，使用Python语言实现具体的操作运算，并完成程序调试和运行，代码托管到码云。(三)实验报告20193120 实验二《Python程序设计》实验报告课程：《Python程序设计》班级： 1931姓名： 个人信息，不能透露学号...
fetch/xhr是什么意思
最新发布
03-01
### Fetch API 和 XHR 的网络请求含义及区别 #### 含义 - **XMLHttpRequest (XHR)** 是一种用于在浏览器和服务器之间传输数据的技术。它允许网页向服务器发送请求并接收来自服务器的数据，而无需刷新整个页面[^2]。 - **Fetch API** 提供了一种更现代的方式来进行网络请求。通过 `fetch` 方法可以发起 HTTP 请求，并返回一个 Promise 对象，该对象解析为 Response 实例。这使得异步操作变得更加直观和易于管理[^3]。 #### 主要区别 | 特性 | XMLHttpRequest (XHR) | Fetch API | |--------------------|---------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | 返回值 | 需要监听事件（如 onload/onerror），手动获取状态码、响应头等信息 | 返回的是一个Promise对象，可以直接链式调用 `.then()` 或者使用 async/await 来简化代码逻辑 | | 错误处理 | 只有当请求成功完成时才会触发回调函数；对于网络错误或跨域问题无法捕获 | 所有的HTTP错误都会被捕捉到，即使是非2xx的状态码也会进入catch分支 | | 超时支持 | 不自带超时功能，需额外实现 | 支持原生的超时控制机制，可以通过设置timeout选项来指定最长等待时间 | | 响应体读取 | 使用 `responseText`, `responseXML` 属性访问响应内容 | 提供多种方法 (`json()`, `text()`, `blob()`) 处理不同类型的数据 | ```javascript // XHR Example var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); xhr.onload = function () { if (xhr.status === 200) console.log(JSON.parse(xhr.responseText)); }; xhr.onerror = function () { /* handle error */ }; xhr.send(); // Fetch Example fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => {/* handle error */}); ``` #### 性能与易用性比较 由于 Fetch API 更加简洁明了，在大多数情况下推荐优先考虑使用 fetch 进行 AJAX 操作。不过需要注意的是，某些旧版浏览器可能不完全兼容 fetch ，这时就需要引入 polyfill 或继续依赖 XHR 完成相应的工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值