应用ajax处理级联的数据

在前文实现用户注册模块，主要是使用了responseText来处理服务器回传数据，而有时服务器需要回传XML类似复杂些的数据，这时我们就应该使用responseXML,来处理。看看如何做！
还是一样在Eclipse中试验！
我们选择一个网上书店，类似客户可以从前台点击查看图书信息的功能！而图书，包括章节，作者，出版社等信息！
setp1:我们先建立几个实体类，

Section.java书籍章节实体类
package eflylab.ajax.xuanxiangka;
/** *//**
 * 书籍节
 * @author 冯岩
 *
 */
public class Section {
    private String id = "";//节编号
    private String content = "";//说明
    
    public Section() {
        
    }
    public Section(String id, String content) {
        this.id = id;
        this.content = content;
    }
    public String getId() {
        return this.id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getContent() {
        return this.content;
    }
    public void setContent(String content) {
        this.content = content;
    }
}

Chapter.java书籍章实体类
package eflylab.ajax.xuanxiangka;
/** *//**
 * 书籍章
 */
import java.util.*;
public class Chapter {
    private String id = "";//章编号
    private String name = "";//说明
    private Collection sectiones = new ArrayList();
    
    public Chapter() {
        
    }
    public Chapter(String id, String name) {
        this.id = id;
        this.name = name;
    }
    public String getId() {
        return this.id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return this.name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Collection getSectiones() {
        return this.sectiones;
    }
    public void addSection(Section section) {
        if(!sectiones.contains(section.getId()))
            sectiones.add(section);
    }
}

Book.java书籍实体类
package eflylab.ajax.xuanxiangka;
import java.util.*;

public class Book {
    private String title = "";//书名
    private String author = "";//作者
    private String publisher = "";//出版社
    private Collection chapteres = new ArrayList();//目录
    
    
    public Book() {
        
    }
    public Book(String title, String author, String publisher) {
        this.title = title;
        this.author = author;
        this.publisher = publisher;
    }
    public String getTitle() {
        return this.title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getAuthor() {
        return this.author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
    public String getPublisher() {
        return this.publisher;
    }
    public void setPublisher(String publisher) {
        this.publisher = publisher;
    }
    public Collection getChapteres() {
        return this.chapteres;
    }
    public void addChapter(Chapter chapter) {
        if(!chapteres.contains(chapter.getId()))//如果不包括
            chapteres.add(chapter);
    }
}

BookService.java书籍服务类
package eflylab.ajax.xuanxiangka;
import java.util.*;

public class Book {
    private String title = "";//书名
    private String author = "";//作者
    private String publisher = "";//出版社
    private Collection chapteres = new ArrayList();//目录
    
    
    public Book() {
        
    }
    public Book(String title, String author, String publisher) {
        this.title = title;
        this.author = author;
        this.publisher = publisher;
    }
    public String getTitle() {
        return this.title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getAuthor() {
        return this.author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
    public String getPublisher() {
        return this.publisher;
    }
    public void setPublisher(String publisher) {
        this.publisher = publisher;
    }
    public Collection getChapteres() {
        return this.chapteres;
    }
    public void addChapter(Chapter chapter) {
        if(!chapteres.contains(chapter.getId()))//如果不包括
            chapteres.add(chapter);
    }
}

这里我们采用JSP的方式来生成XML文档！getBook.jsp用于生成XML文档

<?xml version="1.0" encoding="GB2312"?>

<%@ 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"%>


<%
BookService service = new BookService();
Book[] bookes = service.getAllBook();
pageContext.setAttribute("bookes",bookes);
%>


<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文档如下：
测试页面

<%@ 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 += "&nbsp;" + 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>

<body><center>
    <p><a href="javascript:void(0)" onClick="doViewChapter()">目录</a>&nbsp;译者序&nbsp;作者序&nbsp;前言&nbsp;书皮&nbsp;书评
        <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">&nbsp;</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>作者：</td>
            <td>&nbsp;</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>出版社：</td>
            <td>&nbsp;</td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td valign="top">章节</td>
            <td>&nbsp;</td>
        </tr>
    </table>
        </span>
</center>
</body>
</html>

效果：