Ajax入门(与Java服务器交互)(三)——解析XML数据、使用级联下拉选择框

最新推荐文章于 2023-11-29 09:23:00 发布

转载最新推荐文章于 2023-11-29 09:23:00 发布 · 440 阅读

本文介绍了一个使用Ajax从服务器获取XML格式数据，并实时更新网页下拉菜单内容的示例。通过选择不同的省份，对应的市会动态加载。

使用Ajax与后台服务器进行交互时，返回的数据并不是都是文本类型，也有xml类型、Jason类型等。

本篇文章主要讲解对返回的xml类型数据进行解析。

示例解析：

我们要做到示例是，有两个下拉选框，第一个下拉框是省份，第二个是所选省下相对应的市。当省份改变时，相对应的市也应改变。例如，当选择广东省时，地区项应包括：广州、深圳、佛山、汕头。

示例图示：

源代码：

jsp页面文件：

[java]view plaincopy 
   
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
 <%  
 String path = request.getContextPath();  
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
 %>  
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <base href="<%=basePath%>">  
     <title>My JSP 'select.jsp' starting page</title>  
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
     <script type="text/javascript">  
     <!--  
     var xmlHttp;  
     function createXmlHttp() {  
         if(window.XMLHttpRequest) {  
             xmlHttp = new XMLHttpRequest();  
         } else if(window.ActiveXObject) {  
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
         }  
     }  
     function updateSelect() {  
         var selected = document.getElementById("slt1").value;  
         createXmlHttp();  
         xmlHttp.onreadystatechange = processor;  
         var url = "createXml?selected=" + selected;  
         xmlHttp.open("POST",url,true);  
         xmlHttp.send(null);  
     }  
     function processor() {  
         var result;  
         if(xmlHttp.readyState == 4) {  
             if(xmlHttp.status == 200) {  
                 //注意此处是xmlHttp.responseXML而不是xmlHttp.responseText  
                 //获取节点名为city的所有节点  
                 result = xmlHttp.responseXML.getElementsByTagName("city");  
                 var slt2 = document.getElementById("slt2");  
                 //将二级下拉框中的所有选项清空  
                 while(slt2.options.length>0) {  
                     slt2.removeChild(slt2.childNodes[0]);  
                 }  
                 //根据返回节点数目构造下拉选项  
                 for(var i=0; i<result.length; i++) {  
                     var option = document.createElement("option");  
                     //根据节点名称获取城市名称，并赋值  
                     option.text = result[i].getElementsByTagName("cityname")[0].firstChild.nodeValue;  
                     //根据节点名称获取城市值，并赋值  
                     option.value = result[i].getElementsByTagName("cityvalue")[0].firstChild.nodeValue;  
                     //千万不要忘记将该节点加入到下拉框父节点中  
                     slt2.options.add(option);  
                 }  
             }  
         }  
     }  
     -->  
     </script>  
   </head>  
     
   <body>  
   <form>  
       省份：  
       <select id="slt1" onChange="updateSelect()">  
           <option value="1">河南省</option>  
           <option value="2">广东省</option>  
       </select>  
       地区：  
       <select id="slt2">  
           <option>请选择地方</option>  
           <option value="1">濮阳</option>  
           <option value="2">安阳</option>  
           <option value="3">南阳</option>  
           <option value="4">郑州</option>  
       </select>  
   </form>  
   </body>  
 </html>  

Servlet源代码：

[java]view plaincopy 
   
 package com.zyh.servlet;  
   
 import java.io.IOException;  
 import java.io.PrintWriter;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 public class CreateXml extends HttpServlet {  
   
     @Override  
     protected void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
         //这里一定要设置为xml类型的文件，而不是text/html  
         response.setContentType("text/xml;charset=utf-8");  
         response.setCharacterEncoding("utf-8");  
         String selected = request.getParameter("selected");  
         PrintWriter out = response.getWriter();  
         out.println("<response>");  
         if(selected.equals("1")) {  
             out.println("<city>");  
             out.println("<cityname>濮阳</cityname>");  
             out.println("<cityvalue>1</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>安阳</cityname>");  
             out.println("<cityvalue>2</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>南阳</cityname>");  
             out.println("<cityvalue>3</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>郑州</cityname>");  
             out.println("<cityvalue>4</cityvalue>");  
             out.println("</city>");  
         } else {  
             out.println("<city>");  
             out.println("<cityname>广州</cityname>");  
             out.println("<cityvalue>1</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>深圳</cityname>");  
             out.println("<cityvalue>2</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>佛山</cityname>");  
             out.println("<cityvalue>3</cityvalue>");  
             out.println("</city>");  
             out.println("<city>");  
             out.println("<cityname>汕头</cityname>");  
             out.println("<cityvalue>4</cityvalue>");  
             out.println("</city>");  
         }  
         out.println("</response>");  
         out.flush();  
         out.close();  
     }  
       
 }  