跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例（第三部分）
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
1.1 跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应
用示例(第三部分)
1.1.1 对前面的XML响应加以改进以
表格
关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载
的形式显示输出
1、在页面中增加一个parseXMLResponseInTable的JavaScript方法
function parseXMLResponseInTable()
{
var dataArray = httpRequest.responseXML.getElementsByTagName("data"); //
var dataArrayLen = dataArray.length;
var insertData = ""+
"| XML的处理结果 |
|---|
";
for (var i=0; i";
insertData =insertData+"" + dataArray[i].tagName + " | ";
insertData =insertData+"" + dataArray[i].firstChild.data + " | ";
insertData =insertData+"";
}
}
insertData =insertData+"
";
//使用HTML标签来更新一个标签元素
mdiv = document.getElementById("showResultMessage");
mdiv.innerHTML = insertData;
}
对上面的代码进行说明:
(1)"dataArray"作为所有节点的数组(不是节点数据，只是节点)。"dataArrayLen"是这个数组的长度，用于我们的循环。"insertData"则是一个表格的开头的HTML。
1 杨教授工作室，版权所有，盗版必究， 1/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
(2)我们的第二步则是遍历所有的元素(通过变量"dataArray")并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个元素的文本包含进这个表格数据节点，并将这些都添加进变量"insertData"。因此，每循环一次，变量insertData将添加一行包含元素名称和内容的新数据。
)新数据行添加完后，我们插入一个""结束标签到变量"insertData"。这完成了这(3
个表格。
(4)最后一步需要我们将这个表格放到页面上------这很简单，我们通过函数document.getElementById()取得DIV "userIdMessage "并将变量"insertData"中的HTML插进去。
2、修改processHttpResponse方法以对上面的方法进行调用
function processHttpResponse ()
{
if (httpRequest.readyState == 4)
{
if (httpRequest.status == 200)
{ //检查是否成功接收了服务器响应
//parseXMLResponseInText();
parseXMLResponseInTable();
}
else if(httpRequest.status == 404)
{
alert("没有找到与所请求的文件相匹配的资源～");
}
else
{
alert("你所请求的页面发生异常，错误代码为:
"+httpRequest.status);
}
}
2 杨教授工作室，版权所有，盗版必究， 2/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
else
{
document.getElementById("userIdMessage").innerHTML =
"检测中，请稍等...";
}
}
3、再执行本页面将出现下面的表格显示的结果
:8080/StrutsAJAXWebApp/index.jsp
因为我们在服务器端的Action类程序中的输出实际为下面的形式，其中的“XXX”为我们所获得的用户提交的值。
XXX
XXX
1.1.2 将服务器端返回的XML文档中的标签改变为更一般的形式
1、如果我们要求在服务器端实际返回的XML响应的结果为下面的格式------两个不同的子标签
XXX
XXX
其中的“XXX”为我们所获得的用户提交的值。
3 杨教授工作室，版权所有，盗版必究， 3/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
2、则应该怎么实现呢,
(1)修改服务器端CreateXMLBean类中的createXMLText方法为下面的代码
public String createXMLText(String inputCityName)
{
StringBuffer oneStringBuffer=new StringBuffer("");
oneStringBuffer.append(""+inputCityName+"");
oneStringBuffer.append(""+inputCityName+"");
oneStringBuffer.append("");
return oneStringBuffer.toString();
}
(2)修改webajax.js中的parseXMLResponseInTable 方法为下面的
parseXMLResponseInTableTwo方法
function parseXMLResponseInTableTwo()
{
var dataArray =
httpRequest.responseXML.getElementsByTagName("message")[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = ""+
"| XML的处理结果 |
|---|
";
for (var i=0; i";
insertData =insertData+"" + dataArray[i].tagName + " | ";
insertData =insertData+"" + dataArray[i].firstChild.data + " | ";
insertData =insertData+"";
}
}
4 杨教授工作室，版权所有，盗版必究， 4/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
insertData =insertData+"
";
//使用HTML标签来更新一个标签元素
mdiv = document.getElementById("showResultMessage");
mdiv.innerHTML = insertData; }
(3)修改processHttpResponse 方法为下面的
function processHttpResponse ()
{
if (httpRequest.readyState == 4)
{
if (httpRequest.status == 200)
{ //检查是否成功接收了服务器响应
// parseXMLResponseInText(); // parseXMLResponseInTable();
parseXMLResponseInTableTwo();
}
else if(httpRequest.status == 404)
{
alert("没有找到与所请求的文件相匹配的资源～");
}
else
{
alert("你所请求的页面发生异常，错误代码为:"+httpRequest.status);
}
}
else
{
document.getElementById("showResultMessage").innerHTML = "检测中，请稍等...";
}
}
5 杨教授工作室，版权所有，盗版必究， 5/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
(4)再执行本页面:8080/StrutsAJAXWebApp/index.jsp
3、如果我们要求在服务器端实际返回的XML响应的结果为下面的格式
XXX
XXX
其中的“XXX”为我们所获得的用户提交的值。
则应该怎么实现呢,
(1)修改服务器端CreateXMLBean类中的createXMLText方法为下面的代码
public String createXMLText(String inputCityName)
{
StringBuffer oneStringBuffer=new StringBuffer("");
oneStringBuffer.append(""+
inputCityName+"");
oneStringBuffer.append(""+
inputCityName+"");
oneStringBuffer.append("");
return oneStringBuffer.toString();
}
(2)修改webajax.js中的parseXMLResponseInTableTwo方法为下面的
parseXMLResponseInTableThree方法
function parseXMLResponseInTableThree()
6 杨教授工作室，版权所有，盗版必究， 6/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
{
var dataArray =
httpRequest.responseXML.getElementsByTagName("message")[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = ""+
"| XML的处理结果 |
|---|
";
for (var i=0; i";
insertData =insertData+"" + dataArray[i].tagName + " | ";
insertData =insertData+"" + dataArray[i].firstChild.data + " | ";
insertData =insertData+"" +
dataArray[i].getAttribute("attributeName")+ " | ";
insertData =insertData+"";
}
}
insertData =insertData+"
";
//使用HTML标签来更新一个标签元素
mdiv = document.getElementById("showResultMessage");
mdiv.innerHTML = insertData;
}
(3)修改processHttpResponse 方法为下面的
function processHttpResponse (){
if (httpRequest.readyState == 4)
{
if (httpRequest.status == 200)
{ //检查是否成功接收了服务器响应
// parseXMLResponseInText();
// parseXMLResponseInTable();
// parseXMLResponseInTableTwo();
7 杨教授工作室，版权所有，盗版必究， 7/9页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
parseXMLResponseInTableThree();
}
else if(httpRequest.status == 404)
{
alert("没有找到与所请求的文件相匹配的资源～");
}
else
{
alert("你所请求的页面发生异常，错误代码为:"+httpRequest.status);
}
}
else
{
document.getElementById("showResultMessage").innerHTML = "检测中，请稍等...";
}
}
(4)再执行本页面:8080/StrutsAJAXWebApp/index.jsp
4、利用CSS对我们前面的表格美化一下
然后再执行本页面:8080/StrutsAJAXWebApp/index.jsp
9 杨教授工作室，版权所有，盗版必究， 9/9页
浙公网安备 33021202002483