XHR的用法详细解读
在使用XHR对象时,要调用的第一个方法是 open(),它接受 3个参数:要发送的请求的类型(“get”、"post"等)、请求的URL和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。
xhr.open("get", "example.php", false);
这行代码会启动一个针对example.php的GET请求。有关这行代码,需要说明两点:一是URL 相对于执行代码的当前页面(当然也可以使用绝对路径);二是调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。
只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。
要发送特定的请求,必须像下面这样调用send()方法:
xhr.open("get", "example.txt", false);
xhr.send(null);
这里的send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对有些浏览器来说是必需的。调用send()之后,请求就会被分派到服务器。
由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。在收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下。
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档。
status:响应的HTTP状态。
statusText:HTTP状态的说明。
在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP 状态代码为200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也应该能够访问了。此外,状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的。为确保接收到适当的响应,应该像下面这样检查上述这两种状态代码:
xhr.open("get", "example.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);
} else {alert("Request was unsuccessful: " + xhr.status);
}
根据返回的状态代码,这个例子可能会显示由服务器会显示一条错误消息。我们建议读者要通过检测status来决定下一步的操作,不要依赖statusText,因为后者在跨浏览器使用时不太可靠。另外,无论内容类型是什么,响应主体的内容都会保存到responseText属性中;而对于非XML数据而言responseXML属性的值将为null。
像前面这样发送同步请求当然没有问题,但多数情况下,我们还是要发送异步请求,才能让JavaScript继续执行而不必等待响应。此时,可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
0:未初始化。尚未调用open()方法。
1:启动。已经调用open()方法,但尚未调用send()方法。
2:发送。已经调用send()方法,但尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪。不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子。
var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if (xhr.readyState == 4){if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}}};xhr.open("get", "example.txt", true);xhr.send(null);
以上代码利用DOM 0级方法为XHR对象添加了事件处理程序,原因是并非所有浏览器都支持DOM 2级方法。与其他事件处理程序不同,这里没有向onreadystatechange事件处理程序中传递event对象;必须通过XHR对象本身来确定下一步该怎么做。
这个例子在onreadystatechange事件处理程序中使用了xhr对象,没有使用this对象,原因是onreadystatechange事件处理程序的作用域问题。如果使用this对象,在有的浏览器中会导致函数执行失败,或者导致错误发生。因此,使用实际的XHR对象实例变量是较为可靠的一种方式。
另外,在接收到响应之前还可以调用abort()方法来取消异步请求,如下所示:
xhr.abort();
调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。在终止请求之后,还应该对XHR对象进行解引用操作。由于内存原因,不建议重用XHR对象
XHR的用法详细解读相关推荐
- php return直接输出,PHP中return用法详细解读
原标题:PHP中return用法详细解读 在大部分编程语言中,return关键字可以将函数的执行结果返回,PHP中return的用法也大同小异,对初学者来说,掌握PHP中return的用法也是学习PH ...
- alter在MySQL中是什么意思_MySql之ALTER命令用法详细解读(转)
本文详细解读了MySql语法中Alter命令的用法,这是一个用法比较多的语法,而且功能还是很强大的. USE learning;(自己要提前建好) CREATE TABLE student(id IN ...
- Mysql学习总结(6)——MySql之ALTER命令用法详细解读
MySql语法中Alter命令的用法,这是一个用法比较多的语法,而且功能还是很强大的. [sql]
- 刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!
刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读! OpenStack Stein版本引入了新的多云编排功能,以及帮助实现边缘计算用例的增强功能. OpenStack由一系列相互关 ...
- Android BLE蓝牙详细解读
代码地址如下: http://www.demodashi.com/demo/15062.html 随着物联网时代的到来,越来越多的智能硬件设备开始流行起来,比如智能手环.心率检测仪.以及各式各样的智能 ...
- android蓝牙设置特征属性,Android BLE蓝牙详细解读(二)
上篇文章主要介绍了关于BLE的一些基础操作,我们能够大概了解到蓝牙操作的一些流程,上文末介绍了本人的一个BLE开源库,支持蓝牙一对多的连接方式,该库封装了蓝牙的开启.扫描.连接.断开.连接超时...一 ...
- FastQC使用与结果详细解读
FastQC使用与结果详细解读 一 .FastQC用法 简单用法 fastqc -o outputfile inputfile 重要参数 -o 结果文件输出路径,需要自己事先建立好文件夹,默认输出文件 ...
- CutPaste: Self-Supervised Learning for Anomaly Detection and Localization 全文翻译+详细解读
CutPaste: Self-Supervised Learning for Anomaly Detection and Localization 全文翻译+详细解读 文章速览 全文翻译及详细解释 0 ...
- AFL(American Fuzzy Lop)源码详细解读(2)
AFL(American Fuzzy Lop)源码详细解读(2) 本篇是关于 dry run (空跑.演练) 阶段的内容,一直到主循环之前. 多亏大佬们的文章,对读源码帮助很大: https://et ...
最新文章
- Java实用教程笔记 泛型与集合框架
- linux 和windows 下golang安装
- Leetcode 130. 被围绕的区域 解题思路及C++实现
- Indy中判断邮件来源
- WPF 基础控件之Window样式
- 浅谈!important对CSS的重要性
- mat查找多线程并发下大对象导致的堆内存问题
- 阿里历年经典Java面试题汇总
- java生成激活码算法_java实现的AES秘钥生成算法示例
- iPhone设备字体详解
- Go语言安装与环境配置(基于Windows)
- 计算机打不开guest用户,win10系统打不开guest账户的解决方法
- 【股票】融资融券基本概念
- Modulo Summation atcoder abc103
- 云轴科技 ZStack 与和信创天完成兼容性认证,打造稳定安全的桌面云!
- python 抠图源码_比PS还好用!Python 20行代码批量抠图
- matlab中示波器种类,什么是示波器?示波器的种类和使用方法图解
- Win32 编程基础
- 转生活中的各种食品安全问题
- 什么是SSL数字证书