应用ajax处理级联的数据

 

应用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 >

效果：

 

文章出自： http://www.cnblogs.com/eflylab/archive/2007/03/14/674806.html