34.2.3 处理服务器响应

前面介绍的getServerTime()函数可以调用theHTTPResponse()函数并且对返回的字符串数据进行一些操作。如下例将解释响应并向终端用户显示一个字符串:


function theHTTPResponse(){

if(myReq.readyState==4){

if(myReq.status==200){

var timeString=

myReq.responseXML.getElementsByTagName("timestring")[0];

document.getElementById('showtime').innerHTML=

timeString.childNodes[0].nodeValue;

}

}else{

document.getElementById('showtime').innerHTML=

'<img src="ajax-loader.gif"/>';

}

}


函数中的if…else语句将检查对象的状态;如果对象状态不是4(已完成),函数将显示一段动画((<img src="ajax-loader.gif"/>)。然而,如果myReq的readState是4,将进一步检查来自服务器的状态是不是200(OK)。

如果状态码是200,将创建一个新的变量:timeString。该变量将被赋值为从服务器端脚本返回的XML字符串中的timestring元素值,而该元素值是通过调用myReq对象的responseXML属性的getElementByTagname()方法获得,如下代码所示:


var timeString=myReq.responseXML.getElementsByTagName("timestring")[0];


下一步就是在HTML文件的CSS预定义区域显示该值。在这个例子中,时间值将显示在名为showtime的文档元素中:


document.getElementById('showtime').innerHTML=

timeString.childNodes[0].nodeValue;


到这里,就完成了ajax_functions.js脚本,如程序清单34-2所示。

程序清单34-2 ajax_functions.js代码


function getXMLHTTPRequest(){

var req=false;

try{

/for Firefox/

req=new XMLHttpRequest();

}catch(err){

try{

/for some versions of IE/

req=new ActiveXObject("Msxml2.XMLHTTP");

}catch(err){

try{

/for some other versions of IE/

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

}catch(err){

req=false;

}

}

}

return req;

}

function getServerTime(){

var thePage='servertime.php';

myRand=parseInt(Math.random()*999999999999999);

var theURL=thePage+"?rand="+myRand;

myReq.open("GET",theURL,true);

myReq.onreadystatechange=theHTTPResponse;

myReq.send(null);

}

function theHTTPResponse(){

if(myReq.readyState==4){

if(myReq.status==200){

var timeString=

myReq.responseXML.getElementsByTagName("timestring")[0];

document.getElementById('showtime').innerHTML=

timeString.childNodes[0].nodeValue;

}

}else{

document.getElementById('showtime').innerHTML=

'<img src="ajax-loader.gif"/>';

}

}


接下来的内容将完成该HTML并且结合所有部分创建一个Ajax应用。