AJAX+servlet執行個體入門

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　關於AJAX的優點，

　　首先是非同步互動，使用者感覺不到頁面的提交，當然也不等待頁面返回。這是使用了AJAX技術的頁面給使用者的第一感覺。

　　其次是響應速度快，這也是使用者強烈體驗。

　　然後是與我們開發人員相關的，複雜UI的成功處理，一直以來，我們對B/S模式的UI不如C/S模式UI豐富而苦惱。現在由於AJAX大量使用JS，使得複雜的UI的設計變得更加成功。

　　最後，AJAX請求的返回對象為XML檔案，這也是一個潮流，就是WEB SERVICE潮流一樣。易於和WEB SERVICE結合起來。

　　我們的第一個例子是基於Servlet為背景一個web應用。

　　基於Servlet的AJAX

　　這是一個很常見的UI，當使用者在第一個選擇框裡選擇ZHEJIANG時，第二個選擇框要出現ZHEJIANG的城市；當使用者在第一個選擇框裡選擇JIANGSU時，第二個選擇框裡要出現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>

</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沒有兩樣。仔細一看，不同在JS裡頭。

　　我們首先來看第一個方法：getResult(stateVal)，在這個方法裡，首先是取得XmlHttpRequest；然後設定該請求的url：req.open("GET",url, true);接著佈建要求傳回值的接收方法：req.onreadystatechange = complete;該傳回值的接收方法為——complete();最後是發送請求：req.send(null);

　　然後我們來看我們的傳回值接收方法：complete()，這這個方法裡，首先判斷是否正確返回，如果正確返回，用DOM對返回的XML檔案進行解析。關於DOM的使用，這裡不再講述，請大家參閱相關文檔。得到city的值以後，再通過buildSelect(str,sel)方法賦值到相應的選擇框裡頭去。

　　最後我們來看看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參數，然後根據state參數產生相應的XML檔案，最後將XML檔案輸出到PrintWriter對象裡。

　　到現在為止，第一個例子的代碼已經全部結束。是不是比較簡單？

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More