XMLHttpRequest 详解

最新推荐文章于 2024-08-17 15:52:38 发布

阿昊在

最新推荐文章于 2024-08-17 15:52:38 发布

阅读量1w

点赞数 9

分类专栏： AJAX 文章标签： xmlhttprequest ajax http javascript xml

本文链接：https://blog.csdn.net/m0_48982503/article/details/121699779

版权

AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

XMLHTTPRequest对象

XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生。

AJAX = Asynchronous JavaScript and XML，翻译为：异步的 JavaScript 和 XML。ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。自从有了ajax之后，我们就可以实现异步的加载网页。

XML 指可扩展标记语言（eXtensible Markup Language）。我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信，传输的数据是使用XML的方式，但最终还是会被转换成json数据格式来被我们使用。

XHR的使用流程：

首先我们需要新建一个XMLHttpRequest实例

var xhr = new XMLHttpRequest();

然后，向远程主机发出一个HTTP请求

xhr.open('GET', 'example.php');
xhr.send();

接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数

xhr.onreadystatechange = function(){
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　　alert( xhr.responseText );
　　　　} else {
　　　　　　alert( xhr.statusText );
　　　　}
　　};

上面的代码包含了老版本XMLHttpRequest对象的主要属性：

xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
xhr.status：服务器返回的状态码，等于200表示一切正常。
xhr.responseText：服务器返回的文本数据
xhr.responseXML：服务器返回的XML格式的数据
xhr.statusText：服务器返回的状态文本。

新版本的XMLHttpRequest对象，做出了大幅改进。

可以设置HTTP请求的时限。
可以使用FormData对象管理表单数据。
可以上传文件。
可以请求不同域名下的数据（跨域请求），CORS。
可以获取服务器端的二进制数据。
可以获得数据传输的进度信息。

1，HTTP请求的时限

xhr.timeout = 3000;
xhr.ontimeout = function(event){
alert('请求超时！');
}

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。

2，FormData对象

AJAX操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以模拟表单。

//首先，新建一个FormData对象。
var formData = new FormData();

//然后，为它添加表单项。
formData.append('username', '张三');
formData.append('id', 123456);

//最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。
xhr.send(formData);