欢迎来到天天文库
浏览记录
ID:12066579
大小:103.50 KB
页数:9页
时间:2018-07-15
《跟我学ajax技术——如何应用ajax实现无刷新查询功能的web应用示例(第三部分)》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第三部分)1.1.1对前面的XML响应加以改进以表格的形式显示输出1、在页面中增加一个parseXMLResponseInTable的JavaScript方法functionparseXMLResponseInTable(){vardataArray=httpRequest.responseXML.getElementsByTagName("data");//va
2、rdataArrayLen=dataArray.length;varinsertData=""+"XML的处理结果";for(vari=0;i";insertData=insertData+""+dataArray[i].tagNa3、me+"";insertData=insertData+""+dataArray[i].firstChild.data+"";insertData=insertData+"";}}insertData=insertData+"";//使用HTML标签来更新一个标签元素mdiv=document.getElementById("showResultMessage");mdiv.innerHTML=insertData;}对上面的代码进行说明:(1)"da
3、me+"
4、taArray"作为所有节点的数组(不是节点数据,只是节点)。"dataArrayLen"是这个数组的长度,用于我们的循环。"insertData"则是一个表格的开头的HTML。(2)我们的第二步则是遍历所有的元素(通过变量"dataArray")并将数据添加到变量insertData中。这里我们会创建一个表格行,插入一个表格数据节点(td)进去,再将每一个元素的文本包含进这
5、个表格数据节点,并将这些都添加进变量"insertData"。因此,每循环一次,变量insertData将添加一行包含元素名称和内容的新数据。(3)新数据行添加完后,我们插入一个""结束标签到变量"insertData"。这完成了这个表格。(4)最后一步需要我们将这个表格放到页面上------这很简单,我们通过函数document.getElementById()取得DIV"userIdMessage"并将变量"insertData"中的HTML插进去。2、修改processH
6、ttpResponse方法以对上面的方法进行调用functionprocessHttpResponse(){if(httpRequest.readyState==4){if(httpRequest.status==200){//检查是否成功接收了服务器响应//parseXMLResponseInText();parseXMLResponseInTable();}elseif(httpRequest.status==404){alert("没有找到与所请求的文件相匹配的资源!");}else{alert("
7、你所请求的页面发生异常,错误代码为:"+httpRequest.status);}}9杨教授工作室,版权所有,盗版必究,9/9页杨教授工作室精心创作的优秀程序员职业提升必读系列资料else{document.getElementById("userIdMessage").innerHTML="检测中,请稍等...";}}3、再执行本页面将出现下面的表格显示的结果http://127.0.0.1:8080/StrutsAJAXWebApp/index.jsp因为我们在服务器端的Action类程序中的输出实际
8、为下面的形式,其中的“XXX”为我们所获得的用户提交的值。XXXXXX1.1.1将服务器端返回的XML文档中的标签改变为更一般的形式1、如果我们要求在服务器端实际返回的XML响应的结果为下面的格式------两个不同的子标签XXXXXX
此文档下载收益归作者所有