榪欎簺鏃墮棿錛岀瀻瀛愪篃鐪嬪緱瑙侊紝AJAX姝ｅぇ韙忔鐨勬湞鎴戜滑璧版潵銆備笉綆℃垜浠槸鎷ユ姢涔熷ソ錛屽弽瀵逛篃緗紝榪樻槸瑙嗚€屼笉瑙侊紝AJAX鍍忎竴闃墊疆嫻侊紝甯漿浜嗘垜浠墍鏈夌殑浜恒€?
銆€銆€鍏充簬AJAX鐨勫畾涔変篃濂斤紝澶ц瘽涔熷ソ錛屾棭鏈変漢鍦ㄧ綉涓婂彂琛ㄤ簡姹楃墰鍏呮爧鐨勬枃瀛楋紝鍦ㄨ繖閲屾垜涔熶笉鎯崇収鏈縐戙€?/p>
銆€銆€鍙兂璇磋鎴戞劅瑙夊埌鐨勪竴浜涗紭鐐癸紝瀵逛簬涓嶅錛屽ぇ瀹朵篃鍙互鍜屾垜璁ㄨ錛?/p>
銆€銆€棣栧厛鏄紓姝ヤ氦浜掞紝鐢ㄦ埛鎰熻涓嶅埌欏甸潰鐨勬彁浜わ紝褰撶劧涔熶笉絳夊緟欏甸潰榪斿洖銆傝繖鏄嬌鐢ㄤ簡AJAX鎶€鏈殑欏甸潰緇欑敤鎴風殑絎竴鎰熻銆?/p>
銆€銆€鍏舵鏄搷搴旈€熷害蹇紝榪欎篃鏄敤鎴峰己鐑堜綋楠屻€?/p>
銆€銆€鐒跺悗鏄笌鎴戜滑寮€鍙戣€呯浉鍏崇殑錛屽鏉俇I鐨勬垚鍔熷鐞嗭紝涓€鐩翠互鏉ワ紝鎴戜滑瀵笲/S妯″紡鐨刄I涓嶅C/S妯″紡UI涓板瘜鑰岃嫤鎭箋€傜幇鍦ㄧ敱浜嶢JAX澶ч噺浣跨敤JS錛屼嬌寰楀鏉傜殑UI鐨勮璁″彉寰楁洿鍔犳垚鍔熴€?/p>
銆€銆€鏈€鍚庯紝AJAX璇鋒眰鐨勮繑鍥炲璞′負XML鏂囦歡錛岃繖涔熸槸涓€涓疆嫻侊紝灝辨槸WEB SERVICE娼祦涓€鏍楓€傛槗浜庡拰WEB SERVICE緇撳悎璧鋒潵銆?/p>
銆€銆€濂戒簡錛岄棽璇濆皯璇達紝璁╂垜浠漿鍏ユ棰樺惂銆?/p>
銆€銆€鎴戜滑鐨勭涓€涓緥瀛愭槸鍩轟簬Servlet涓哄悗鍙扮殑涓€涓獁eb搴旂敤銆?/p>
銆€銆€鍩轟簬Servlet鐨凙JAX
銆€銆€ 榪欐槸涓€涓緢甯歌鐨刄I錛屽綋鐢ㄦ埛鍦ㄧ涓€涓€夋嫨妗嗛噷閫夋嫨ZHEJIANG鏃訛紝絎簩涓€夋嫨妗嗚鍑虹幇ZHEJIANG鐨勫煄甯傦紱褰撶敤鎴峰湪絎竴涓€夋嫨妗嗛噷閫夋嫨JIANGSU鏃訛紝絎簩涓€夋嫨妗嗛噷瑕佸嚭鐜癑IANGSU鐨勫煄甯傘€?/p>
銆€銆€棣栧厛錛屾垜浠潵鐪嬮厤緗枃浠秝eb.xml錛屽湪閲岄潰閰嶇疆涓€涓猻ervlet錛岃窡寰€甯鎬竴鏍鳳細
<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鏂囦歡錛?/p>
<!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娌℃湁涓ゆ牱銆備粩緇嗕竴鐪嬶紝涓嶅悓鍦↗S閲屽ご銆?/p>
銆€銆€鎴戜滑棣栧厛鏉ョ湅絎竴涓柟娉曪細getResult(stateVal)錛屽湪榪欎釜鏂規硶閲岋紝棣栧厛鏄彇寰梄mlHttpRequest錛涚劧鍚庤緗璇鋒眰鐨剈rl錛歳eq.open("GET",url, true);鎺ョ潃璁劇疆璇鋒眰榪斿洖鍊肩殑鎺ユ敹鏂規硶錛歳eq.onreadystatechange = complete;璇ヨ繑鍥炲€肩殑鎺ユ敹鏂規硶涓衡€斺€攃omplete();鏈€鍚庢槸鍙戦€佽姹傦細req.send(null);
銆€銆€鐒跺悗鎴戜滑鏉ョ湅鎴戜滑鐨勮繑鍥炲€兼帴鏀舵柟娉曪細complete()錛岃繖榪欎釜鏂規硶閲岋紝棣栧厛鍒ゆ柇鏄惁姝ｇ‘榪斿洖錛屽鏋滄紜繑鍥烇紝鐢―OM瀵硅繑鍥炵殑XML鏂囦歡榪涜瑙ｆ瀽銆傚叧浜嶥OM鐨勪嬌鐢紝榪欓噷涓嶅啀璁茶堪錛岃澶у鍙傞槄鐩稿叧鏂囨。銆傚緱鍒癱ity鐨勫€間互鍚庯紝鍐嶉€氳繃buildSelect(str,sel)鏂規硶璧嬪€煎埌鐩稿簲鐨勯€夋嫨妗嗛噷澶村幓銆?br>
銆€銆€ 鏈€鍚庢垜浠潵鐪嬬湅Servlet鏂囦歡錛?/p>
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閲屽彇寰梥tate鍙傛暟錛岀劧鍚庢牴鎹畇tate鍙傛暟鐢熸垚鐩稿簲鐨刋ML鏂囦歡錛屾渶鍚庡皢XML鏂囦歡杈撳嚭鍒癙rintWriter瀵硅薄閲屻€?/p>
銆€銆€鍒扮幇鍦ㄤ負姝紝絎竴涓緥瀛愮殑浠ｇ爜宸茬粡鍏ㄩ儴緇撴潫銆傛槸涓嶆槸姣旇緝綆€鍗曪紵
榪愯鍥撅細
]]>