AJAX基础应用

时间：2022-02-16 12:26:01 | 来源：信息时代

时间：2022-02-16 12:26:01 来源：信息时代

创建XMLHttpRequest方法

XMLHttpRequest类首先由InternetExplorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

对于InternetExplorer浏览器：

xmlhttp_request=newActiveXObject('Msxml2.XMLHTTP.3.0');//3.0或4.0,5.0

xmlhttp_request=newActiveXObject('Msxml2.XMLHTTP');

xmlhttp_request=newActiveXObject('Microsoft.XMLHTTP');

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

对于Mozilla﹑Netscape﹑Safari等浏览器

创建XMLHttpRequest方法如下：xmlhttp_request=newXMLHttpRequest();

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

xmlhttp_request=newXMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

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

try{

if(window.ActiveXObject){

for(vari=5;i;i--){

try{

if(i==2){

xmlhttp_request=newActiveXObject('Microsoft.XMLHTTP');}

else{

xmlhttp_request=newActiveXObject('Msxml2.XMLHTTP.' i '.0');

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

xmlhttp_request.setRequestHeader('Charset','gb2312');}

break;}

catch(e){

xmlhttp_request=false;}}}

elseif(window.XMLHttpRequest)

{xmlhttp_request=newXMLHttpRequest();

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'。

服务器的响应

这需要告诉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时，表示状态正常。

处理从服务器得到的数据

有两种方式可以得到这些数据：

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

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