<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>级联菜单</title> <script charset="gb2312" type="text/javascript" src="./xmFile.js"> </script> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> </html>
function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } window.onload = function(){ //获取XMLHttpRequest对象 var xmlRequest=ajaxFunction(); //注册事件 xmlRequest.onreadystatechange=function(){ if(xmlRequest.readyState==4){ if(xmlRequest.status==200||xmlRequest.status==304){ var xmlDoc=xmlRequest.responseXML; alert(xmlDoc); /* * <china> <province name="吉林省"> <city>长春</city> </province> <province name="辽宁省"> <city>沈阳</city> </province> <province name="山东省"> <city>济南</city> </province> </china> */ var provinceElements=xmlDoc.getElementsByTagName("province"); //alert(provinceElements.length); for(var i=0;i<provinceElements.length;i++){ var provinceElement=provinceElements[i]; var namevalue=provinceElement.getAttribute("name"); //alert(namevalue); var optionElement=document.createElement("option"); optionElement.setAttribute("value",namevalue); var textElement=document.createTextNode(namevalue); optionElement.appendChild(textElement); /* * <select id="province" name="province"> <option value="">请选择....</option> </select> */ document.getElementById("province").appendChild(optionElement); } } } } //打开连接 xmlRequest.open("post","../xmlFileServlet?timeStamp="+new Date().getTime(),true); xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //发送请求 xmlRequest.send(null); }
package cn.ajax; 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 XmlFileServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //生成一个xml文件 response.setContentType("text/xml;charset=utf-8"); PrintWriter out = response.getWriter(); out.println("<china>"); out.println("<province name='吉林省'>"); out.println("<city>长春</city>"); out.println("<city>吉林市</city>"); out.println("<city>四平</city>"); out.println("<city>松原</city>"); out.println("<city>通化</city>"); out.println("</province>"); out.println("<province name='辽宁省'>"); out.println("<city>沈阳</city>"); out.println("<city>大连</city>"); out.println("<city>鞍山</city>"); out.println("<city>抚顺</city>"); out.println("<city>铁岭</city>"); out.println("</province>"); out.println("<province name='山东省'>"); out.println("<city>济南</city>"); out.println("<city>青岛</city>"); out.println("<city>威海</city>"); out.println("<city>烟台</city>"); out.println("<city>潍坊</city>"); out.println("</province>"); out.println("</china>"); } }