NET中用JavaScript来创建XMLHttpRequest 的Ajax开发介绍

首先，我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求， XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。

后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

 

对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：

Ø         xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0

Ø         xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

Ø         xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

 

由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

 

对于Mozilla﹑Netscape﹑Safari等浏览器，创建XMLHttpRequest 方法如下：   xmlhttp_request = new XMLHttpRequest();

 

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式： 

try{

if( window.ActiveXObject )

{

for( var i = 5; i; i-- )

{

try{

I      f( i == 2 )

{

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

}

else

{

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312");

}

break;

}

catch(e)

{

xmlhttp_request = false;

 }

 }

}

else if( window.XMLHttpRequest )

{

 xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType)

{

 xmlhttp_request.overrideMimeType('text/xml'); }

}

}

catch(e)

{

 xmlhttp_request = false;

}

在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true);

xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){

// JavaScript代码段

};

首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：

Ø         0 (未初始化)

Ø         1 (正在装载)

Ø         2 (装载完毕)

Ø         3 (交互中)

Ø         4 (完成)

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

if (http_request.readyState == 4) { // 收到完整的服务器响应 }

else { // 没有收到完整的服务器响应 }

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据：

(1) 以文本字符串的方式返回服务器的响应

(2) 以XMLDocument对象方式返回响应

 

代码样例：

    <script  type="text/javascript">

<!--

//得到内容容器和提示框节点

var content=document.getElementById("content");

var tip=document.getElementById("tip");

function getPage(page){

    tip.style.display="inline";

    var key=document.forms.form1.title.value;

    //创建浏览器兼容的XMLHttpRequest对象

    var xmlhttp;

    try{

        xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

    }catch(e){

        try{

            xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            try{

                xmlhttp= new XMLHttpRequest();

            }catch(e){}

        }

    }

    //定义XMLHttpRequest对象的事件处理程序

    xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readyState==4){

            //关闭显示条

            tip.style.display="none";

            if(xmlhttp.status==200){

                //当加载成功时将内容显示于页面

                content.innerHTML=xmlhttp.responseText;

            }else{

                //否则弹出错误信息

                alert(xmlhttp.status);

            }

        }

    }

    //创建一个连接

    xmlhttp.open("get","show.aspx?page="+page+"&key="+key);

    //发送请求

    xmlhttp.send(null);

 

}

-->

</script>

show.aspx

private void Page_Load(object sender, System.EventArgs e)

{

     Response.Write(“你好”);

}