XMLHttpRequest对象是Ajax的核心,它有许多的属性、方法和事件以便于脚本处理和控制HTTP的请求与响应。下面是有关XMLHttpRequest对象的一些属性、方法和使用的介绍。
1、 Ajax的XMLHttpRequest对象的属性和方法
1. readyState属性
当一个XMLHttpRequest对象被创建后,readState属性的标识了当前对象正处于什么状态,可以通过对该属性的访问,来判断此次请求的状态然后做出相应的操作。readyState属性具体的代表的意义如下表所示。
值 | 说明 |
0 | 未初始化状态:此时,已经创建了一个XMLHttpRequest对象,但是还没有初始化。 |
1 | 准备发送状态:此时,已经调用了XMLHttpRequest对象的open()方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端。 |
2 | 已发送状态:此时,已经通过send()方法把一个请求发送的服务器端,但是还没有收到一个响应。 |
3 | 正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到。 |
4 | 完成响应状态:此时,已经完成了HttpResponse响应的接收。 |
2. responseText属性
responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState属性值为0、1或2时,responseText属性包含一个空字符串;当readyState属性值为3(正在接收)时,响应中包含客户端还未完成的响应信息;当readyState属性值为4(已加载)时,该resoinseText属性才包含完整的响应信息。
3. responseXML属性
只有当readyState属性值为4,并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时,该属性才会值并解析为一个XML文档,否则该属性值为null。如果是回传的XML文档结构不良后者未完成响应回传,该属性值也为null。由此可见,responseXML属性用来描述被XMLHttpRequest解析后的XML文档属性。
4. status属性
status属性描述了HTTP状态代码。注意,仅当readyState属性值为3(正在接收中)或4(已加载)时,才能对此属性进行访问。如果在readyState属性值小于3时,试图存取status属性值,将发生一个异常。
5. statusText属性
statusText属性描述了HTTP状态代码文本,并且仅当readyState属性值为3或4时才可以用。当readyState属性为其他值时试图存取statusText属性值将引发一个异常。
6. onreadystatechange事件
每当readyState属性值发生改变时,就会触发onreadystatechange事件。一般都通过该事件来触发回传处理函数。
7. open()方法
XMLHttpRequest对象是通过调用open(method, uri, async, username, password)方法来进行初始化工作的。调用该方法将得到一个可以用来进行发送(send()方法)的对象。open()方法有5个参数。
(1)method参数是必须提供的,用于指定用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。按照HTTP规范,该参数要大写。
(2)uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI,该地址会被自动解析为绝对地址。
(3)async参数用于指定是否请求是异步的,其默认值为true。如果需要发送一个同步请求,需要把该参数设置为false。
(4)如果需要服务器验证访问用户的情况,那么可以设置userName以及password这两个参数。
8. send()方法
调用open()方法后,就可以通过send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true时,在send()调用后立即返回,否则将会中断直到请求返回。需要注意的是,send()方法必须在readyState属性值为1时,即调用open()方法以后才能调用。在调用send()方法以后到接收到响应信息之前,readyState属性的值将被设为2;一旦接收到响应消息,readyState属性值将会被设为3;直到响应接收完毕,readyState属性的值才会被设为4。
send()方法使用一个可选的参数,该参数可以包含可变类型的数据。用户可以使用它并通过POST方法把数据发送到服务器。另外,可以显示的使用null参数调用send()方法,这与不同参数调用该方法一样。对于大多数其他的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法先设置Content-Type头部。如果send(data)方法中的data参数的类型为DOMString,那么,数据将被编码为UTF-8。如果数据是Document类型,那么将使用由data.xmlEncoding指定的编码串行化该数据。
9. abort()方法
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收,并且将XMLHttpRequest对象设置为初始化状态。
10. setRequestHeader()方法
该方法用来设置请求的头部信息。但readyState属性值为1时,可以在调用open()方法后调用这个方法;否则将得到一个异常。setRequestHeader(header,value)方法包含两个参数:前一个是header键名称,后一个是键值。
11. getResponseHeader()方法
此方法用于检索响应的头部值,仅当readyState属性值是3或4(即在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。此外还可以通过getAllResponseHeader()方法获取所有的HttpResponse的头部信息。
2、 Ajax的XMLHttpRequest对象的使用(一)
这里一个模拟登录为实例。
1. 编写Login.js脚本
/*异步获取信息*/
function Ajax() {
var userName = document.getElementById("txtUserName").value;
var password = document.getElementById("txtPassword").value;
//(1)声明XMLHttpRequest对象
var xmlHttpReq = null;
//(2)给XMLHttpRequest对象赋值
if (window.ActiveXObject) { //IE5和IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); ;
}
else if(window.XMLHttpRequest){ //除IE5和IE6以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest(); //实例化一个XMLHttpRequest对象
}
//(3)使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL
var uri = "/iLogonValidate.aspx?UserName="+userName+"&Password="+password;
xmlHttpReq.open("GET",uri,true); //调用open()方法并采用异步方式
//(4)设置回调函数
xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
//(5)使用send()方法发送请求
xmlHttpReq.send(null); //因为使用GET方法提交,所以可以使用null作为参数调用
//回调函数
function RequestCallBack() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
var responseText = xmlHttpReq.responseText; //responseText属性包含客户端收到的HTTP响应的文本内容
var obj = eval("(" + responseText + ")"); //由于在后台将结果以JSON的形式封装,所以转换JSON对象
if (obj.ValidateResult == "True") {
alert(obj.Message);
}
else {
alert(obj.Message);
}
}
}
}
}
2. 创建iLogonValidate.aspx,编写后台cs代码(接收方)
protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["UserName"];
string password = Request.QueryString["password"];
if (userName == "admin" && password == "123")
{
ResponseResult(true,"登录成功");
}
else
{
ResponseResult(false,"非法用户");
}
}
//返回结果
private void ResponseResult(bool validateResult,string message)
{
string json = string.Format("{{ ValidateResult:\"{0}\",Message:\"{1}\" }}", validateResult,message); //将结果以JSON返回
Response.ContentType = "text/x-json";
Response.Charset = "UTF-8";
Response.Write(json);
Response.End();
}
3、 Ajax的XMLHttpRequest对象的使用(二)
1. 引用HttpRequest.js文件
function HttpRequest()
{
this.targetUrl = null; //目前URL地址,必填
this.method = 'post'; //请求的方式 post或者get
this.param = null; //参数 如:UserID=1&UserName=hqew
this.callBack = null; //回调的方法 如:GetWatchComplete 必填
this.isAsyc = true; //是否异步执行
var xmlHttp = null;
var callBackFunction = null;
if(window.ActiveXObject) {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}
else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}
this.Send = function()
{
callBackFunction = this.callBack;
if(this.param!=null && this.method=='get')
{
this.targetUrl += "?"+ this.param;
}
xmlHttp.open(this.method,this.targetUrl,this.isAsyc);
if(this.isAsyc) //异步
{
xmlHttp.onreadystatechange = this.handleStateChange;
}
if(this.method == 'post')
{
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
}
xmlHttp.send(this.param);
if(!this.isAsyc) //非异步
{
this.handleStateChange();
}
}
this.handleStateChange = function()
{
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 500 )
{
alert('页面源出错!');
}
else if(xmlHttp.status == 200 && callBackFunction!=null) {
callBackFunction(4,xmlHttp.responseText);
}
}
else
{
if( callBackFunction!=null)
{
callBackFunction(xmlHttp.readyState,null);
}
}
}
}
2. 编写Login.js脚本
function Ajax() {
var userName = document.getElementById("txtUserName").value;
var password = document.getElementById("txtPassword").value;
var httpRequest = new HttpRequest();
httpRequest.targetUrl = '/iLogonValidate.aspx';
httpRequest.method = 'get';
httpRequest.param = "UserName=" + userName + "&Password=" + password;
httpRequest.callBack = RequestCallBack;
httpRequest.Send();
}
//回调函数
function RequestCallBack(status, responseText) {
if (status == 4) {
var obj = eval("(" + responseText + ")"); //由于在后台将结果以JSON的形式封装,所以转换JSON对象
if (obj.ValidateResult == "True") {
alert(obj.Message);
}
else {
alert(obj.Message);
}
}
}