应用ajax处理级联的数据
在前文实现用户注册模块,主要是使用了responseText来处理服务器回传数据,而有时服务器需要回传XML类似复杂些的数据,这时我们就应该使用responseXML,来处理。看看如何做!
还是一样在Eclipse中试验!
我们选择一个网上书店,类似客户可以从前台点击查看图书信息的功能!而图书,包括章节,作者,出版社等信息!
setp1:我们先建立几个实体类,
Section.java书籍章节实体类
Chapter.java书籍章实体类
Book.java书籍实体类
BookService.java书籍服务类
这里我们采用JSP的方式来生成XML文档!getBook.jsp用于生成XML文档
<?xml version="1.0" encoding="GB2312"?>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<%@ page contentType="application/xml; charset=GB2312"%>
<%@ page import="eflylab.ajax.xuanxiangka.*"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<%
BookService service = new BookService();
Book[] bookes = service.getAllBook();
pageContext.setAttribute("bookes",bookes);
%>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<bookes>
<logic:iterate name="bookes" id="book">
<book title="<bean:write name='book' property='title'/>" author="<bean:write name='book' property='author'/>" publisher="<bean:write name='book' property='publisher'/>">
<logic:iterate name="book" property="chapteres" id="chapter">
<chapter id="<bean:write name='chapter' property='id'/>" name="<bean:write name='chapter' property='name'/>">
<logic:iterate name="chapter" property="sectiones" id="section">
<section id="<bean:write name='section' property='id'/>"><bean:write name="section" property="content"/></section>
</logic:iterate>
</chapter>
</logic:iterate>
</book>
</logic:iterate>
</bookes>
getBook.jsp运行后得到的XML文档如下:![](https://www.cnblogs.com/images/cnblogs_com/eflylab/200701/20070314165611.jpg)
测试页面
<%@ page contentType="text/html; charset=gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch07--案例:处理级联的数据</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../../ajax.js"></script>
<script language="javascript">
function doViewChapter() {
send_request("GET","getBookes.jsp",null,"XML",populateChapter);
}
function populateChapter() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
//window.alert(http_request.responseText);
var doc = http_request.responseXML;
var root = doc.getElementsByTagName("book")[0];
var book_info = document.getElementById("book_info");//book_info为下面的table
book_info.firstChild.childNodes[0].childNodes[1].innerHTML = root.getAttribute("title");
book_info.firstChild.childNodes[1].childNodes[1].innerHTML = root.getAttribute("author");
book_info.firstChild.childNodes[2].childNodes[1].innerHTML = root.getAttribute("publisher");
var chapteres = root.getElementsByTagName("chapter");
var chapterStr = "";
if(chapteres) {
for(var i=0;i<chapteres.length;i++) {
chapterStr += chapteres[i].getAttribute("name")+"<br>";
for(var j=0;j<chapteres[i].childNodes.length;j++) {
chapterStr += " " + chapteres[i].childNodes[j].firstChild.data + "<br>";
}
}
}
book_info.firstChild.childNodes[3].childNodes[1].innerHTML = chapterStr;
document.getElementById("panel").innerHTML = document.getElementById("chapteres").innerHTML;
document.getElementById("panel").style.display = "";
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>
</head>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<body><center>
<p><a href="javascript:void(0)" onClick="doViewChapter()">目录</a> 译者序 作者序 前言 书皮 书评
<hr width="200">
</p>
<span id="panel" style="display:"></span>
<span id="chapteres" style="display:none">
<table width="400" border="0" cellpadding="4" cellspacing="1" bgcolor="#CCCCCC" id="book_info">
<tr bgcolor="#FFFFFF">
<td width="82">书名:</td>
<td width="302"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td>作者:</td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td>出版社:</td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top">章节</td>
<td> </td>
</tr>
</table>
</span>
</center>
</body>
</html>
效果:
还是一样在Eclipse中试验!
我们选择一个网上书店,类似客户可以从前台点击查看图书信息的功能!而图书,包括章节,作者,出版社等信息!
setp1:我们先建立几个实体类,
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
这里我们采用JSP的方式来生成XML文档!getBook.jsp用于生成XML文档
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/images/cnblogs_com/eflylab/200701/20070314165611.jpg)
测试页面
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/images/cnblogs_com/eflylab/200701/20070314165610.jpg)