HTML5学习 之 XMLhttpRequset level1 和 level2的那些事

XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。
最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。
但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5的概念形成后,W3C开始考虑标准化这个接口。2008年2月,就提出了XMLHttpRequest Level 2 草案。

一、XMLHttpRequest对象

 //新建XMLHttpRequest的实例
  var xhr = new XMLHttpRequest();
    //发出HTTP请求。
  xhr.open('GET', 'api.json');
  xhr.send();
//监控XMLHttpRequest对象的状态变化,指定回调函数。
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
      alert( xhr.responseText );
    } else {
      alert( xhr.statusText );
    }
  };

上面的代码包含了XMLHttpRequest level1 对象的主要属性:

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

二、XMLHttpRequest level1 的缺点

  • 只支持文本数据的传送,无法用来读取和上传二进制文件。
  • 传送和接收数据时,没有进度信息,只能提示有没有完成。
  • 受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。

三、XMLHttpRequest level2的功能

XMLHttpRequest level2对象,针对XMLHttpRequest level1的缺点,做出了大幅改进。

1. 可以设置HTTP请求的时限。
增加了timeout属性,可以设置HTTP请求的时限。
  

xhr.timeout = 3000;
    //将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。
    //ontimeout事件,用来指定回调函数。
  xhr.ontimeout = function(event){
    alert('请求超时!');
  }

2. 可以使用FormData对象管理表单数据。

//新建一个FormData对象。
  var formData = new FormData();
//append 添加表单项。
  formData.append('username', '张三');
  formData.append('id', 123456);
  xhr.send(formData);

3. 可以上传文件。

//假定files是一个"选择文件"的表单元素(input[type="file"]),我们将它装入FormData对象。
  var formData = new FormData();
  for (var i = 0; i < files.length;i++) {
    formData.append('files[]', files[i]);
  }
  xhr.send(formData);

4. 可以请求不同域名下的数据(跨域请求)。

服务器端进行header设置。
见我的另外一博客 [CORS-AJAX POST跨域解决方案][1]

5. 可以获得数据传输的进度信息。

XMLHttpRequest Level2对象,传送数据的时候,有一个progress事件,用来返回进度信息。

它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。
我们先定义progress事件的回调函数。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后,在回调函数里面,使用这个事件的一些属性。

function updateProgress(event) {
    if (event.lengthComputable) {
      var percentComplete = event.loaded / event.total;
    }
  }

上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。

与progress事件相关的,还有其他五个事件,可以分别指定回调函数:

  1. load事件:传输成功完成。
  2. abort事件:传输被用户取消。
  3. error事件:传输中出现错误。
  4. loadstart事件:传输开始。
  5. loadEnd事件:传输结束,但是不知道成功还是失败。

标签: none

添加新评论