XMLHttpRequest(xhr)方法详解

XMLHttpRequest

发展历程

  XMLHttpRequest一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。

  • XMLHttpRequest Level 1主要存在以下缺点:

1、受同源策略的限制,不能发送跨域请求;
2、不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
3、在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;

  • Level 2中新增了以下功能:

1、可以发送跨域请求,在服务端允许的情况下;
2、支持发送和接收二进制数据;
3、新增formData对象,支持发送表单数据;
4、发送和获取数据时,可以获取进度信息;
5、可以设置请求的超时时间;

如何与服务端通信

我们与服务器通信的API就是XMLHttpRequest。
1、新建XMLHttpRequest对象

var xhr=new XMLHttpRequest();
//IE 7以下: 
var xhr=new ActiveXObject("Microsoft.XMLHTTP");

2、打开要发送的地址通道。

xhr.open(“GET”
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XMLHttpRequest 是 JavaScript 用于发送 HTTP 请求的对象。它可以用于与服务器进行通信,获取数据或发送数据。下面是一个对 XMLHttpRequest 的详细解释: XMLHttpRequest 是一个内置的 JavaScript 对象,它提供了一种简单而灵活的方式来发送异步请求。通过使用该对象,浏览器可以在后台与服务器进行通信,而不会影响用户界面的交互。 XMLHttpRequest 对象的使用流程如下: 1. 创建 XMLHttpRequest 对象:使用 new 关键字创建 XMLHttpRequest 对象,如下所示: ```javascript var xhr = new XMLHttpRequest(); ``` 2. 设置请求参数:设置请求的方法、URL 和是否使用异步方式。常见的请求方法有 GET 和 POST,URL 则是指要发送请求的服务器地址。通过调用 `open` 方法设置这些参数,如下所示: ```javascript xhr.open('GET', 'https://example.com/api/data', true); ``` 3. 设置响应处理函数:通过设置 `onload`、`onerror` 和 `onreadystatechange` 等属性,来定义请求完成后的响应处理函数。这些函数会在请求成功、失败或状态发生变化时被触发。 ```javascript xhr.onload = function() { // 请求成功后的处理逻辑 }; xhr.onerror = function() { // 请求失败后的处理逻辑 }; xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { // 请求成功后的处理逻辑 } else { // 请求失败后的处理逻辑 } } }; ``` 4. 发送请求:使用 `send` 方法发送请求。对于 GET 请求,可以直接发送,而对于 POST 请求,则需要将要发送的数据作为参数传递给 `send` 方法。 ```javascript xhr.send(); ``` 以上就是使用 XMLHttpRequest 的基本流程。接下来是一些可能会引发问题的情况和相关问题: 相关问题: 1. 如何发送带有参数的 POST 请求? 2. 如何处理跨域请求? 3. 如何处理异步请求的并发控制?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值