AJAX(四)：XHR2支持的方法

XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来。而XMLHttpRequest 2级则进一步发展了XHR

FormData
FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利

//通过append方法增加信息 append()方法接收两个参数：健和值
var data = new FormData();
data.append('name', 'Nicholas');

//通过FormData构造函数传入表单元素
var data = new FormData(document.form[0])

xhr.open('post', 'postexample', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息

 

overrideMimeType()方法

用于重写XHR响应的MIME类型，因为返回响应的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME
类型是很有用的

var xhr = createXHR();
xhr.open('get', 'text.php', true);
xhr.overrideMimeType('text/xml');
xhr.send(null);

 

进度事件
1）load事件。最终,Firefox在简化异步交互模型中实现了load事件，用以替代readystatechange事件。响应接收完毕后将触发load事件，因此也就没有必要去检查readyState属性了

var xhr = createXHR(); 
xhr.onload = function(){ 
    if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){ 
        alert(xhr.responseText); 
    }else{ 
        alert("Request was unsuccessful : " + xhr.status); 
    } 
} 
xhr.open('get', 'altevents.php', true);
xhr.send(null);

只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件，但必须要检查status属性，才能确定是否真的已经可用了，firefox,opera,chrome,safari都支持load事件
2）progress事件
这个事件会在浏览器接收到新数据期间周期性地触发，而progress事件会接收到一个event对象，其target属性是xhr对象，但包含着三个额外的属性：
lengthComputable：是一个表示进度信息是否可用的布尔值
position：表示意境接收的字节数
totalSize：表示根据content-length响应头部确定预期字节数。
eg:

var xhr = createXHR(); 
xhr.onload = function(){ 
    if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){ 
        alert(xhr.responseText); 
    }else{ 
        alert("Request was unsuccessful : " + xhr.status); 
    } 
} 
xhr.onprogress = function(){ 
    var divStatus = document.getElementById('status');
    if(event.lengthComputable){
        divStatus.innerHTML = 'Received' + event.position + 'of' + event.totalSize + ' bytes'
    }
} 
xhr.open('get', 'altevents.php', true);
xhr.send(null);

为确保正常执行，必须在调用open()前添加onprogress事件