今天周末，但是我还得好好总结一下ajax和xml

开始：
  首先来研究一下级联吧：
  知道级联的原理吗？很简单，根据前一个选它有关系的下一个哦，呵呵！
  那做起来代码怎么写呢：肯定一点，必须要用到js技术了，你要有事件的么，你看好了，级联要这样写啊：

javascript：new Option(text, value)

< script >
 function selected(){
  var arr = new  Array();
  arr[ 0 ] = [ " a " , " b " , " c " , " d " ];
  arr[ 1 ] = [ " c++ " , " oracle " , " sql " , " js " ];
  var i = document.form1.selterm.selectedIndex - 1 ; // 这里selectedIndex是什么意思为什么还有减去1呢？
  document.form1.select2.length = 0 ; // 清空
  document.form1.select2.options.add( new  Option( " 请选择 " )); // 不是很懂
  var op;
   for (var j in arr[i]){
   op = new  Option(arr[i][j],arr[i][j]); // ?
   document.form1.select2.options.add(op); // ?
  } 
 }
</ script >
< form name = " form1 "  method = " post " >
< select name = " selterm "  id = " selterm "  onchange = " selected() " >
           < option > 请选择 </ option >
           < option value = " 1 " > 1学期 </ option >
           < option value = " 2 " > 2学期 </ option >
</ select >
< select name = " select2 " >
           < option > 请选择 </ option >
</ select >
</ form >

具体解释：

其实他这里是个js的二维数组，arr[0]=["a","b","c","d"];
arr[1]=["c++","oracle","sql","js"];数组下标为0的有"a","b","c","d";
数组下标为1的有"c++","oracle","sql","js"，
var i=document.form1.selterm.selectedIndex-1;这句话其实跟op=new Option(arr[i][j],arr[i][j]);有关，举个例子，选择1学期的时候，
document.form1.selterm.selectedIndex为1，-1之后为0，然后找到arr[0]，也就是["a","b","c","d"]），然后new出一个Option(arr[0][j],arr[0][j]);
（一个option包含显示的内容和value值。)在清空之后，select下面是空的，必须加一个请选择的option填充，其实把下标修改一下，arr[1]=["a","b","c","d"];
arr[2]=["c++","oracle","sql","js"];这时候var i=document.form1.selterm.selectedIndex就可以了，不需要减1了，不知道你是否明白意思了

准备工作完了，继续ajax来完成级联啊：
   先看java代码：

public   class  OptionServlet  extends  HttpServlet {
     private  Map < String,List < String >>  
        options = new  TreeMap < String,List < String >> ();
     public   void  init(){
        List < String >  list1 = new  ArrayList < String > ();
        list1.add( " 请选择 " );
        options.put( " 0 " , list1);
        List < String >  list2
         = new  ArrayList < String > ();
        list2.add( " 宁波 " );
        list2.add( " 杭州 " );
        list2.add( " 嘉兴 " );
        options.put( " 1 " , list2);
        List < String >  list3 = new  ArrayList < String > ();
        list3.add( " 苏州 " );
        list3.add( " 南京 " );
        list3.add( " 无锡 " );
        options.put( " 2 " , list3);
        List < String >  list4 = new  ArrayList < String > ();
        list4.add( " 杨浦区 " );
        list4.add( " 黄浦区 " );
        list4.add( " 徐汇区 " );
        options.put( " 3 " , list4);
    }
    
     public   void  doGet(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
        doPost(request,response);
        
    }
     public   void  doPost(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
        String province
         = request.getParameter( " province " );
        List < String >  cities
                 = options.get(province);
        request.setAttribute(
                 " cities " , cities);
        RequestDispatcher rd
         = request.getRequestDispatcher(
                 " result.jsp " );
        rd.forward(request, response);
    }

}
js代码：

js代码
function selectCity(){
        var province
        =document.getElementById("province");
        var options=province.options;
        var value="";
        for(var i=0;i<options.length;i++){
            if(options[i].selected){
            value=options[i].value;
            }
        }
        var parameter="province="+value;
        sendAsynchronRequest(
        "selectCity",parameter,selectCityCallBack);
    }    
    function selectCityCallBack(){
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                //document对象
                var citiesDoc=xmlHttp.responseXML;
                var cities
                =citiesDoc.getElementsByTagName("city");
                clearSelect();
                for(var i=0;i<cities.length;i++){
                    var city=cities[i];
                    var name="";
                    var value="";
                    var childNodes=city.childNodes;
                    for(var j=0;j<childNodes.length;j++){
                        var childNode=childNodes[j];
                        if(childNode.nodeType==1){
                            if(childNode.tagName=="name"){
                                name=childNode.firstChild.nodeValue;
                            }
                            if(childNode.tagName=="value"){
                                value=childNode.firstChild.nodeValue;
                            }
                        }
                    }
                    var citySelect
                        =document.getElementById("city"); 
                    var option=new Option(name,value);
                    citySelect.options.add(option);
                    
                }
            }
        }    
    }
    function clearSelect(){
    var city = 
        document.getElementById("city");
    while(city.hasChildNodes()){
        city.removeChild(city.childNodes[0]);
    }
    }

好了就这么简单！呵呵，ajax不难吧！

接下来，我们研究一下xml解析吧：
book.xml

<? xml version = " 1.0 "  encoding = " UTF-8 " ?>
< books >
     < book id = " 001 " >
         < name > 精通Servlet </ name >
         < price > 30.0 </ price >
     </ book >
     < book id = " 002 " >
         < name > 深入浅出Hibernate </ name >
         < price > 40.0 </ price >
     </ book >
     < book id = " 003 " >
         < name > Thinking In Java </ name >
         < price > 50.0 </ price >
     </ book >
     < book id = " 004 " >
         < name > EJB </ name >
         < price > 50.0 </ price >
     </ book >
</ books >

function loadXml(){
        var booksDiv = document.getElementById( " booksDiv " );
        booksDiv = " 正在装载xml,请等待.. " ;
        sendAsynchronRequest(
         " books.xml " , null ,loadXmlCallBack);
    }
    function loadXmlCallBack(){
         if  (xmlHttp.readyState  ==   4 ) {
             if  (xmlHttp.status  ==   200 ) {
                var result = xmlHttp.responseXML;
                var books
                 = result.getElementsByTagName( " book " );
                var booksHtml = " <table border=1 width=30% > "
                              + " <tr><td>编号</td><td>名称</td> "
                              + " <td>价格</td></tr> " ;
                 for (var i = 0 ;i < books.length;i ++ ){
                    var book = books[i];
                    var id = book.getAttribute( " id " );
                    booksHtml = booksHtml + " <tr><td> " + id + " </td> " ;
                    var childNodes = book.childNodes;
                     for (var j = 0 ;j < childNodes.length;j ++ ){
                        var childNode = childNodes[j];
                         if (childNode.nodeType == 1 ){
                             if (childNode.tagName == " name " ){
                                var value = childNode.firstChild.nodeValue;
                                booksHtml = booksHtml + " <td> " + value + " </td> " ;
                            }
                             if (childNode.tagName == " price " ){
                                var value = childNode.firstChild.nodeValue;
                                booksHtml = booksHtml + " <td> " + value + " </td> " ;
                            }
                        }
                    }
                    booksHtml = booksHtml + " </tr> " ;
                }
                booksHtml = booksHtml + " </table> " ;
                var booksDiv
                 = document.getElementById( " booksDiv " );
                booksDiv.innerHTML = booksHtml;
            }
        }
    }

呵呵，也很简单吧！学习java本来就不是难事么，只要你肯动脑子！