XMLHttpRequest

level1

level2

 

一、老版本XMLHttpRequest

首先新建一个XMLHttpRequest的实例,然后向远程主机发送HTTP请求

var xhr = new XMLHttpRequest();
xhr.open('GET','example.php');
xhr.send();

接着等待远程主机做出回应，这时需要监控XMLHttpRequest对象的状态变化，指定回调函数

if(xhr.readyState==4 && xhr.status == 200){
    alert(xhr.responseText);
}else{
    alert(xhr.statusText);
}

XMLHttpRequest对象的主要属性

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

老版本的缺点：

• 只支持文本数据的传输，无法解读二进制文件
• 传输数据和接收数据的时候没有用进度信息，只能提示没有完成
• 收到“同域限制”，只能向同一域名的服务器请求数据

二、新版本的功能

• 可以设置http请求的时限
• 可以使用FormData对象管理表单数据
• 可以上传文件
• 可以跨域请求
• 可以获取服务器二进制数据
• 可以获取数据传输的进度信息

1.http请求时限

xhr.timeout = 3000; //最长等待时间设为3000毫秒。
过了这个时限，就自动停止HTTP的请求。与之配套的还有一个timeout事件，用来指定回调函数

xhr.ontimeout = function (evnet){
   alert("请求超时")
}

2.FormData对象

为了方便表单处理，H5新增一个FormData对象，可以模拟表单

// 首先新建一个FormData对象
var formData = new FormData();
// 然后为它添加表单项
formData.append("username","张三")；
formData.append('id',123456);
// 然后传送这个FormData对象，和网页提交表单的效果完全一样
xhr.send(formData);

FormData对象也可以获取网页表单的值

 var form = document .getElementById("myform");
 var formData = new FormData(form);
 formData.append(‘secret’，‘123456’);
 xhr.open('post',form.action);
 xhr.send(fromData);

3.上传文件

4.资源跨域共享

使用此功能的前提是浏览器必须支持这个功能，而且服务器必须同意这种跨域。如果满足这些要求，则代码的写法与不跨域是一样的

xhr.open（‘GET’，'http://other.server/and/path/to/script'）;

5.接收二进制数据

方法A：改写MIMEType
这里分成2种做法。比较老的是改写MIMEType，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集

xhr.overrideMimeType('text/plain;charset = x-user-defined');
// 然后使用responseText属性接收服务器返回的二进制数据
var binStr = xhr.responseText;

由于时浏览器把他当成文本数据，所以还必须要一个个字节的还原成二进制数据。

for（var i=0；len = binStr.length;i<len;++i ）{
	var c = binStr.charCodeAt(i);
	var byte = c &0xff;
}

最后一行的运算符“ c &0xff”，表示在每个字符的2个字节之中，只保留一个字节，将抢一个字节扔掉。原因是浏览器解读字符的时候，会把字符自动解读成Unicode的0xF700-0xF7ff区段。

方法B：responseType属性
如果服务器返回的数据是文本，responseType属性的值为“Text”，是默认值。比较新的浏览器还支持其他的值，可以接收其他格式的数据。
可以将responseType设为blob，表示服务器传回的二进制数据对象

var xhr = new XMLHttpRequest（）；
xhr.open('GET','/path/to/image.png');
xhr.responseType='blob';

接收数据的时候可以用浏览器自带的Blob对象即可

var blob = new Blob([xhr.reponse],{type:'img/png'});

注意读取的是xhr.response,而不是xhr.responseText。
还可以将responseType设为arraybuffer，把二进制数据封装在一个数组里

var xhr = new XMLHttpRequest（）；
xhr.open('GET','/path/to/image.png');
xhr.responseType='arraybuffer';

接收数据 的时候 ，需要遍历整个数组；

var arraybyuffer = xhr.response;
if(arraybuffer){
 	var bytebuffer = new Unit8Array（arraybuffer）;
	for (var i=0;i<byteArray.byteLength;i++){
	    // do something
	}
}

三、XMLHttptRequest的属性和方法

1.Open（String method,String url,Boolean ansynch,String username,String password）

指定和服务器交互的HTTP方法，url地址及其他请求消息。
其中method表示HTTP请求的方法，支持所有的http的方法，一般使用“GET”，“POST”url表示请求的服务器的地址。Asynch表示是否采取异步方式，true表示异步，false表示同步后两个参数可以不指，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码

2.Send(content)

向服务器发送请求，如果采用异步方式，该方法会立即返回
content 可以不指定或指定为null表示不发送数据，其对象可以是DOM对象，输入流或是字符串。

3.setRequestHeader（String header， String value）

设置HTTP请求中指定头部header的值为value，该方法需要在open方法以后调用

4.getAllResponseHeader()

返回包含http的所有响应头包括Content-Length，Date，url等内容。返回值是一个字符串，包含所有头部信息，其中的每一个健名和键值用冒号分开，每一组键之间用CR和LF（回车+换行）来分隔。

5.Abort()

停止当前的http请求，对应的XMLHttpRequest对象会复位到Wie初始化的状态

6.responseText

服务器响应的文本内容

7.responseXML

服务器响应的xml内容对应的DOM对象

8.Status

服务器返回的http状态码；200成功，404找不到，500内部服务器错误

9.statusText

服务器返回状态码的文本信息

10.readyState

表示XMLHttpRequest对象的状态

0：未初始化，对象已创建，未调用open
1：open方法成功调用，send方法未调用
2：send方法已经调用，尚未开始接收数据
3：正在接收数据。http响应头信息已经接受，响应数据尚未接收完成
4：完成。响应数据接受完成

11.OnReadyStatechange

请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的js函数）