什么是XHR?

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标头或想要使用“非简单的方法”的请求,那么它必须首先通过发出一个预备请求,以获取第三方服务器的许可!
————————————————
版权声明:本文为CSDN博主「风中梦铃s」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m_S_L/article/details/89460964

<think>好的,用户想了解XHR是什么。首先,我需要回忆XHR的基本定义,它是XMLHttpRequest的缩写,用于在浏览器中与服务器交互数据。然后,要确定它的主要用途,比如异步通信,实现页面无刷新更新数据,这对Ajax编程很重要。接下来,可能需要解释它的工作原理,包括创建对象、配置请求、发送请求和处理响应等步骤。还要提到它的历史,比如最初由微软开发,后来被其他浏览器采纳,成为Ajax技术的核心。 同时,要注意用户可能的实际应用场景,比如前端开发中的数据获取,表单提交,或者动态内容加载。需要提到现代Web API如Fetch的出现,但也要说明XHR仍然在一些旧项目或需要更细粒度控制时使用。另外,可能还要比较XHR和Fetch的优缺点,比如XHR的回调方式与Fetch的Promise,以及XHR的支持性更广泛。 用户可能还关心XHR的基本用法,所以需要给出一个简单的代码示例,展示如何创建XHR对象、设置回调、发起GET请求等。不过用户没有明确要求代码,所以可能放在解释步骤中简要提及。另外,要强调XHR的安全性和跨域问题,比如同源策略和CORS,这也是实际开发中常见的注意事项。 最后,确保回答结构清晰,分点解释,让用户能够逐步理解XHR的概念、作用、使用方法以及相关技术背景。避免使用过于专业的术语,保持口语化,但核心概念要准确。可能需要检查是否有遗漏的重要点,比如XHR的事件监听、状态码处理等,但根据用户的提问深度,可能不需要过于深入,保持基础全面的介绍即可。</think>XHR(XMLHttpRequest)是浏览器提供的 JavaScript 编程接口,用于在客户端和服务器之间传输数据。以下是分步说明: 1. **核心定义** - 全称为 **XMLHttpRequest**(XML 扩展的 HTTP 请求) - 最初由微软设计(1999年),后成为 Web 标准 - 支持异步和同步通信(默认推荐异步) 2. **核心能力** - 无需刷新页面即可向服务器发送请求 - 接收多种格式数据:XML/JSON/HTML/纯文本等 - 支持所有 HTTP 方法:GET/POST/PUT/DELETE 等 - 可设置请求头(Headers)和读取响应头 3. **工作原理** ```javascript // 1. 创建对象 let xhr = new XMLHttpRequest(); // 2. 配置请求 xhr.open('GET', 'https://api.example.com/data', true); // 异步模式 // 3. 设置回调 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.response); // 处理响应数据 } }; // 4. 发送请求 xhr.send(); ``` 4. **关键特性** - **异步处理**:通过回调函数实现非阻塞操作 - **事件机制**:提供 `onload`/`onerror`/`onprogress` 等事件 - **跨域控制**:受同源策略限制,需通过 CORS 解决跨域问题 5. **现代演进** - 被更现代的 `Fetch API` 逐渐替代(基于 Promise) - 仍保留在旧系统维护和需要精细控制的场景中 **典型应用场景**: - 表单验证(实时校验用户名是否可用) - 无限滚动加载(动态获取分页数据) - 自动补全搜索建议 - 单页应用(SPA)数据更新 注意:现代开发中建议优先使用 `Fetch API`,但理解 XHR 有助于掌握底层网络通信机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值