久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

AJAX+servlet實(shí)例入門

 爪哇島2 2006-12-08

這些時(shí)間,,瞎子也看得見(jiàn),,AJAX正大踏步的朝我們走來(lái),。不管我們是擁護(hù)也好,,反對(duì)也罷,還是視而不見(jiàn),,AJAX像一陣潮流,,席轉(zhuǎn)了我們所有的人。

  關(guān)于AJAX的定義也好,,大話也好,,早有人在網(wǎng)上發(fā)表了汗牛充棟的文字,在這里我也不想照本宣科,。

  只想說(shuō)說(shuō)我感覺(jué)到的一些優(yōu)點(diǎn),,對(duì)于不對(duì),大家也可以和我討論:

  首先是異步交互,,用戶感覺(jué)不到頁(yè)面的提交,,當(dāng)然也不等待頁(yè)面返回,。這是使用了AJAX技術(shù)的頁(yè)面給用戶的第一感覺(jué)。

  其次是響應(yīng)速度快,,這也是用戶強(qiáng)烈體驗(yàn),。


   

  然后是與我們開(kāi)發(fā)者相關(guān)的,復(fù)雜UI的成功處理,,一直以來(lái),,我們對(duì)B/S模式的UI不如C/S模式UI豐富而苦惱。現(xiàn)在由于AJAX大量使用JS,,使得復(fù)雜的UI的設(shè)計(jì)變得更加成功,。

  最后,AJAX請(qǐng)求的返回對(duì)象為XML文件,,這也是一個(gè)潮流,,就是WEB SERVICE潮流一樣。易于和WEB SERVICE結(jié)合起來(lái),。

  好了,,閑話少說(shuō),讓我們轉(zhuǎn)入正題吧,。

  我們的第一個(gè)例子是基于Servlet為后臺(tái)的一個(gè)web應(yīng)用,。

  基于Servlet的AJAX

   這是一個(gè)很常見(jiàn)的UI,當(dāng)用戶在第一個(gè)選擇框里選擇ZHEJIANG時(shí),,第二個(gè)選擇框要出現(xiàn)ZHEJIANG的城市,;當(dāng)用戶在第一個(gè)選擇框里選擇JIANGSU時(shí),第二個(gè)選擇框里要出現(xiàn)JIANGSU的城市,。

  首先,,我們來(lái)看配置文件web.xml,在里面配置一個(gè)servlet,,跟往常一樣:

<web-app version="2.4"
xmlns="http://java./xml/ns/j2ee"
xmlns:xsi="http://www./2001/XMLSchema-instance"
xsi:schemaLocation="http://java./xml/ns/j2ee
http://java./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>

  然后,,來(lái)看我們的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>

  第一眼看來(lái),跟我們平常的JSP沒(méi)有兩樣,。仔細(xì)一看,,不同在JS里頭。

  我們首先來(lái)看第一個(gè)方法:getResult(stateVal),,在這個(gè)方法里,,首先是取得XmlHttpRequest;然后設(shè)置該請(qǐng)求的url:req.open("GET",url, true);接著設(shè)置請(qǐng)求返回值的接收方法:req.onreadystatechange = complete;該返回值的接收方法為——complete();最后是發(fā)送請(qǐng)求:req.send(null);

  然后我們來(lái)看我們的返回值接收方法:complete(),,這這個(gè)方法里,,首先判斷是否正確返回,如果正確返回,,用DOM對(duì)返回的XML文件進(jìn)行解析,。關(guān)于DOM的使用,,這里不再講述,請(qǐng)大家參閱相關(guān)文檔,。得到city的值以后,,再通過(guò)buildSelect(str,sel)方法賦值到相應(yīng)的選擇框里頭去。

   最后我們來(lái)看看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();
   }
}

  這個(gè)類也十分簡(jiǎn)單,,首先是從request里取得state參數(shù),,然后根據(jù)state參數(shù)生成相應(yīng)的XML文件,最后將XML文件輸出到PrintWriter對(duì)象里,。

  到現(xiàn)在為止,,第一個(gè)例子的代碼已經(jīng)全部結(jié)束。是不是比較簡(jiǎn)單,?

運(yùn)行圖:

來(lái)源: http://www.dwww.cn/sub_class.asp?id=27

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多