銆銆鍏充簬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)錛屽湪榪欎釜鏂規(guī)硶閲岋紝棣栧厛鏄彇寰梄mlHttpRequest錛涚劧鍚庤緗璇鋒眰鐨剈rl錛歳eq.open("GET",url, true);鎺ョ潃璁劇疆璇鋒眰榪斿洖鍊肩殑鎺ユ敹鏂規(guī)硶錛歳eq.onreadystatechange = complete;璇ヨ繑鍥炲肩殑鎺ユ敹鏂規(guī)硶涓衡斺攃omplete();鏈鍚庢槸鍙戦佽姹傦細req.send(null);
銆銆鐒跺悗鎴戜滑鏉ョ湅鎴戜滑鐨勮繑鍥炲兼帴鏀舵柟娉曪細complete()錛岃繖榪欎釜鏂規(guī)硶閲岋紝棣栧厛鍒ゆ柇鏄惁姝g‘榪斿洖錛屽鏋滄紜繑鍥烇紝鐢―OM瀵硅繑鍥炵殑XML鏂囦歡榪涜瑙f瀽銆傚叧浜嶥OM鐨勪嬌鐢紝榪欓噷涓嶅啀璁茶堪錛岃澶у鍙傞槄鐩稿叧鏂囨。銆傚緱鍒癱ity鐨勫間互鍚庯紝鍐嶉氳繃buildSelect(str,sel)鏂規(guī)硶璧嬪煎埌鐩稿簲鐨勯夋嫨妗嗛噷澶村幓銆?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>
銆銆鍒扮幇鍦ㄤ負姝紝絎竴涓緥瀛愮殑浠g爜宸茬粡鍏ㄩ儴緇撴潫銆傛槸涓嶆槸姣旇緝綆鍗曪紵
榪愯鍥撅細