Ajax的XMLHttpRequest对象

    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);
        }
    }
}