XMLHttpRequest对象(简称XHR)是Ajax技术的核心
这里再唠叨一下Ajax:
● AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术
● AJAX 不是新的编程语言,而是一种使用现有标准的新方法
● 尽管在 AJAX 中 X 代表 XML, 但现在 JSON 使用的更多
回到主题
●XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力
● XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容
●尽管名为 XMLHttpRequest,它并不限于和XML文档一起使用:可以接收任何形式的文本文档
XHR的用法
var url='./data.php';
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState === 4){//当请求处理完成时进行操作
//process code
}
}
req.open('GET',url,true);
req.send();
主要的步骤是:1.调用open( )方法启动一个请求,2.调用send( )方法发送请求,3.根据响应做出处理。
open( ) 和send( )
open( )接受三个参数:
1.要发送的请求类型(GET、POST、HEAD…), 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求
2.请求URL,不能是第三方域名,否则会发生跨域限制
3.是否异步发送请求的布尔值(一般为true,异步。)
open不会真正发送请求,而只是启动一个请求以备发送
注意:由于对用户体验的糟糕效果,从Gecko 30.0版本开始,在主线程上的同步请求已经被弃用。
@Gecko
send( )方法接收一个参数,作为请求主体发送的数据:
如果open第一个参数为post,数据以字符串的形式作为send的参数发送给服务器
name=value&anothername=othervalue&so=on
XHR的属性
readyState
readyState=0 未初始化。尚未调用open方法
readyState=1 启动。已经调用open,但是尚未调用send方法
readyState=2 发送。已经调研send放大,但尚未接收到响应
readyState=3 接收。已经接收到部分响应数据
readyState=4 完成。已经接收到全部数据
只要readyState的值改变,就会触发readystatechange事件,所以可以在该事件检测readyState的值并对响应做出相应的处理。
responseText
作为响应主体被返回的文本
responseXML
如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将会保存包含着数据的XML DOM文档
status
响应的HTTP状态码
statusText
HTTP状态的说明
在接收到响应后,第一步是检查status属性,以确定响应是否已经成功返回。
一般来说,可以将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也能够访问了。
注意: 如果服务器不支持 text/xml Content-Type 头,可以使用
req.overrideMimeType(‘text/xml’); 强制 XMLHttpRequest 将响应解析为 XML。
responseType
设置响应类型(XHR2中新增的属性)
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState === 4){
var data=req.response;//获取数据
document.body.innerHTML+=data.id;
}
}
req.open('GET',url+'?'+params.join('&'),true);
req.responseType='json';
req.send();
注意:设置了responseType为json之后,获取数据时是获取req.response的值
而不是req.responseText。而且,不需要再用JSON.parse处理json数据,因为已 经自动处理了
timeout
等待响应多少毫秒之后终止(XHR2中新增的属性)
在给定timeout一个数值之后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而调用ontimeout事件处理程序
....
req.time = 1000;//将超时限制设置为1秒
....
req.ontimeout=function(){
alert('请求超时');
};//当请求超时的时候将触发ontimeout事件
XHR方法
进度监测
进度事件
loadstart 在接收到响应数据的第一个字节时触发
progress 在接收到响应期间持续不断地触发
error 在请求发生错误时触发
abort 在因为调用abort方法而终止连接时触发
load 在接收到完整的响应数据时触发
loaded 在通信完成或者触发error、abort或load事件后触发
progress
分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象
定义progress的回调函数
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,并且包含着三个额外属性:
lengthComputable -> 表示进度信息是否可用的布尔值
totalSize-> 表示根据Content-Length响应头部确定的预期字节数
示例
var xhr = createXHR();
xhr.onload = function(ecent){
if(xhr.status >=200 && xhr.status < 300 || xhr.status==304){
alert(xhr.responseText);
}else{
alert(xhr.status);
}
}
xhr.onprogress = function(event){
var divStatus = document.getElementById('status');
if(event.lengthComputable){
divStatus.innerHTML = 'Recevied' + event.position + 'of' +
event.totalSize + 'bytes';
}
}
xhr.open('GET','altevent.php',true);
xhr.send();
注意:必须在请求调用 open() 之前添加事件监听。否则 progress 事件将不会被触发。
注意:progress 事件在使用 file: 协议的情况下是无效的