1、xmlHttpRequest level1:
xmlHttpRequest是一个浏览器脚本语言,用来给server发送http或者https请求来加载,出于安全考虑,这个只能用于同域访问(还有其他的缺点,比如说不能读取或者上传二进制文件,传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access,后来使用这样的概念形成了msxml库,这就是为什么在以前的IE版本中通过依赖msxml库的控件的形式创建一个XMLhttprequest对象,这个对象在1999年3月份由IE5引入,2006年10月在IE7中正式支持xmlhttprequest对象。
随着jquery,dojo库(框架)的兴起,原生的xmlhttprequest对象更是慢慢地淡出了人们地视线,他们这些库都是将xmlhttprequest进行了封装,暴露出更加好用的方法。2008年2月,W3C推出了xmlhttprequest level2的草案,增加了很多新的特性,今天我们将详细地介绍下这些特性。
首先,我们先回归一下在最初的版本中是怎么使用xmlhttprequest对象的。IE5和IE6是怎么创建的:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
其他的浏览器则通过 var xhr = new XMLHttpRequest()创建。
发送请求 :
xhr.open("GET","test1.txt",true);//启动一个请求准备发送 xhr.send(); //发送请求
接下来就是等待服务器的响应,这期间会有几个状态的变化,每个readyState的变化都会触发下面的方法:
xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 && xhr.status == 200 ) { alert( xhr.responseText ); } else { alert( xhr.statusText ); } };
补充一点内容:
readyState的几个状态值(http的状态请查看《http权威指南》):
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
xhr返回的数据类型:
xhr.responseText:返回的文本数据 xhr.responseXML:返回XML格式的数据 xhr.statusText:返回状态文本。
2、xmlHttpRequest level2
(后文说之的xhr对象之的是level2的)
(1)FormData
web中频繁使用的就是表单数据的序列化了,Level2为此定义了一个FormData,可以通过给这个对象设置的属性,
var formData = new FormData(); formData.append('username', '张三'); formData.append('id', 123456);
也可以使用表单数据预制FormData
var formData = new FormData(document.form[0]);
有了formDat后,就可以传给xhr的send方法。使用FormData的方便之处就是不必明确地在xhr对象上设置头部,即如下:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
注:xhr level1模拟提交表单数据时要加上上述语句,因为post和web表单提交是不同的内容。
(2)timeout
timeout属性最初是在IE8中引入的,后来也被w3c收入到了Level2的规范中,代码片段如下:
xhr.open("GET","test1.txt",true) xhr.timeout = 1000;//1秒后请求失效 xhr.ontimeout = function(){ }
(3)接受二进制数据
方法一:
改写数据的MIMEType,将服务器返回的二进制数据伪装成文本数据,并且告诉浏览器这是用户自定义的字符集,然后,
用responseText属性接收服务器返回的二进制数据。
xhr.overrideMimeType("text/plain; charset=x-user-defined"); var binStr = xhr.responseText;
这时,浏览器把它当做文本数据,所以还必须再一个个字节地还原成二进制数据
for (var i = 0, len = binStr.length; i < len; ++i) { var c = binStr.charCodeAt(i); var byte = c & 0xff; }
方法二:
使用新增的responseType属性。如果服务器返回文本数据,这个属性的值是"TEXT",这是默认值。较新的浏览器还支持其他值,也就是说,可以接收其他格式的数据。你可以把responseType设为 blob,表示服务器传回的是二进制对象
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png'); xhr.responseType = 'blob';
接收数据的时候,用浏览器自带的Blob对象即可。
var blob = new Blob([xhr.response], {type: 'image/png'});
你还可以将responseType设为arraybuffer,把二进制数据装在一个数组里。
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png'); xhr.responseType = "arraybuffer";
接收数据的时候,需要遍历这个数组。
var arrayBuffer = xhr.response; if (arrayBuffer) { var byteArray = new Uint8Array(arrayBuffer); for (var i = 0; i < byteArray.byteLength; i++) { // do something } }
(4)进度信息
xhr level2对象在传送数据的时候,有一个progress对象,用来返回进度信息,分为上传还下载两种情况,下载的progress事件属于
xmlhttprequest对象,上传的属于xmlhttprequest.upload对象
xhr.onprogress = updateProgress; xhr.upload.onprogress = updateProgress; function updateProgress(event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total; } }
还有其他的事件类型:
load事件:传输成功完成。 abort事件:传输被用户取消。 error事件:传输中出现错误。 loadstart事件:传输开始。 loadEnd事件:传输结束,但是不知道成功还是失败。
(5)CORS
下次介绍
参考内容:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
https://dev.opera.com/articles/xhr2/
http://cssor.com/cross-origin-resource-sharing.html
https://xhr.spec.whatwg.org/#interface-formdata
http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.w3school.com.cn/xmldom/dom_http.asp
https://dev.opera.com/articles/dom-access-control-using-cors/
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest