鍦?Web 搴旂敤紼嬪簭寮鍙戜腑錛岄〉闈㈤噸杞藉驚鐜槸鏈澶х殑涓涓嬌鐢ㄩ殰紕嶏紝瀵逛簬 Java鈩?寮鍙戜漢鍛樻潵璇翠篃鏄竴涓弗宄葷殑鎸戞垬銆傚湪榪欎釜緋誨垪涓紝浣滆?Philip McCarthy 浠嬬粛浜嗕竴縐嶅垱寤哄姩鎬佸簲鐢ㄧ▼搴忎綋楠岀殑寮鍒涙ф柟寮忋侫jax錛堝紓姝?JavaScript 鍜?XML錛夋槸涓縐嶇紪紼嬫妧鏈紝瀹冨厑璁鎬負鍩轟簬 Java 鐨?Web 搴旂敤紼嬪簭鎶?Java 鎶鏈乆ML 鍜?JavaScript 緇勫悎璧鋒潵錛屼粠鑰屾墦鐮撮〉闈㈤噸杞界殑鑼冨紡銆?/BLOCKQUOTE>
Ajax錛堝嵆寮傛 JavaScript 鍜?XML錛夋槸涓縐?Web 搴旂敤紼嬪簭寮鍙戠殑鎵嬫錛屽畠閲囩敤瀹㈡埛绔剼鏈笌 Web 鏈嶅姟鍣ㄤ氦鎹㈡暟鎹傛墍浠ワ紝涓嶅繀閲囩敤浼氫腑鏂氦浜掔殑瀹屾暣欏甸潰鍒鋒柊錛屽氨鍙互鍔ㄦ佸湴鏇存柊 Web 欏甸潰銆備嬌鐢?Ajax錛屽彲浠ュ垱寤烘洿鍔犱赴瀵屻佹洿鍔犲姩鎬佺殑 Web 搴旂敤紼嬪簭鐢ㄦ埛鐣岄潰錛屽叾鍗蟲椂鎬т笌鍙敤鎬х敋鑷寵兘澶熸帴榪戞湰鏈烘闈㈠簲鐢ㄧ▼搴忋?/P>
Ajax 涓嶆槸涓欏規妧鏈紝鑰屾洿鍍忔槸涓涓?妯″紡 鈥斺?涓縐嶈瘑鍒拰鎻忚堪鏈夌敤鐨勮璁℃妧鏈殑鏂瑰紡銆侫jax 鏄柊棰栫殑錛屽洜涓鴻澶氬紑鍙戜漢鍛樻墠鍒氬垰寮濮嬬煡閬撳畠錛屼絾鏄墍鏈夊疄鐜?Ajax 搴旂敤紼嬪簭鐨勭粍浠墮兘宸茬粡瀛樺湪鑻ュ共騫翠簡銆傚畠鐩墠鍙楀埌閲嶈鏄洜涓哄湪 2004 鍜?2005 騫村嚭鐜頒簡涓浜涘熀浜?Ajax 鎶鏈殑闈炲父媯掔殑鍔ㄦ?Web UI錛屾渶钁楀悕鐨勫氨鏄?Google 鐨?GMail 鍜?Maps 搴旂敤紼嬪簭錛屼互鍙婄収鐗囧叡浜珯鐐?Flickr銆傝繖浜涚敤鎴風晫闈㈠叿鏈夎凍澶熺殑寮鍒涙э紝鏈変簺寮鍙戜漢鍛樼О涔嬩負鈥淲eb 2.0鈥濓紝鍥犳瀵?Ajax 搴旂敤紼嬪簭鐨勫叴瓚i閫熶笂鍗囥?/P>
鍦ㄨ繖涓郴鍒椾腑錛屾垜灝嗘彁渚涗嬌鐢?Ajax 寮鍙戝簲鐢ㄧ▼搴忛渶瑕佺殑鍏ㄩ儴宸ュ叿 銆傚湪絎竴綃囨枃绔犱腑錛屾垜灝嗚В閲?Ajax 鑳屽悗鐨勬蹇碉紝婕旂ず涓哄熀浜?Java 鐨?Web 搴旂敤紼嬪簭鍒涘緩 Ajax 鐣岄潰鐨勫熀鏈楠ゃ傛垜灝嗕嬌鐢ㄤ唬鐮佺ず渚嬫紨紺鴻 Ajax 搴旂敤紼嬪簭濡傛鍔ㄦ佺殑鏈嶅姟鍣ㄧ Java 浠g爜鍜屽鎴風 JavaScript銆傛渶鍚庯紝鎴戝皢鎸囧嚭 Ajax 鏂瑰紡鐨勪竴浜涗笉瓚籌紝浠ュ強鍦ㄥ垱寤?Ajax 搴旂敤紼嬪簭鏃跺簲褰撹冭檻鐨勪竴浜涙洿騫跨殑鍙敤鎬у拰璁塊棶鎬ч棶棰樸?/P>
鏇村ソ鐨勮喘鐗╄濺
鍙互鐢?Ajax 澧炲己浼犵粺鐨?Web 搴旂敤紼嬪簭錛岄氳繃娑堥櫎欏甸潰瑁呭叆浠庤岀畝鍖栦氦浜掋備負浜嗘紨紺鴻繖涓鐐癸紝鎴戦噰鐢ㄤ竴涓畝鍗曠殑璐墿杞︾ず渚嬶紝鍦ㄥ悜閲岄潰娣誨姞欏圭洰鏃訛紝瀹冧細鍔ㄦ佹洿鏂般傝繖欏規妧鏈鏋滄暣鍚堝埌鍦ㄧ嚎鍟嗗簵錛岄偅涔堢敤鎴峰彲浠ユ寔緇湴嫻忚鍜屽悜璐墿杞︿腑娣誨姞欏圭洰錛岃屼笉蹇呭湪姣忔鐐瑰嚮涔嬪悗閮界瓑鍊欏畬鏁寸殑欏甸潰鏇存柊銆傝櫧鐒惰繖綃囨枃绔犱腑鐨勬湁浜涗唬鐮佺壒瀹氫簬璐墿杞︾ず渚嬶紝浣嗘槸婕旂ず鐨勬妧鏈彲浠ュ簲鐢ㄤ簬浠諱綍 Ajax 搴旂敤紼嬪簭銆傛竻鍗?1 鏄劇ず浜嗚喘鐗╄濺紺轟緥浣跨敤鐨勬湁鍏?HTML 浠g爜錛屾暣綃囨枃绔犱腑閮戒細浣跨敤榪欎釜 HTML銆?/P>
娓呭崟1. 璐墿杞︾ず渚嬬殑鏈夊叧鐗囨柇
<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
<!-- Item details -->
<td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
<td>
<!-- Click button to add item to cart via Ajax request -->
<button onclick="addToCart('hat001')">Add to Cart</button>
</td>
</tr>
...
<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">
<!-- List-items will be added here for each item in the cart -->
</ul>
<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>
|
Ajax 寰榪旇繃紼?/FONT>
Ajax 浜や簰寮濮嬩簬鍙綔 XMLHttpRequest
鐨?JavaScript 瀵硅薄銆傞【鍚嶆濅箟錛屽畠鍏佽瀹㈡埛绔剼鏈墽琛?HTTP 璇鋒眰錛屽茍瑙f瀽 XML 鏈嶅姟鍣ㄥ搷搴斻侫jax 寰榪旇繃紼嬬殑絎竴姝ユ槸鍒涘緩 XMLHttpRequest
鐨勫疄渚嬨傚湪 XMLHttpRequest
瀵硅薄涓婅緗姹備嬌鐢ㄧ殑 HTTP 鏂規硶錛?CODE>GET 鎴?POST
錛変互鍙婄洰鏍?URL銆?/P>
鐜板湪錛屾偍榪樿寰?Ajax 鐨勭涓涓?a 鏄唬琛?寮傛錛坅synchronous錛?/I> 鍚楋紵鍦ㄥ彂閫?HTTP 璇鋒眰鏃訛紝涓嶆兂璁╂祻瑙堝櫒鎸傜潃絳夊欐湇鍔″櫒鍝嶅簲銆傜浉鍙嶏紝鎮ㄦ兂璁╂祻瑙堝櫒緇х畫瀵圭敤鎴蜂笌欏甸潰鐨勪氦浜掕繘琛屽搷搴旓紝騫跺湪鏈嶅姟鍣ㄥ搷搴斿埌杈炬椂鍐嶈繘琛屽鐞嗐備負浜嗗疄鐜拌繖涓姹傦紝鍙互鍦?XMLHttpRequest
涓婃敞鍐屼竴涓洖璋冨嚱鏁幫紝鐒跺悗寮傛鍦板垎媧?XMLHttpRequest
銆傜劧鍚庢帶鍒跺氨浼氳繑鍥炴祻瑙堝櫒錛屽綋鏈嶅姟鍣ㄥ搷搴斿埌杈炬椂錛屼細璋冪敤鍥炶皟鍑芥暟銆?/P>
鍦?Java Web 鏈嶅姟鍣ㄤ笂錛岃姹傚悓鍏朵粬 HttpServletRequest
涓鏍峰埌杈俱傚湪瑙f瀽浜嗚姹傚弬鏁頒箣鍚庯紝servlet 璋冪敤蹇呰鐨勫簲鐢ㄧ▼搴忛昏緫錛屾妸鍝嶅簲搴忓垪鍖栨垚 XML錛屽茍鎶?XML 鍐欏叆 HttpServletResponse
銆?/P>
鍥炲埌瀹㈡埛绔椂錛岀幇鍦ㄨ皟鐢ㄦ敞鍐屽湪 XMLHttpRequest
涓婄殑鍥炶皟鍑芥暟錛屽鐞嗘湇鍔″櫒榪斿洖鐨?XML 鏂囨。銆傛渶鍚庯紝鏍規嵁鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁錛岀敤 JavaScript 鎿嶇旱欏甸潰鐨?HTML DOM錛屾妸鐢ㄦ埛鐣岄潰鏇存柊銆傚浘 1 鏄?Ajax 寰榪旇繃紼嬬殑欏哄簭鍥俱?/P>
鍥?1. Ajax 寰榪旇繃紼?/B>
![Ajax 寰榪旇繃紼嬬殑欏哄簭鍥? src=]()
鐜板湪鎮ㄥ Ajax 寰榪旇繃紼嬫湁浜嗕竴涓珮灞傞潰鐨勮璇嗐備笅闈㈡垜灝嗘斁澶у叾涓殑姣忎竴姝ラ錛岃繘琛屾洿璇︾粏鐨勮瀵熴傚鏋滆繃紼嬩腑榪蜂簡璺紝璇峰洖澶寸湅鍥?1 鈥斺?鐢變簬 Ajax 鏂瑰紡鐨勫紓姝ユц川錛屾墍浠ラ『搴忓茍闈炲崄鍒嗙畝鍗曘?/P>
鍒嗘淳 XMLHttpRequest
鎴戝皢浠?Ajax 搴忓垪鐨勮搗鐐瑰紑濮嬶細鍒涘緩鍜屽垎媧炬潵鑷祻瑙堝櫒鐨?XMLHttpRequest
銆備笉騫哥殑鏄紝涓嶅悓鐨勬祻瑙堝櫒鍒涘緩 XMLHttpRequest
鐨勬柟娉曞悇涓嶇浉鍚屻傛竻鍗?2 鐨?JavaScript 鍑芥暟娑堥櫎浜嗚繖浜涗緷璧栦簬嫻忚鍣ㄧ殑鎶宸э紝瀹冨彲浠ユ嫻嬪綋鍓嶆祻瑙堝櫒瑕佷嬌鐢ㄧ殑姝g‘鏂瑰紡錛屽茍榪斿洖涓涓彲浠ヤ嬌鐢ㄧ殑 XMLHttpRequest
銆傛渶濂芥槸鎶婂畠褰撲綔杈呭姪浠g爜錛氬彧瑕佹妸瀹冩嫹璐濆埌 JavaScript 搴擄紝騫跺湪闇瑕?XMLHttpRequest
鐨勬椂鍊欎嬌鐢ㄥ畠灝卞彲浠ヤ簡銆?/P>
娓呭崟 2. 鍒涘緩璺ㄦ祻瑙堝櫒鐨?XMLHttpRequest
/*
* Returns a new XMLHttpRequest object, or false if this browser
* doesn't support it
*/
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// Create XMLHttpRequest object in non-Microsoft browsers
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Create XMLHttpRequest via MS ActiveX
try {
// Try to create XMLHttpRequest in later versions
// of Internet Explorer
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// Failed to create required ActiveXObject
try {
// Try version supported by older versions
// of Internet Explorer
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// Unable to create an XMLHttpRequest with ActiveX
}
}
}
return xmlreq;
}
|
紼嶅悗鎴戝皢璁ㄨ澶勭悊閭d簺涓嶆敮鎸?XMLHttpRequest
鐨勬祻瑙堝櫒鐨勬妧鏈傜洰鍓嶏紝紺轟緥鍋囪娓呭崟 2 鐨?newXMLHttpRequest
鍑芥暟鎬昏兘榪斿洖 XMLHttpRequest
瀹炰緥銆?/P>
榪斿洖紺轟緥鐨勮喘鐗╄濺鍦烘櫙錛屾垜鎯寵褰撶敤鎴峰湪鐩綍欏圭洰涓婄偣鍑?Add to Cart 鏃跺惎鍔?Ajax 浜や簰銆傚悕涓?addToCart()
鐨?onclick
澶勭悊鍑芥暟璐熻矗閫氳繃 Ajax 璋冪敤鏉ユ洿鏂拌喘鐗╄濺鐨勭姸鎬侊紙璇峰弬闃?娓呭崟 1錛夈傛濡傛竻鍗?3 鎵紺猴紝addToCart()
闇瑕佸仛鐨勭涓浠朵簨鏄氳繃璋冪敤娓呭崟 2 鐨?newXMLHttpRequest()
鍑芥暟寰楀埌 XMLHttpRequest
瀵硅薄銆傛帴涓嬫潵錛屽畠娉ㄥ唽涓涓洖璋冨嚱鏁幫紝鐢ㄦ潵鎺ユ敹鏈嶅姟鍣ㄥ搷搴旓紙鎴戠◢鍚庡啀璇︾粏瑙i噴榪欎竴姝ワ紱璇峰弬闃?娓呭崟 6錛夈?/P>
鍥犱負璇鋒眰浼氫慨鏀規湇鍔″櫒涓婄殑鐘舵侊紝鎵浠ユ垜灝嗙敤 HTTP POST
鍋氳繖涓伐浣溿傞氳繃 POST
鍙戦佹暟鎹姹備笁涓楠ゃ傜涓錛岄渶瑕佹墦寮涓庤閫氫俊鐨勬湇鍔″櫒璧勬簮鐨?POST
榪炴帴 鈥斺?鍦ㄨ繖涓ず渚嬩腑錛屾湇鍔″櫒璧勬簮鏄竴涓槧灝勫埌 URL cart.do
鐨?servlet銆傜劧鍚庯紝鎴戝湪 XMLHttpRequest
涓婅緗竴涓ご錛屾寚鏄庤姹傜殑鍐呭鏄〃鍗?緙栫爜鐨勬暟鎹傛渶鍚庯紝鎴戠敤琛ㄥ崟緙栫爜鐨勬暟鎹綔涓鴻姹備綋鍙戦佽姹傘?/P>
娓呭崟 3 鎶婅繖浜涙楠ゆ斁鍦ㄤ簡涓璧楓?/P>
娓呭崟 3. 鍒嗘淳 Add to Cart XMLHttpRequest
/*
* Adds an item, identified by its product code, to the shopping cart
* itemCode - product code of the item to add.
*/
function addToCart(itemCode) {
// Obtain an XMLHttpRequest instance
var req = newXMLHttpRequest();
// Set the handler function to receive callback notifications
// from the request object
var handlerFunction = getReadyStateHandler(req, updateCart);
req.onreadystatechange = handlerFunction;
// Open an HTTP POST connection to the shopping cart servlet.
// Third parameter specifies request is asynchronous.
req.open("POST", "cart.do", true);
// Specify that the body of the request contains form data
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// Send form encoded data stating that I want to add the
// specified item to the cart.
req.send("action=add&item="+itemCode);
}
|
榪欏氨鏄緩绔?Ajax 寰榪旇繃紼嬬殑絎竴閮ㄥ垎錛屽嵆鍒涘緩鍜屽垎媧炬潵鑷鎴鋒満鐨?HTTP 璇鋒眰銆傛帴涓嬫潵鏄敤鏉ュ鐞嗚姹傜殑 Java servlet 浠g爜銆?/P>
servlet 璇鋒眰澶勭悊
鐢?servlet 澶勭悊 XMLHttpRequest
錛屼笌澶勭悊鏅氱殑嫻忚鍣?HTTP 璇鋒眰涓鏍楓傚彲浠ョ敤 HttpServletRequest.getParameter()
寰楀埌鍦?POST 璇鋒眰浣撲腑鍙戦佺殑琛ㄥ崟緙栫爜鏁版嵁銆侫jax 璇鋒眰琚斁榪涗笌鏉ヨ嚜搴旂敤紼嬪簭鐨勫父瑙?Web 璇鋒眰涓鏍風殑 HttpSession
涓傚浜庣ず渚嬭喘鐗╄濺鍦烘櫙鏉ヨ錛岃繖寰堟湁鐢紝鍥犱負榪欒鎴戝彲浠ユ妸璐墿杞︾姸鎬佸皝瑁呭湪 JavaBean 涓紝騫跺湪璇鋒眰涔嬮棿鍦ㄤ細璇濅腑緇存寔榪欎釜鐘舵併?/P>
娓呭崟 4 鏄鐞?Ajax 璇鋒眰銆佹洿鏂拌喘鐗╄濺鐨勭畝鍗?servlet 鐨勪竴閮ㄥ垎銆?CODE>Cart bean 鏄粠鐢ㄦ埛浼氳瘽涓幏寰楃殑錛屽茍鏍規嵁璇鋒眰鍙傛暟鏇存柊瀹冪殑鐘舵併傜劧鍚?Cart
琚簭鍒楀寲鎴?XML錛孹ML 鍙堣鍐欏叆 ServletResponse
銆傞噸瑕佺殑鏄妸鍝嶅簲鐨勫唴瀹圭被鍨嬭緗負 application/xml
錛屽惁鍒?XMLHttpRequest
涓嶄細鎶婂搷搴斿唴瀹硅В鏋愭垚 XML DOM銆?/P>
娓呭崟 4. 澶勭悊 Ajax 璇鋒眰鐨?servlet 浠g爜
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws java.io.IOException {
Cart cart = getCartFromSession(req);
String action = req.getParameter("action");
String item = req.getParameter("item");
if ((action != null)&&(item != null)) {
// Add or remove items from the Cart
if ("add".equals(action)) {
cart.addItem(item);
} else if ("remove".equals(action)) {
cart.removeItems(item);
}
}
// Serialize the Cart's state to XML
String cartXml = cart.toXml();
// Write XML to response.
res.setContentType("application/xml");
res.getWriter().write(cartXml);
}
|
娓呭崟 5 鏄劇ず浜?Cart.toXml()
鏂規硶鐢熸垚鐨勭ず渚?XML銆傚畠寰堢畝鍗曘傝娉ㄦ剰 cart
鍏冪礌鐨?generated
灞炴э紝瀹冩槸 System.currentTimeMillis()
鐢熸垚鐨勪竴涓椂闂存埑銆?/P>
娓呭崟 5. Cart 瀵硅薄鐨刋ML 搴忓垪鍖栫ず渚?
<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name>Hat</name>
<quantity>2</quantity>
</item>
<item code="cha001">
<name>Chair</name>
<quantity>1</quantity>
</item>
<item code="dog001">
<name>Dog</name>
<quantity>1</quantity>
</item>
</cart>
|
濡傛灉鏌ョ湅搴旂敤紼嬪簭婧愪唬鐮侊紙鍙互浠?涓嬭澆 涓鑺傚緱鍒幫級涓殑 Cart.java錛屽彲浠ョ湅鍒扮敓鎴?XML 鐨勬柟寮忓彧鏄妸瀛楃涓叉坊鍔犲湪涓璧楓傝櫧鐒跺榪欎釜紺轟緥鏉ヨ瓚沖浜嗭紝浣嗘槸瀵逛簬浠?Java 浠g爜鐢熸垚 XML 鏉ヨ鍒欐槸鏈宸殑鏂瑰紡銆傛垜灝嗗湪榪欎釜緋誨垪鐨勪笅涓鏈熶腑浠嬬粛涓浜涙洿濂界殑鏂瑰紡銆?/P>
鐜板湪鎮ㄥ凡緇忕煡閬撲簡 CartServlet
鍝嶅簲 XMLHttpRequest
鐨勬柟寮忋備笅涓浠朵簨灝辨槸榪斿洖瀹㈡埛绔紝鏌ョ湅濡備綍鐢?XML 鍝嶅簲鏇存柊欏甸潰鐘舵併?/P>
鐢?JavaScript 榪涜鍝嶅簲澶勭悊
XMLHttpRequest
鐨?readyState
灞炴ф槸涓涓暟鍊鹼紝瀹冩寚鍑鴻姹傜敓鍛藉懆鏈熺殑鐘舵併傚畠浠?0錛堜唬琛ㄢ滄湭鍒濆鍖栤濓級鍙樺寲鍒?4錛堜唬琛ㄢ滃畬鎴愨濓級銆傛瘡嬈?readyState
鍙樺寲鏃訛紝readystatechange
浜嬩歡灝辮Е鍙戯紝鐢?onreadystatechange
灞炴ф寚瀹氱殑浜嬩歡澶勭悊鍑芥暟灝辮璋冪敤銆?/P>
鍦?娓呭崟 3 涓凡緇忕湅鍒頒簡濡備綍璋冪敤 getReadyStateHandler()
鍑芥暟鍒涘緩浜嬩歡澶勭悊鍑芥暟銆傜劧鍚庢妸榪欎釜浜嬩歡澶勭悊鍑芥暟鍒嗛厤緇?onreadystatechange
灞炴с?CODE>getReadyStateHandler() 鍒╃敤浜嗚繖鏍蜂竴涓簨瀹烇細鍑芥暟鏄?JavaScript 涓殑涓綰у璞°傝繖鎰忓懗鐫鍑芥暟鍙互鏄叾浠栧嚱鏁扮殑鍙傛暟錛屼篃鍙互鍒涘緩鍜岃繑鍥炲叾浠栧嚱鏁般?CODE>getReadyStateHandler() 鐨勫伐浣滄槸榪斿洖涓涓嚱鏁幫紝媯鏌?XMLHttpRequest
鏄惁宸茬粡瀹屾垚錛屽茍鎶?XML 鍝嶅簲浼犻掔粰璋冪敤鑰呮寚瀹氱殑浜嬩歡澶勭悊鍑芥暟銆傛竻鍗?6 鏄?getReadyStateHandler()
鐨勪唬鐮併?/P>
娓呭崟 6. getReadyStateHandler() 鍑芥暟
/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes its XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
// Return an anonymous function that listens to the
// XMLHttpRequest instance
return function () {
// If the request's status is "complete"
if (req.readyState == 4) {
// Check that a successful server response was received
if (req.status == 200) {
// Pass the XML payload of the response to the
// handler function
responseXmlHandler(req.responseXML);
} else {
// An HTTP problem has occurred
alert("HTTP error: "+req.status);
}
}
}
}
|
 |
HTTP 鐘舵佺爜
鍦ㄦ竻鍗?6 涓紝媯鏌?XMLHttpRequest 鐨?status 灞炴т互鏌ョ湅璇鋒眰鏄惁鎴愬姛瀹屾垚銆?CODE>status 鍖呭惈鏈嶅姟鍣ㄥ搷搴旂殑 HTTP 鐘舵佺爜銆傚湪鎵ц綆鍗曠殑 GET 鍜?POST 璇鋒眰鏃訛紝鍙互鍋囪浠諱綍澶т簬 200 錛圤K錛夌殑鐮侀兘鏄敊璇傚鏋滄湇鍔″櫒鍙戦侀噸瀹氬悜鍝嶅簲錛堜緥濡?301 鎴?302錛夛紝嫻忚鍣ㄤ細閫忔槑鍦拌繘琛岄噸瀹氬悜騫朵粠鏂扮殑浣嶇疆鑾峰彇璧勬簮錛?CODE>XMLHttpRequest 鐪嬩笉鍒伴噸瀹氬悜鐘舵佺爜銆傝屼笖錛屾祻瑙堝櫒浼氳嚜鍔ㄦ坊鍔?Cache-Control: no-cache 澶村埌鎵鏈?XMLHttpRequest 錛岃繖鏍峰鎴蜂唬鐮佹案榪滀篃涓嶇敤澶勭悊 304錛堟湭緇忎慨鏀癸級鏈嶅姟鍣ㄥ搷搴斻?/P> | |
鍏充簬 getReadyStateHandler()
getReadyStateHandler()
鏄鐩稿澶嶆潅鐨勪唬鐮侊紝鐗瑰埆鏄鏋滄偍涓嶄範鎯槄璇?JavaScript 鐨勮瘽銆備絾鏄氳繃鎶婅繖涓嚱鏁版斁鍦?JavaScript 搴撲腑錛屽氨鍙互澶勭悊 Ajax 鏈嶅姟鍣ㄥ搷搴旓紝鑰屼笉蹇呭鐞?XMLHttpRequest
鐨勫唴閮ㄧ粏鑺傘傞噸瑕佺殑鏄鐞嗚В濡備綍鍦ㄨ嚜宸辯殑浠g爜涓嬌鐢?getReadyStateHandler()
銆?/P>
鍦?娓呭崟 3 涓湅鍒頒簡 getReadyStateHandler()
鍍忚繖鏍瘋璋冪敤錛?CODE>handlerFunction = getReadyStateHandler(req, updateCart)銆傚湪榪欎釜紺轟緥涓紝getReadyStateHandler()
榪斿洖鐨勫嚱鏁板皢媯鏌ュ湪 req
鍙橀噺涓殑 XMLHttpRequest
鏄惁宸茬粡瀹屾垚錛岀劧鍚庣敤鍝嶅簲鐨?XML 璋冪敤鍚嶄負 updateCart
鐨勫嚱鏁般?/P>
鎻愬彇璐墿杞︽暟鎹?/STRONG>
娓呭崟 7 鏄?updateCart()
鏈韓鐨勪唬鐮併傚嚱鏁扮敤 DOM 璋冪敤媯鏌ヨ喘鐗╄濺鐨?XML 鏂囨。錛岀劧鍚庢洿鏂?Web 欏甸潰錛堣鍙傞槄 娓呭崟 1錛夛紝鍙嶆槧鏂扮殑璐墿杞﹀唴瀹廣傝繖閲岀殑閲嶇偣鏄敤鏉ヤ粠 XML DOM 鎻愬彇鏁版嵁鐨勮皟鐢ㄣ?CODE>cart 鍏冪礌鐨?generated
灞炴ф槸鍦?Cart
搴忓垪鍖栦負 XML 鏃剁敓鎴愮殑涓涓椂闂存埑錛屾鏌ュ畠鍙互淇濊瘉鏂扮殑璐墿杞︽暟鎹笉浼氳鏃х殑鏁版嵁瑕嗙洊銆侫jax 璇鋒眰澶╃敓鏄紓姝ョ殑錛屾墍浠ヨ繖涓鏌ュ彲浠ュ鐞嗘湇鍔″櫒鍝嶅簲鏈寜嬈″簭鍒拌揪鐨勬儏鍐點?/P>
娓呭崟 7. 鏇存柊欏甸潰錛屽弽鏄犺喘鐗╄濺鐨?XML 鏂囨。
function updateCart(cartXML) {
// Get the root "cart" element from the document
var cart = cartXML.getElementsByTagName("cart")[0];
// Check that a more recent cart document hasn't been processed
// already
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
// Clear the HTML list used to display the cart contents
var contents = document.getElementById("cart-contents");
contents.innerHTML = "";
// Loop over the items in the cart
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
// Extract the text nodes from the name and quantity elements
var name = item.getElementsByTagName("name")[0]
.firstChild.nodeValue;
var quantity = item.getElementsByTagName("quantity")[0]
.firstChild.nodeValue;
// Create and add a list item HTML element for this cart item
var li = document.createElement("li");
li.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(li);
}
}
// Update the cart's total using the value from the cart document
document.getElementById("total").innerHTML =
cart.getAttribute("total");
}
|
鍒版錛屾暣涓?Ajax 寰榪旇繃紼嬪畬鎴愪簡錛屼絾鏄偍鍙兘鎯寵 Web 搴旂敤紼嬪簭榪愯涓涓嬫煡鐪嬪疄闄呮晥鏋滐紙璇峰弬闃?涓嬭澆 涓鑺傦級銆傝繖涓ず渚嬮潪甯哥畝鍗曪紝鏈夊緢澶氶渶瑕佹敼榪涗箣澶勩備緥濡傦紝鎴戝寘鍚簡浠庤喘鐗╄濺涓竻闄ら」鐩殑鏈嶅姟鍣ㄧ浠g爜錛屼絾鏄棤娉曚粠 UI 璁塊棶瀹冦備綔涓轟竴涓ソ鐨勭粌涔狅紝璇瘋瘯鐫鍦ㄥ簲鐢ㄧ▼搴忕幇鏈夌殑 JavaScript 浠g爜涔嬩笂鏋勫緩鍑鴻兘澶熷疄鐜拌繖涓姛鑳界殑浠g爜銆?/P>
浣跨敤 Ajax 鐨勬寫鎴?/FONT>
灝卞儚浠諱綍鎶鏈竴鏍鳳紝浣跨敤 Ajax 涔熸湁璁稿鍑洪敊鐨勫彲鑳芥с傛垜鐩墠鍦ㄨ繖閲岃璁虹殑闂榪樼己涔忓鏄撶殑瑙e喅鏂規錛屼絾鏄細闅忕潃 Ajax 鐨勬垚鐔熻屾敼榪涖傞殢鐫寮鍙戜漢鍛樼ぞ鍖哄鍔犲紑鍙?Ajax 搴旂敤紼嬪簭鐨勭粡楠岋紝灝嗕細璁板綍涓嬫渶浣沖疄璺靛拰鎸囧崡銆?/P>
XMLHttpRequest 鐨勫彲鐢ㄦ?/STRONG>
Ajax 寮鍙戜漢鍛橀潰涓寸殑涓涓渶澶ч棶棰樻槸錛氬湪娌℃湁 XMLHttpRequest
鍙敤鏃惰濡備綍鍝嶅簲錛熻櫧鐒朵富瑕佺殑鐜頒唬嫻忚鍣ㄩ兘鏀寔 XMLHttpRequest
錛屼絾浠嶇劧鏈夊皯鏁扮敤鎴風殑嫻忚鍣ㄤ笉鏀寔錛屾垨鑰呮祻瑙堝櫒鐨勫畨鍏ㄨ緗樆姝嬌鐢?XMLHttpRequest
銆傚鏋滃紑鍙戠殑 Web 搴旂敤紼嬪簭瑕侀儴緗插湪浼佷笟鍐呴儴緗戯紝閭d箞鍙兘鎷ユ湁鎸囧畾鏀寔鍝嫻忚鍣ㄧ殑鏉冨姏錛屼粠鑰屽彲浠ヨ涓?XMLHttpRequest
鎬昏兘浣跨敤銆備絾鏄紝濡傛灉瑕侀儴緗插湪鍏叡 Web 涓婏紝閭d箞灝卞繀欏誨綋蹇冿紝濡傛灉鍋囪 XMLHttpRequest
鍙敤錛岄偅涔堝氨鍙兘浼氶樆姝㈤偅浜涗嬌鐢ㄦ棫鐨勬祻瑙堝櫒銆佹畫鐤句漢涓撶敤嫻忚鍣ㄥ拰鎵嬫寔璁懼涓婄殑杞婚噺綰ф祻瑙堝櫒鐨勭敤鎴蜂嬌鐢ㄦ偍鐨勫簲鐢ㄧ▼搴忋?/P>
鎵浠ワ紝鎮ㄥ簲褰撳姫鍔涜搴旂敤紼嬪簭鈥滃鉤紼抽檷綰р濓紝鍦ㄦ病鏈?XMLHttpRequest
鏀寔鐨勬祻瑙堝櫒涓篃鑳藉宸ヤ綔銆傚湪璐墿杞︾殑紺轟緥涓紝鎶婂簲鐢ㄧ▼搴忛檷綰х殑鏈濂芥柟寮忓彲鑳芥槸璁?Add to Cart 鎸夐挳鎵ц涓涓父瑙勭殑琛ㄥ崟鎻愪氦錛屽埛鏂伴〉闈㈡潵鍙嶆槧璐墿杞︽洿鏂板悗鐨勭姸鎬併侫jax 鐨勮涓哄簲褰撳湪欏甸潰瑁呭叆鐨勬椂鍊欏氨閫氳繃 JavaScript 娣誨姞鍒伴〉闈紝鍙湁鍦?XMLHttpRequest
鍙敤鏃舵墠鎶?JavaScript 浜嬩歡澶勭悊鍑芥暟闄勫姞鍒版瘡涓?Add to Cart 鎸夐挳銆傚彟涓縐嶆柟寮忔槸鍦ㄧ敤鎴風櫥褰曟椂媯嫻?XMLHttpRequest
鏄惁鍙敤錛岀劧鍚庣浉搴斿湴鎻愪緵搴旂敤紼嬪簭鐨?Ajax 鐗堟湰鎴栧熀浜庤〃鍗曠殑鏅氱増鏈?/P>
鍙敤鎬ц冭檻
鍏充簬 Ajax 搴旂敤紼嬪簭鐨勬煇浜涘彲鐢ㄦч棶棰樻瘮杈冩櫘閬嶃備緥濡傦紝璁╃敤鎴風煡閬撲粬浠殑杈撳叆宸茬粡娉ㄥ唽浜嗗彲鑳芥槸閲嶈鐨勶紝鍥犱負娌欐紡鍏夋爣鍜?spinning 嫻忚鍣ㄧ殑甯哥敤鍙嶉鏈哄埗鈥渢hrobber鈥濆 XMLHttpRequest
涓嶉傜敤銆備竴縐嶆妧鏈槸鐢ㄢ淣ow updating...鈥濈被鍨嬬殑淇℃伅鏇挎崲 Submit 鎸夐挳錛岃繖鏍風敤鎴峰湪絳夊欏搷搴旀湡闂村氨涓嶄細鍙嶅鍗曞嚮鎸夐挳浜嗐?/P>
鍙︿竴涓棶棰樻槸錛岀敤鎴峰彲鑳芥病鏈夋敞鎰忓埌浠栦滑姝e湪鏌ョ湅鐨勯〉闈㈢殑鏌愪竴閮ㄥ垎宸茬粡鏇存柊浜嗐傚彲浠ヤ嬌鐢ㄤ笉鍚岀殑鍙鎶鏈紝鎶婄敤鎴風殑鐪肩悆甯﹀埌欏甸潰鐨勬洿鏂板尯鍩燂紝浠庤岀紦瑙h繖涓棶棰樸傜敱 Ajax 鏇存柊欏甸潰閫犳垚鐨勫叾浠栭棶棰樿繕鍖呮嫭錛氣滅牬鍧忎簡鈥濇祻瑙堝櫒鐨勫悗閫鎸夐挳錛屽湴鍧鏍忎腑鐨?URL 涔熸棤娉曞弽鏄犻〉闈㈢殑鏁翠釜鐘舵侊紝濡ㄧ浜嗚緗功絳俱傝鍙傞槄 鍙傝冭祫鏂?/FONT> 涓鑺傦紝鑾峰緱涓撻棬瑙e喅 Ajax 搴旂敤紼嬪簭鍙敤鎬ч棶棰樼殑鏂囩珷銆?/P>
鏈嶅姟鍣ㄨ礋杞?/STRONG>
鐢?Ajax 瀹炵幇浠f浛鏅氱殑鍩轟簬琛ㄥ崟鐨?UI錛屼細澶уぇ鎻愰珮瀵規湇鍔″櫒鍙戝嚭鐨勮姹傛暟閲忋備緥濡傦紝涓涓櫘閫氱殑 Google Web 鎼滅儲瀵規湇鍔″櫒鍙湁涓涓姹傦紝鏄湪鐢ㄦ埛鎻愪氦鎼滅儲琛ㄥ崟鏃跺嚭鐜扮殑銆傝?Google Suggest 璇曞浘鑷姩瀹屾垚鎼滅儲鏈錛屽畠瑕佸湪鐢ㄦ埛杈撳叆鏃跺悜鏈嶅姟鍣ㄥ彂閫佸涓姹傘傚湪寮鍙?Ajax 搴旂敤紼嬪簭鏃訛紝瑕佹敞鎰忓皢瑕佸彂閫佺粰鏈嶅姟鍣ㄧ殑璇鋒眰鏁伴噺浠ュ強鐢辨閫犳垚鐨勬湇鍔″櫒璐熻嵎銆傞檷浣庢湇鍔″櫒璐熻澆鐨勫姙娉曟槸錛屽湪瀹㈡埛鏈轟笂瀵硅姹傝繘琛岀紦鍐插茍涓旂紦瀛樻湇鍔″櫒鍝嶅簲錛堝鏋滃彲鑳界殑璇濓級銆傝繕搴旇灝濊瘯灝?Ajax Web 搴旂敤紼嬪簭璁捐涓哄湪瀹㈡埛鏈轟笂鎵ц灝藉彲鑳藉鐨勯昏緫錛岃屼笉蹇呰仈緇滄湇鍔″櫒銆?/P>
澶勭悊寮傛
闈炲父閲嶈鐨勬槸錛岃鐞嗚В鏃犳硶淇濊瘉 XMLHttpRequest
浼氭寜鐓у垎媧懼畠浠殑欏哄簭瀹屾垚銆傚疄闄呬笂錛屽簲褰撳亣璁懼畠浠笉浼氭寜欏哄簭瀹屾垚錛屽茍涓斿湪璁捐搴旂敤紼嬪簭鏃舵妸榪欎竴鐐硅鍦ㄥ績涓娿傚湪璐墿杞︾殑紺轟緥涓紝浣跨敤鏈鍚庢洿鏂扮殑鏃墮棿鎴蟲潵紜繚鏂扮殑璐墿杞︽暟鎹笉浼氳鏃х殑鏁版嵁瑕嗙洊錛堣鍙傞槄 娓呭崟 7錛夈傝繖涓潪甯稿熀鏈殑鏂瑰紡鍙互鐢ㄤ簬璐墿杞﹀満鏅紝浣嗘槸鍙兘涓嶉傚悎鍏朵粬鍦烘櫙銆傛墍浠ュ湪璁捐鏃惰鑰冭檻濡備綍澶勭悊寮傛鐨勬湇鍔″櫒鍝嶅簲銆?/P>
緇撴潫璇?/FONT>
鐜板湪鎮ㄥ Ajax 鐨勫熀鏈師鍒欏簲褰撴湁浜嗗緢濂界殑鐞嗚В錛屽鍙備笌 Ajax 浜や簰鐨勫鎴風鍜屾湇鍔″櫒绔粍浠朵篃搴斿綋鏈変簡鍒濇鐨勭煡璇嗐傝繖浜涙槸鍩轟簬 Java 鐨?Ajax Web 搴旂敤紼嬪簭鐨勬瀯閫犲潡銆傚彟澶栵紝鎮ㄥ簲褰撶悊瑙d簡浼撮殢 Ajax 鏂瑰紡鐨勪竴浜涢珮綰ц璁¢棶棰樸傚垱寤烘垚鍔熺殑 Ajax 搴旂敤紼嬪簭瑕佹眰鏁翠綋鑰冭檻錛屼粠 UI 璁捐鍒?JavaScript 璁捐錛屽啀鍒版湇鍔″櫒绔灦鏋勶紱浣嗘槸鎮ㄧ幇鍦ㄥ簲褰撳凡緇忔瑁呬簡鑰冭檻鍏朵粬榪欎簺鏂歸潰鎵闇瑕佺殑鏍稿績 Ajax 鐭ヨ瘑銆?/P>
濡傛灉浣跨敤榪欓噷婕旂ず鐨勬妧鏈紪鍐欏ぇ鍨?Ajax 搴旂敤紼嬪簭鐨勫鏉傛ц鎮ㄨ寰楁亹鎱岋紝閭d箞鏈夊ソ娑堟伅緇欐偍銆傜敱浜?Struts銆丼pring 鍜?Hibernate 榪欑被妗嗘灦鐨勫彂灞曟妸 Web 搴旂敤紼嬪簭寮鍙戜粠搴曞眰 Servlet API 鍜?JDBC 鐨勭粏鑺備腑鎶借薄鍑烘潵錛屾墍浠ユ鍦ㄥ嚭鐜扮畝鍖?Ajax 寮鍙戠殑宸ュ叿鍖呫傚叾涓湁浜涘彧渚ч噸浜庡鎴風錛屾彁渚涗簡鍚戦〉闈㈡坊鍔犲彲瑙嗘晥鏋滅殑綆渚挎柟寮忥紝鎴栬呯畝鍖栦簡瀵?XMLHttpRequest
鐨勪嬌鐢ㄣ傛湁浜涘垯璧板緱鏇磋繙錛屾彁渚涗簡浠庢湇鍔″櫒绔唬鐮佽嚜鍔ㄧ敓鎴?Ajax 鎺ュ彛鐨勬柟寮忋傝繖浜涙鏋舵浛鎮ㄥ畬鎴愪簡綣侀噸鐨勪換鍔★紝鎵浠ユ偍鍙互閲囩敤鏇撮珮綰х殑鏂瑰紡榪涜 Ajax 寮鍙戙傛垜鍦ㄨ繖涓郴鍒椾腑灝嗙爺絀跺叾涓殑涓浜涖?/P>
Ajax 紺懼尯姝e湪蹇熷墠榪涳紝鎵浠ヤ細鏈夊ぇ閲忔湁浠峰肩殑淇℃伅娑岀幇銆傚湪闃呰榪欎釜緋誨垪鐨勪笅涓鏈熶箣鍓嶏紝鎴戝緩璁偍鍙傝?鍙傝冭祫鏂?/FONT> 涓鑺備腑鍒楀嚭鐨勬枃绔狅紝鐗瑰埆鏄鏋滄偍鏄垰鎺ヨЕ Ajax 鎴栧鎴風寮鍙戠殑璇濄傛偍榪樺簲褰撹姳浜涙椂闂寸爺絀剁ず渚嬫簮浠g爜騫惰冭檻涓浜涘寮哄畠鐨勬柟寮忋?/P>
鍦ㄨ繖涓郴鍒楃殑涓嬩竴綃囨枃绔犱腑錛屾垜灝嗘繁鍏ヨ璁?XMLHttpRequest
API錛屽茍鎺ㄨ崘涓浜涗粠 JavaBean 鏂逛究鍦板垱寤?XML 鐨勬柟寮忋傛垜榪樺皢浠嬬粛鏇夸唬 XML 榪涜 Ajax 鏁版嵁浼犻掔殑鏂瑰紡錛屼緥濡?JSON錛圝avaScript Object Notation錛夎交閲忕駭鏁版嵁浜ゆ崲鏍煎紡銆?/P>
涓嬭澆
鎻忚堪 |
鍚嶅瓧 |
澶у皬 |
涓嬭澆鏂規硶 |
Sample code |
j-ajax1.zip |
8 KB |
FTP |
鍙傝冭祫鏂?
瀛︿範
- 鎮ㄥ彲浠ュ弬闃呮湰鏂囧湪 developerWorks 鍏ㄧ悆绔欑偣涓婄殑 鑻辨枃鍘熸枃銆?BR>
- 鈥?A >Beyond the DOM鈥濓紙Dethe Elza錛?developerWorks錛?005 騫?5 鏈堬級錛氳繘琛?XML 鏂囨。璁塊棶鐨勬湁鐢ㄧ殑 JavaScript 鎶鏈?BR>
- 鈥?A >AJAX 鍙婁嬌鐢?E4X 緙栧啓 Web 鏈嶅姟鑴氭湰錛岀 1 閮ㄥ垎鈥濓紙Paul Fremantle 鍜?Anthony Elder錛宒eveloperWorks錛?005 騫?4 鏈堬級錛氱敤 Ajax 鍦ㄦ敮鎸?E4X JavaScript 鎵╁睍鐨勬祻瑙堝櫒涓繘琛?SOAP 璋冪敤銆?BR>
- 鈥?A >Ajax: A New Approach to Web Applications鈥濓紙Jesse James Garrett錛孉daptive Path錛?005 騫?2 鏈堬級錛氫粙緇?Ajax 璧鋒簮鐨勭煭鏂囥?BR>
- The Java BluePrints Solutions Catalog錛氫粙緇嶄簡 Ajax 鍦ㄥ嚑涓父瑙?Web 搴旂敤紼嬪簭鍦烘櫙涓殑搴旂敤銆?BR>
- AjaxPatterns.org錛氬寘鍚欏規敼榪?Ajax 搴旂敤紼嬪簭鐨?UI 鎶鏈?BR>
- XMLHttpRequest Usability Guidelines錛氬浣跨敤 Ajax 鎻愰珮鐢ㄦ埛浣撻獙鐨勫緩璁?BR>
- Ajax Mistakes錛欰jax 搴旂敤紼嬪簭搴斿綋閬垮厤鐨勫彲鐢ㄦч棶棰樸?BR>
- Java 鎶鏈笓鍖?/FONT>錛氬湪榪欓噷鍙互鎵懼埌鍏充簬 Java 緙栫▼鐨勫悇涓柟闈㈢殑鏂囩珷銆?BR>
鑾峰緱浜у搧鍜屾妧鏈?/B>
- Mozilla Firefox錛欴OM Inspector 鍜?JavaScript Debugger 鎵╁睍娑堥櫎浜嗚澶?Ajax 寮鍙戠殑鐥涜嫤銆?
璁ㄨ
- 鍔犲叆鏈枃鐨?A href="javascript:void forumWindow()">璁哄潧 銆?鎮ㄤ篃鍙互閫氳繃鐐瑰嚮鏂囩珷欏墮儴鎴栬呭簳閮ㄧ殑璁哄潧閾炬帴鍙傚姞璁ㄨ銆?
- developerWorks blogs錛氬姞鍏?developerWorks 紺懼尯銆?/LI>
鍏充簬浣滆?/FONT>
 |
|
Philip McCarthy 鏄竴浣嶈蔣浠跺紑鍙戦【闂紝涓撴敾 Java 鍜?Web 鎶鏈備粬鐩墠鍦ㄤ綅浜?Bristol 鐨?HP 璇曢獙瀹や粠浜?Hewlett Packard 鏁板瓧濯掍綋騫沖彴鐨勫伐浣溿傚湪鏈榪戝嚑騫翠腑錛孭hil 寮鍙戜簡澶氫釜閲囩敤寮傛鏈嶅姟鍣ㄩ氫俊鍜?DOM 鑴氭湰鐨勫瘜 Web 瀹㈡埛绔備粬寰堥珮鍏存垜浠幇鍦ㄦ湁浜嗕竴涓拡瀵瑰畠浠殑鍚嶇О銆傚彲浠ラ氳繃 Phil 鐨勭數瀛愰偖浠?philmccarthy@gmail.com 涓庝粬鑱旂郴銆?/P> |