XMLHttpRequest level2介绍

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



你可能感兴趣的:(XMLhttpREquest,level2)