学习笔记:XMLHttpRequest
- 特点:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
- 创建XMLHttpRequest对象
- xmlhttp=new XMLHttpRequest();
- IE5 和 IE6,使用 ActiveX 对象
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- 经典代码示例:
//创建XMLHttpRequest对象
if(window.ActiveXObject){ //适用于IE6之前xmlhr=new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){xmlhr=new XMLHttpRequest();
}if (xmlhr!=null){xmlhr.onreadystatechange=state_Change;xmlhr.open("GET",url,true);xmlhr.send(null);
}
else{alert("Your browser does not support XMLHTTP.");
}function state_Change(){if (xmlhr.readyState==4){// 4 = "loaded"if (xmlhr.status==200){// 200 = OK// ...our code here...document.getElementById('T1').innerHTML=xmlhr.responseText;}else{alert("Problem retrieving XML data");}}
}
XMLHttpRequest 对象的状态(readyState):
- 0 - 未初始化(uninitialized)。对象已创建或已被 abort() 方法重置,但未调用 open() 方法。
- 1 - 启动(open)。已调用 open() 方法,但未调用 send() 方法。
- 2 - 发送(send)。已调用 send() 方法,但未收到响应。
- 3 - 接收(receiving)。已经接收部分数据。
- 4 - 完成(Loaded/complete)。已经接收到全部数据,并且可以在客户端使用。
XMLHttpRequest对象提供的事件处理:
onloadstart
: 当请求开始时触发;onprogress
: 在请求过程中持续触发,用于跟踪进度;onabort
: 当请求被中止时触发;onerror
: 当请求发生错误时触发;onload
: 当请求成功完成时触发;ontimeout
: 当请求超时时触发;onloadend
: 当请求结束时触发,不论成功或失败都会触发;- onreadystatechange:
readyState
属性发生变化时触发;
XMLHttpRequest发起http请求时的方法:
- open(method, url, async)
- method: 请求方式,"GET"、"POST"等;
- url: 请求地址;
- boolean,是否异步;当true时,send方法后继续执行,是防止代码停止的最安全的方法;当false时,可以省去onreadystatechange代码,若是请求失败不再执行的话选false。
- send(data)
- data: 可选参数,发送请求时传递数据;
- setRequestHeader(header, value)
- 设置请求头消息,如“Content-Type”等;
- header: 请求字段,value:字段值
- abort()
- 终止当前请求;
XMLHttpRequest接收数据时的方法:
responseText
: 返回作为字符串形式的响应数据;responseXML
: 如果服务器返回的数据是 XML 格式,可以使用此属性获取解析后的 XML 文档;response
: 返回一个包含响应数据的属性,其类型根据响应的Content-Type
自动转换;status
: 返回响应的 HTTP 状态码;statusText
: 返回 HTTP 状态码的文本描述;getAllResponseHeaders()
: 返回包含所有响应头信息的字符串;getResponseHeader(header)
: 返回指定响应头的值;