轉(zhuǎn)自：
http://www.java3z.com/cwbwebhome/article/article2/2278.html?id=800這些時間，瞎子也看得見，AJAX正大踏步的朝我們走來。不管我們是擁護也好，反對也罷，還是視而不見，AJAX像一陣潮流，席轉(zhuǎn)了我們所有的人。
關(guān)于AJAX的定義也好，大話也好，早有人在網(wǎng)上發(fā)表了汗牛充棟的文字，在這里我也不想照本宣科。
只想說說我感覺到的一些優(yōu)點，對于不對，大家也可以和我討論：
首先是異步交互，用戶感覺不到頁面的提交，當(dāng)然也不等待頁面返回。這是使用了AJAX技術(shù)的頁面給用戶的第一感覺。
其次是響應(yīng)速度快，這也是用戶強烈體驗。
然后是與我們開發(fā)者相關(guān)的，復(fù)雜UI的成功處理，一直以來，我們對B/S模式的UI不如C/S模式UI豐富而苦惱。現(xiàn)在由于AJAX大量使用JS，使得復(fù)雜的UI的設(shè)計變得更加成功。
最后，AJAX請求的返回對象為XML文件，這也是一個潮流，就是WEB SERVICE潮流一樣。易于和WEB SERVICE結(jié)合起來。
好了，閑話少說，讓我們轉(zhuǎn)入正題吧。
我們的第一個例子是基于Servlet為后臺的一個web應(yīng)用。
基于Servlet的AJAX
這是一個很常見的UI，當(dāng)用戶在第一個選擇框里選擇ZHEJIANG時，第二個選擇框要出現(xiàn)ZHEJIANG的城市；當(dāng)用戶在第一個選擇框里選擇JIANGSU時，第二個選擇框里要出現(xiàn)JIANGSU的城市。
首先，我們來看配置文件web.xml，在里面配置一個servlet，跟往常一樣：
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
然后，來看我們的JSP文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
function getResult(stateVal) {
var url = "servlet/SelectCityServlet?state="+stateVal;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var city = req.responseXML.getElementsByTagName("city");
file://alert(city.length);
var str=new Array();
for(var i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
}
file://alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
function buildSelect(str,sel) {
sel.options.length=0;
for(var i=0;i<str.length;i++) {
sel.options[sel.options.length]=new Option(str[i],str[i])
}
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
<option value="">Select</option>>
<option value="zj">ZEHJIANG</option>>
<option value="zs">JIANGSU</option>>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
第一眼看來，跟我們平常的JSP沒有兩樣。仔細(xì)一看，不同在JS里頭。
我們首先來看第一個方法：getResult(stateVal)，在這個方法里，首先是取得XmlHttpRequest；然后設(shè)置該請求的url：req.open("GET",url, true);接著設(shè)置請求返回值的接收方法：req.onreadystatechange = complete;該返回值的接收方法為——complete();最后是發(fā)送請求：req.send(null);
然后我們來看我們的返回值接收方法：complete()，這這個方法里，首先判斷是否正確返回，如果正確返回，用DOM對返回的XML文件進行解析。關(guān)于DOM的使用，這里不再講述，請大家參閱相關(guān)文檔。得到city的值以后，再通過buildSelect(str,sel)方法賦值到相應(yīng)的選擇框里頭去。
最后我們來看看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;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectCityServlet extends HttpServlet {
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb=new StringBuffer("<state>");
if ("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>");
} else if("zs".equals(state)){
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
}
sb.append("</state>");
PrintWriter out=response.getWriter();
out.write(sb.toString());
out.close();
}
}
這個類也十分簡單，首先是從request里取得state參數(shù)，然后根據(jù)state參數(shù)生成相應(yīng)的XML文件，最后將XML文件輸出到PrintWriter對象里。
到現(xiàn)在為止，第一個例子的代碼已經(jīng)全部結(jié)束。是不是比較簡單？
運行圖：
