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

时间: 2024-11-05 11:57:37

XMLHttpRequest level2介绍的相关文章

XMLHttpRequest Level2实现跨域

Html5提供的XMLHttpRequest Level2已经实现的跨域访问以及一些新功能 1.ie10以下版本不支持 2.在服务器端做一些小改动即可: header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET");

【JavaScript】XMLHttpRequest Level2使用指南

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

XMLHttpRequest Level2

本文转自 http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html 感谢作者分享. XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信. 最早,微软在IE 5引进了这个接口.因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生. 但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同.HTML 5的概念形成后,W3C开始考虑标准化这个接口.2008年2月,就

jquery与ajax的XMLHttpRequest对象介绍

首先  认识一个对象 这个对象叫XMLHttpRequest XMLHttpRequest对象可以提供在不刷新页面的情况下向服务器发送异步请求,并且接受服务器端返回的结果.从而实现局部更新当前页面的功能,尽管名为XMLHttpRequest ,但它并不限于和XML文档一起使用,他还可以接受.JSON或HTML等格式的文档数据 ,XMLHttpRequest得到了目前所浏览的较好支持,但他的创建方式在不同浏览器上有一定的差别, 1创建XMLHttpRequest对象的语法 在比较早的版本IE浏览器

前端跨域之html5 XMLHttpRequest Level2

前端代码 var xhr=new XMLHttpRequest(); xhr.open('POST','http://127.0.0.1:8081/ceshi',true); xhr.onreadystatechange=function(){ if(xhr.readyState==4){//响应完毕后 if(xhr.status==200){//http状态码为200时 var result=xhr.responseText;//获取ajax请求的文本内容 console.log(result

Ajax技术总结之XmlHttpRequest

Ajax 1.  什么是ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),XML 指可扩展标记语言 XML 被设计用来传输和存储数据(机构化的) AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下.(异步) 2. 使用XMLHttpRequest对象分为4部完成: 1 .创建XmlHttpRequest对象  2.发送请求 3.

&lt;Web&gt; XmlHttpRequest简介

前言 web开发经常用到的一个技术就是无刷新提交表单,这个一般是利用ajax实现的,而ajax是利用XmlHttpRequest实现的. XMLHttpRequest简介 什么叫无刷新:对用户来说,就是向服务器提交数据的时候,页面不会duang的闪一下(form提交的时候就是这样).对程序员来说,就是客户端不需要向服务端发送整个页面的数据,而只需要发送少量的数据,返回的数据也一样,只需要少量的动态数据就够了,而不需要重载整个页面. XmlHttpRequest是ajax的核心,所以说掌握了Xml

【转载并整理】AJAX XmlHttpRequest对象详解

一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念.XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本. WHATWG组织负责维护一个动态的XHR标准文档.W3C基于WHATWG标准创建了一个固定的规范. 历史 XMLHttpRequ

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.