Posted on 2009-11-15 09:28
笑看人生 閱讀(249)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
Web開(kāi)發(fā)技術(shù)
Ajax中的XMLHttpRequest對(duì)象提供了兩個(gè)屬性來(lái)訪問(wèn)服務(wù)器端相應(yīng)。
- responseText：將相應(yīng)作為一個(gè)字符串返回；（系列一中已經(jīng)介紹）
- responseXML：將相應(yīng)作為一個(gè)XML對(duì)象返回；（本系列中介紹）
本節(jié)要介紹的內(nèi)容，很多人應(yīng)該比較熟悉，比如在網(wǎng)上注冊(cè)時(shí)，在“省”列表框中選擇不同的省份，對(duì)應(yīng)的“市”列表框中出現(xiàn)該省的所有市，這個(gè)過(guò)程，不用刷新整個(gè)頁(yè)面。
要實(shí)現(xiàn)這個(gè)功能，只須修改一下系列一中的index.jsp和AjaxServlet.java這兩個(gè)文件。
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();
}
}