ajax+jsp实现:不提交表单刷新数据省份城市

在客户端页面,我们主要编写了2个javascript函数, 一个用来创建XMLHttpRequest请求和发送请求数据.另一个用来处理返回的xml文档数据. 

     // 从指定URL加载XML文档数据对象。
     // @param url 请求地址
     // @param reqText 请求数据
     function loadXMLDoc(url,reqData) 
     {
           try
           {
                 var xmlHttp;
              if (window.XMLHttpRequest) 
              {
                    // 创建 Mozilla/FireFox平台的 XMLHttpRequest 对象
                         xmlHttp = new XMLHttpRequest();
              } else if (window.ActiveXObject) 
              {
                    // 创建 IE/Windows 平台的XMLHttp对象
                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }
          // 用POST，非异步方式开启请求地址，
          xmlHttp.open("POST", url, false);
          // 设置提交数据的格式为Form表单格式。
          // 如要发送xml格式的数据，将此行注释掉即可。
          // 或者显式指定为"Content-Type", "text/xml; charset=utf-8"
          xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          // 发送数据
          xmlHttp.send(reqData);
                 // 返回xml文档数据对象
                 return xmlHttp.responseXML;
           }catch(exception)
           {
                 //alert(exception);
           }
     }

     // 处理XML文档数据
     function processData(param)
     {
           if ( param==null ) return;
           // 请求参数
           var sParam = "country="+param;
           // 请求地址
           var sUrl = "http://turbo:8080/qis/Ajax.jsp";
           // 加载xml文档数据对象
           var xmlDOM = loadXMLDoc(sUrl,sParam);
           // 下面开始将返回的xml数据解析出来，并添加到列表中。
           var root = xmlDOM.documentElement;
           try
           {
                 document.getElementById("city").length = 0;
                 for (i=0;i<root.childNodes.length;i++)
                 {
                       sValue = root.getElementsByTagName('city')[i].firstChild.data;
                       if(sValue!=null)
                       {
                             //将解析出来的城市名添加到清单列表中
                             document.getElementById('city').length =
                                   document.getElementById('city').length+1;
                             document.getElementById('city').options[i].text=sValue;
                             document.getElementById('city').options[i].value="/sValue;
                       }
                 }
           }catch(exception)
           {
                 //alert(exception);
           }
     }

其中第1个函数用来从指定URL加载XML文档数据对象, 返回一个XML DOM对象, 你可以用标准的dom对象方法来解析其中的数据. 这个方法几乎是通用的, 你也可以将它复制到你的Ajax的页面中使用. 而第2个函数处理返回的DOM数据,并将数据添加到指定的表单元素中显示. 注意, 为了跨浏览器使用, 我们的代码里引用表单元素的方法是document.getElementById. 如果你要将它移植到你的程序中,你得重写xml数据解析的代码. 

在表单元素选择省份的下拉式清单上, 我们加了onchange事件, 将当前所选省份传给processData函数处理, 

  onchange="javascript:processData(this.value)
当选择省份时, 则马上调用processData函数, 从服务器端取数据. 


而对于服务端程序, 为了部署简便, 我采用jsp来编写, 它主要负责处理用户请求, 并返回相应的xml文档数据, 其大致结构如下: 

     // 创建文档对象。
     Document doc = DocumentBuilderFactory.newInstance()
                               .newDocumentBuilder().newDocument();
     // 创建文档对象根元素。
     Element xmlRoot = doc.createElement("result");
     
     String country = request.getParameter("country");
     // 如果是广东省，创建广东省城市数据文档树。
     if ( "GuangDong".equals(country) )
     {
     ...
     }
     // 如果是湖北省，创建湖北省城市数据文档树。
     else if ( "HuBei".equals(country) )
     {
     ...
     }
     // 如果是湖南省，创建湖南省城市数据文档树。
     else if ( "HuNan".equals(country) )
     {
     ...
     }

   // 如果是山东省，创建山东省城市数据文档树。
     else if ( "HuNan".equals(country) )
     {
     ...济南   青岛   潍坊
     }


     // 将文档根元素加到文档对象。
     doc.appendChild(xmlRoot);
     // 将xml文档数据发送给客户端浏览器。
     DOMSource doms = new DOMSource(doc);
     StreamResult sr = new StreamResult(response.getOutputStream( ));
     TransformerFactory tf = TransformerFactory.newInstance( );
     Transformer t = tf.newTransformer( );
     t.setOutputProperty("encoding", "UTF-8");
     t.transform(doms, sr);