XMLHttpRequest对象

1、XMLHttpRequest对象的由来
XMLHttpRequest是一个浏览器脚本语言能够适应的浏览器接口,使得脚本能够发送http/https请求到服务器,并且能把服务器响应加载到脚本里.
所有浏览器都支持XMLHttpRequest.Ajax基于XMLHttpRequest实现的方法.
为了安全考虑,XMLHttpRequest遵循浏览器的同源策略.
浏览器内部对象，可以利用此内部对象使用javascript向服务器发送请求。
此对象暴露各种属性、方法和事件以便脚本处理和控制HTTP请求与响应。
2、XMLHttpRequest对象的属性
2.1、readyState
取值0~5：
0 : 描述一种”未初始化”状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1 : 描述一种”发送”状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 : 描述一种”发送”状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 : 描述一种”正在接收”状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4 : 描述一种”已加载”状态；此时，响应已经被完全接收。
2.2、responseText
客户端接收到的HTTP响应的文本内容。
当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3时，responseText包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
2.3、responseXML
对请求的响应，解析为XML并作为Document对象返回。
2.4、status
由服务器返回的 HTTP 状态代码
2.5、statusText
这个属性用名称而不是数字表示请求的 HTTP 的状态代码
3、XMLHttpRequest对象的事件
onreadystatechange
4、XMLHttpRequest对象的方法
abort\getAllResponseHeaders\getResponseHeader\open\send\setRequestHeader
5、新老版XMLHttpRequest对比
5.1、老版本
5.1.1、使用方法:

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest实例
xhr.open('GET', 'example.php');//向远程主机发出一个HTTP请求
xhr.send();
xhr.onreadystatechange = function(){
　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　//请求成功状态
　　} else {
　　　　//其他请求状态
　　}
};

5.1.2、老版本的缺点:
a)、只支持文本数据的传送,无法用来读取和上传二进制文件
b)、传送和接收数据时,没有进度信息,只能提示有没有完成
c)、受到同源策略限制,只能向同一域名的服务器请求数据

5.2、新版本
5.2.1、新增特性:
a)、可以设置HTTP请求的时限。
b)、可以使用FormData对象管理表单数据。
c)、可以上传文件。
d)可以请求不同域名下的数据（跨域请求）。
e)可以获取服务器端的二进制数据。
f)可以获得数据传输的进度信息。
5.2.2、新增特性的功能介绍
a)、可以设置HTTP请求的时限。

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest实例
xhr.timeout = 3000;//设置请求最长等待时间,超过此时间,就自动停止HTTP请求
xhr.ontimeout = function(){
    //请求超时的回调处理
}
xhr.open('GET', 'example.php');//向远程主机发出一个HTTP请求
xhr.send();

浏览器兼容性上有待提高
b)、可以使用FormData对象管理表单数据。
html4表单提交使用传统的

标签创建的表单,而使用此form标签创建的表单,提交之后会跳到提交页面。
html5新增了FormData对象,可以配合新版XMLHttpRequest模拟表单提交,并能实现提交不跳转页面.
使用方法如下:

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest实例
var formData = new FormData();//实例化一个FormData对象
formData.append('aid','52430');//为新建FormData对象添加表单项
formData.append('title','demo');
xhr.open('POST', 'example.php');
xhr.send(formData);//发送formData对象

使用此方法效果与直接提交表单效果一样,但是达到了不刷新页面的功能.
FormData对象不仅能模拟表单提交,其还可以直接对现有表单进行操作:

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest实例
var form = $('#testForm');//获取页面中已有form表单
var formData = new FormData(form);//实例化一个FormData对象
formData.append('aid','52430');//为新建FormData对象添加表单项
xhr.open('POST', 'example.php');
xhr.send(formData);//发送formData对象

jquery.form.js插件即是使用FormData加XMLHttpRequest 2实现的无刷新表单提交.
c)、可以上传文件。
新版XMLHttpRequest结合html5的input标签的multipart属性不仅可以发送文本信息,还可以上传文件.
使用方法如下:

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest实例
var files = $('input[type=file]');//获取页面中选中文件
var formData = new FormData();//实例化一个FormData对象
formData.append('nf',files[0]);//上传一个文件,也可以多文件上传
xhr.open('POST', 'example.php');
xhr.send(formData);//发送formData对象

d)可以请求不同域名下的数据（跨域请求）。
新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做”跨域资源共享”（Cross-origin resource sharing，简称CORS）。
使用”跨域资源共享”的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种”跨域”。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
即把域名加入允许访问列表

e)可以获取服务器端的二进制数据。
老版本的只能接受文博数据,新版本的实现了接收二进制数据,接收二进制数据的实现形式有以下两种:
(1)把服务器返回的二进制数据伪装成用户自定义的字符集,然后用responseText属性接收,然后再把此文本数据还原成二进制数据

xhr.overrideMimeType("text/plain; charset=x-user-defined");

(2)使用新增的responseType属性接收数据
把responseType设为blob，表示服务器传回的是二进制对象。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';//把responseType设为blob，表示服务器传回的是二进制对象。
var blob = new Blob([xhr.response], {type: 'image/png'});//接收数据的时候，用浏览器自带的Blob对象

也可以将responseType属性值设置为arraybuffer,把二进制数据封装在一个数组里

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'arraybuffer';//把responseType设为arraybuffer，表示把返回二进制数据装在一个数组里。
var arrayBuffer = xhr.response;//接收数据时,需要遍历数组
if (arrayBuffer) {
　　var byteArray = new Uint8Array(arrayBuffer);
　　for (var i = 0; i < byteArray.byteLength; i++) {
　　　　// do something
　　}
}
xhr.send();

百度一个团队开发的webUploader文件上传组件,其中就有使用新增的responseType属性接收二进制数据的方案.

f)可以获得数据传输的进度信息。
新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。
它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。
使用方法:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.onprogress = updateProgress;//定义progress事件的回调函数。
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {//progress事件的回调
　　if (event.lengthComputable) {
　　　　var percentComplete = event.loaded / event.total;
　　}
}
xhr.send();

参考文章:
XMLHttpRequest Level 2 使用指南

此条目发表在未分类分类目录，贴了标签。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注