跟我学AJAX技术如何应用AJAX实现无刷新查询功能的Web应用示例第一部分.docx

html>

注意：

上面的带有id的div标签的主要作用是实现对显示的内容进行定位。

5、在项目中添加webajax.js文件

指定文件名称为webajax.js，并修改该JavaScript文件的缺省编码为gb2312。

否则在JavaScript中如果有中文，将会出现乱码

6、编程该webajax.js文件中的功能实现代码

利用JavaScript向Servlet发送请求和获得服务器端的响应

varhttpRequest;

functionsendData（）

{

varcityNameInputValue=document.getElementById（"cityNameInputID"）.value;

if（（cityNameInputValue==null）||（cityNameInputValue==""））

{

alert（"您没有输入城市的名称！

"）;

return;

}

varrequestURL="/StrutsAJAXWebApp/searchCity.do?

cityName="+

cityNameInputValue;

/**

也可以采用如下的实现代码：

varrequestURL="/StrutsAJAXWebApp/searchCity.do?

cityName="+

document.all.cityNameInputID.value;

*/

httpRequest=getHTTPRequestObject（）;

httpRequest.onreadystatechange=processHttpResponse;

httpRequest.open（"GET",requestURL,true）;

httpRequest.send（null）;

}

functiongetHTTPRequestObject（）

{

varhttpRequestObject;

if（window.XMLHttpRequest）

{//Mozilla,Safari,...

httpRequestObject=newXMLHttpRequest（）;

}

elseif（window.ActiveXObject）

{//IE

try

{

httpRequestObject=newActiveXObject（"Microsoft.XMLHTTP"）;

}

catch（e）

{

try

{

httpRequestObject=newActiveXObject（"Msxml2.XMLHTTP"）;

}

catch（e2）

{

alert（"您的浏览器有问题！

"）;

}

}

}

returnhttpRequestObject;

}

7、编程前面的processHttpResponse函数以获得从Servlet中所返回的响应，并对结果进行处理

functionprocessHttpResponse（）

{

if（httpRequest.readyState==4）

{

if（httpRequest.status==200）

{//检查是否成功接收了服务器响应

parseXMLResponseInText（）;

}

elseif（httpRequest.status==404）

{

alert（"没有找到与所请求的文件相匹配的资源！

"）;

}

else

{

alert（"你所请求的页面发生异常，错误代码为：

"+httpRequest.status）;

}

}

else

{

document.getElementById（"showResultMessage"）.innerHTML=

"正在查询中，请稍等...";

}

}

functionparseXMLResponseInText（）

{

//获得data标签的集合

varmessage=httpRequest.responseXML.getElementsByTagName（"data"）;

varstr=newArray（）;

varoutTextDivTag="";

for（vari=0;i

{

str[i]=message[i].firstChild.data;//获得data标签集合中的每个元素的值

outTextDivTag=outTextDivTag+"

}

mdiv=document.getElementById（"showResultMessage"）;

mdiv.innerHTML=outTextDivTag;

}

注意：

上面的代码其实是产生下面的效果