Posted on 2009-11-15 09:28
笑看人生 阅读(231)
评论(0) 编辑 收藏 所属分类:
Web开发技术
Ajax中的XMLHttpRequest对象提供了两个属性来访问服务器端相应。
- responseText：将相应作为一个字符串返回；（系列一中已经介绍）
- responseXML：将相应作为一个XML对象返回；（本系列中介绍）
本节要介绍的内容，很多人应该比较熟悉，比如在网上注册时，在“省”列表框中选择不同的省份，对应的“市”列表框中出现该省的所有市，这个过程，不用刷新整个页面。
要实现这个功能，只须修改一下系列一中的index.jsp和AjaxServlet.java这两个文件。
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script language="javascript">
var xmlHttp;
function refresh() {
xmlHttp = createXMLHttpRequest();
var url = "AjaxServlet?province="
+ document.getElementById("province").value;
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
updateCity();
}
}
}
function updateCity() {
clearCity();
var city = document.getElementById("city");
var cities = xmlHttp.responseXML.getElementsByTagName("city");
for(var i=0;i<cities.length;i++){
option = document.createElement("option");
option.appendChild(document.createTextNode(cities[i].firstChild.nodeValue));
city.appendChild(option);
}
}
function clearCity() {
var city = document.getElementById("city");
while(city.childNodes.length > 0) {
city.removeChild(city.childNodes[0]);
}
}
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
</script>
<body>
<form action="#"><select id="province" onchange="refresh()">
<option value="">Select One</option>
<option value="jiangsu">Jiang Su</option>
<option value="zhejiang">Zhe Jiang</option>
</select> <br>
<br>
<br>
<select id="city"></select></form>
</body>
</html>
AjaxServlet.java
package 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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 7032718233562299325L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse response)
throws ServletException, IOException {
processRequest(req, response, "POST");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse response)
throws ServletException, IOException {
processRequest(req, response, "GET");
}
private void processRequest(HttpServletRequest req,
HttpServletResponse response, String method) throws IOException {
String province = req.getParameter("province");
StringBuffer cities = new StringBuffer("<cities>");
if("jiangsu".equals(province)){
cities.append("<city>Nanjing</city>");
cities.append("<city>Zhenjiang</city>");
}else if("zhejiang".equals(province)){
cities.append("<city>Hanzhou</city>");
cities.append("<city>Wenzhou</city>");
}
PrintWriter writer = response.getWriter();
cities.append("</cities>");
response.setContentType("text/xml");
writer.write(cities.toString());
writer.close();
}
}