这个例子是自己试验成功过了的,从中能够了解到细节的东西。
------------------JSP页面--------------------
-------------------------------------------------
<%@ page language="java" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%!ajax._Data data = new ajax._Data();%>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
//创建连接,判断浏览器
var http_request=false;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest(); //创建对象对应不同的浏览器
}
else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
}
//onchange事件
function changeProvice(){//当第一个下拉框的选项发生改变时调用该函数
var province=document.getElementById("provice").value; //获取第一级菜单的值
sendRequest("ajaxtest?province="+province); //发送参数到SERVLET
//值得注意的是URL的servlet地址前面不加“/”并且为小写字母(试验的结论)
}
//发送请求
function sendRequest(url){ //发送函数
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange=progessRequest;//调用相关的XML接受函数
XMLHttpReq.send(null);
}
//判断接收请求
function progessRequest(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
var xmlDoc=XMLHttpReq.responseXML; //获取返回的XML文档
var citys=xmlDoc.getElementsByTagName("city");//获取XML节点
var obj=document.getElementById("city");//获取第二级菜单的对象
if(obj!=null){//如果不为空就置空
obj.options.length=0;
}
for(var i=0;i<citys.length;i++){//用循环给select中加值
var xValue = citys[i].childNodes[0].firstChild.nodeValue;
var xText = citys[i].childNodes[1].firstChild.nodeValue;
var option = new Option(xText, xValue);
try{
obj.add(option);
}catch(e){}
}
}else{
alert( "请求异常"+XMLHttpReq.responseText);
}
}
}
</script>
<body>
<table>
<tr>
<td>
<select id="provice" name="provice" onchange="changeProvice()">
<option value="0">
请选择
</option>
<option value="1 ">
广西
</option>
<option value="2 ">
广东
</option>
</select>
<select name="city" id="city">
<option value="0">
请选择
</option>
</select>
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------servlet文件-------------------------------------------
---------------------------------------------------------------------------------------------------
package ajax;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajaxtest extends HttpServlet {
private static final long serialVersionUID = 7078254784406906185L;
public ajaxtest() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
_Data data = new _Data();//从数据库获取数据的类
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("UTF-8");
String province = request.getParameter("province");
ArrayList<City> city = new ArrayList<City>();
city = data.getCity(province);
String xml_start = "<citys>";
String xml_end = "</citys>";
String xml = "";
for (int i = 0; i < city.size(); i++) {
xml += "<city><value>" + city.get(i).getId() + "</value><text>"
+ city.get(i).getName() + "</text></city>";
}
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
response.getWriter().flush();
response.getWriter().close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void init() throws ServletException {
}
}
-----------------------------------------WEB.XML------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AJAXtest</servlet-name>
<servlet-class>ajax.ajaxtest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXtest</servlet-name>
<url-pattern>/ajaxtest</url-pattern>
</servlet-mapping>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>SelectServlet</servlet-name>
<servlet-class>ajax.SelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectServlet</servlet-name>
<url-pattern>/select</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
2009-2-5