prototype瀵筧jax鐨勬敮鎸?/a>
Ajax 瀵硅薄
涓婇潰鎻愬埌鐨勫叡閫氭柟娉曢潪甯稿ソ錛屼絾鏄潰瀵瑰畠鍚э紝瀹冧滑涓嶆槸鏈楂樼駭鐨勯偅綾諱笢瑗褲傚畠浠槸鍚楋紵浣犲緢鍙兘鑷繁緙栧啓浜嗚繖浜涚敋鑷沖湪浣犵殑鑴氭湰閲岄潰鏈夌被浼煎姛鑳界殑鏂規硶銆備絾鏄繖浜涙柟娉曞彧鏄啺灞變竴瑙掋?/p>
鎴戝緢鑲畾浣犲prototype.js鎰熷叴瓚ｇ殑鍘熷洜寰堝彲鑳芥槸鐢變簬瀹冪殑AJAX鑳藉姏銆傛墍浠ヨ鎴戜滑瑙ｉ噴褰撲綘闇瑕佸畬鎴怉JAX閫昏緫鐨勬椂鍊欙紝榪欎釜鍖呭浣曡瀹冩洿瀹規槗銆?/p>
Ajax 瀵硅薄鏄竴涓瀹氫箟瀵硅薄錛岀敱榪欎釜鍖呭垱寤猴紝涓轟簡灝佽鍜岀畝鍖栫紪鍐?a target="_top">AJAX 鍔熻兘娑夊強鐨勭嫛鐚劇殑浠ｇ爜銆?榪欎釜瀵硅薄鍖呭惈涓緋誨垪鐨勫皝瑁匒JAX閫昏緫鐨勭被銆傛垜浠潵鐪嬬湅瀹冧滑鐨勪竴浜涖?/p>
1.4.1.聽浣跨敤 Ajax.Request綾?/h3>
濡傛灉浣犱笉浣跨敤浠諱綍鐨勫府鍔╃▼搴忓寘錛屼綘寰堝彲鑳界紪鍐欎簡鏁翠釜澶ч噺鐨勪唬鐮佹潵鍒涘緩XMLHttpRequest瀵硅薄騫朵笖寮傛鐨勮窡韙畠鐨勮繘紼嬶紝鐒跺悗瑙ｆ瀽鍑哄搷搴?鐒跺悗澶勭悊瀹冦傚綋浣犱笉闇瑕佹敮鎸佸浜庝竴縐嶇被鍨嬬殑嫻忚鍣ㄦ椂浣犱細鎰熷埌闈炲父鐨勫垢榪愩?/p>
涓轟簡鏀寔 AJAX 鍔熻兘銆傝繖涓寘瀹氫箟浜?Ajax.Request 綾匯?/p>
鍋囧浣犳湁涓涓簲鐢ㄧ▼搴忓彲浠ラ氳繃url http://yoursever/app/get_sales?empID=1234&year=1998涓庢湇鍔″櫒閫氫俊銆傚畠榪斿洖涓嬮潰榪欐牱鐨刋ML 鍝嶅簲銆?/p>
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>
鐢?Ajax.Request瀵硅薄鍜屾湇鍔″櫒閫氫俊騫朵笖寰楀埌榪欐XML鏄潪甯哥畝鍗曠殑銆備笅闈㈢殑渚嬪瓙婕旂ず浜嗗畠鏄浣曞畬鎴愮殑銆?/p>
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse}
);
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>
浣犵湅鍒頒紶鍏?Ajax.Request鏋勯犳柟娉曠殑絎簩涓璞′簡鍚楋紵鍙傛暟{method: 'get', parameters: pars, onComplete: showResponse} 琛ㄧず涓涓尶鍚嶅璞＄殑鐪熷疄鍐欐硶銆備粬琛ㄧず浣犱紶鍏ョ殑榪欎釜瀵硅薄鏈変竴涓悕涓?method 鍊間負 'get'鐨勫睘鎬э紝鍙︿竴涓睘鎬у悕涓?parameters 鍖呭惈HTTP璇鋒眰鐨勬煡璇㈠瓧絎︿覆錛屽拰涓涓?tt>onComplete 灞炴?鏂規硶鍖呭惈鍑芥暟showResponse銆?/p>
榪樻湁涓浜涘叾瀹冪殑灞炴у彲浠ュ湪榪欎釜瀵硅薄閲岄潰瀹氫箟鍜岃緗紝濡?asynchronous錛屽彲浠ヤ負true 鎴?false 鏉ュ喅瀹欰JAX瀵規湇鍔″櫒鐨勮皟鐢ㄦ槸鍚︽槸寮傛鐨勶紙榛樿鍊兼槸 true錛夈?/p>
榪欎釜鍙傛暟瀹氫箟AJAX璋冪敤鐨勯夐」銆傚湪鎴戜滑鐨勪緥瀛愪腑錛屽湪絎竴涓弬鏁伴氳繃HTTP GET鍛戒護璇鋒眰閭ｄ釜url錛屼紶鍏ヤ簡鍙橀噺 pars鍖呭惈鐨勬煡璇㈠瓧絎︿覆錛?Ajax.Request 瀵硅薄鍦ㄥ畠瀹屾垚鎺ユ敹鍝嶅簲鐨勬椂鍊欏皢璋冪敤showResponse 鏂規硶銆?/p>
涔熻浣犵煡閬擄紝 XMLHttpRequest鍦℉TTP璇鋒眰鏈熼棿灝嗘姤鍛婅繘搴︽儏鍐點傝繖涓繘搴﹁鎻忚堪涓哄洓涓笉鍚岄樁孌碉細Loading, Loaded, Interactive, 鎴?Complete銆備綘鍙互浣?Ajax.Request 瀵硅薄鍦ㄤ換浣曢樁孌佃皟鐢ㄨ嚜瀹氫箟鏂規硶 錛?em>Complete 鏄渶甯哥敤鐨勪竴涓傛兂璋冪敤鑷畾涔夌殑鏂規硶鍙渶瑕佺畝鍗曠殑鍦ㄨ姹傜殑閫夐」鍙傛暟涓殑鍚嶄負 onXXXXX 灞炴?鏂規硶涓彁渚涜嚜瀹氫箟鐨勬柟娉曞璞°?灝卞儚鎴戜滑渚嬪瓙涓殑 onComplete 銆備綘浼犲叆鐨勬柟娉曞皢浼氳鐢ㄤ竴涓弬鏁拌皟鐢紝榪欎釜鍙傛暟鏄?XMLHttpRequest 瀵硅薄鑷繁銆備綘灝嗕細鐢ㄨ繖涓璞″幓寰楀埌榪斿洖鐨勬暟鎹茍涓旀垨璁告鏌ュ寘鍚湁鍦ㄨ繖嬈¤皟鐢ㄤ腑鐨凥TTP緇撴灉浠ｇ爜鐨?status 灞炴с?/p>
榪樻湁鍙﹀涓や釜鏈夌敤鐨勯夐」鐢ㄦ潵澶勭悊緇撴灉銆傛垜浠彲浠ュ湪onSuccess 閫夐」澶勪紶鍏ヤ竴涓柟娉曪紝褰揂JAX鏃犺鐨勬墽琛屽畬鍚庤皟鐢紝鐩稿弽鐨勶紝涔熷彲浠ュ湪onFailure閫夐」澶勪紶鍏ヤ竴涓柟娉曪紝褰撴湇鍔″櫒绔嚭鐜伴敊璇椂璋冪敤銆傛濡?tt>onXXXXX 閫夐」浼犲叆鐨勬柟娉曚竴鏍鳳紝榪欎袱涓湪琚皟鐢ㄧ殑鏃跺欎篃浼犲叆涓涓甫鏈堿JAX璇鋒眰鐨?tt>XMLHttpRequest瀵硅薄銆?/tt>
鎴戜滑鐨勪緥瀛愭病鏈夌敤浠諱綍鏈夎叮鐨勬柟寮忓鐞嗚繖涓?XML鍝嶅簲錛屾垜浠彧鏄妸榪欐XML鏀捐繘浜嗕竴涓枃鏈煙閲岄潰銆傚榪欎釜鍝嶅簲鐨勪竴涓吀鍨嬬殑搴旂敤寰堝彲鑳藉氨鏄壘鍒板叾涓殑鎯寵鐨勪俊鎭紝鐒跺悗鏇存柊欏甸潰涓殑鏌愪簺鍏冪礌錛屾垨鑰呯敋鑷沖彲鑳藉仛鏌愪簺XSLT杞崲鑰屽湪欏甸潰涓駭鐢熶竴浜汬TML銆?/p>
鏇村畬鍏ㄧ殑瑙ｉ噴錛岃鍙傜収 Ajax閫夐」鍙傝?/a>銆?/p>
1.4.2.聽浣跨敤 Ajax.Updater 綾?/h3>
濡傛灉浣犵殑鏈嶅姟鍣ㄧ殑鍙︿竴绔繑鍥炵殑淇℃伅宸茬粡鏄疕TML浜嗭紝閭ｄ箞浣跨敤榪欎釜紼嬪簭鍖呬腑 Ajax.Updater 綾誨皢浣夸綘鐨勭敓媧誨彉寰楁洿鍔犲緱瀹規槗銆傜敤瀹冧綘鍙渶鎻愪緵鍝竴涓厓绱犻渶瑕佽AJAX璇鋒眰榪斿洖鐨凥TML濉厖灝卞彲浠ヤ簡錛屼緥瀛愭瘮鎴戝啓璇存槑鐨勬洿娓呮銆?/p>
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
浣犲彲浠ョ湅鍒幫紝榪欐浠ｇ爜姣斿墠闈㈢殑渚嬪瓙鏇村姞綆媧侊紝涓嶅寘鎷?onComplete 鏂規硶錛屼絾鏄湪鏋勯犳柟娉曚腑浼犲叆浜嗕竴涓厓绱爄d銆?鎴戜滑鏉ョ◢紼嶄慨鏀逛竴涓嬩唬鐮佹潵鎻忚堪濡備綍鍦ㄥ鎴風澶勭悊鏈嶅姟鍣ㄦ閿欒鎴愪負鍙兘銆?/p>
鎴戜滑灝嗗姞鍏ユ洿澶氱殑閫夐」錛?鎸囧畾澶勭悊閿欒鐨勪竴涓柟娉曘傝繖涓槸鐢?onFailure 閫夐」鏉ュ畬鎴愮殑銆?/p>
鎴戜滑涔熸寚瀹氫簡涓涓?placeholder 鍙湁鍦ㄦ垚鍔熻姹備箣鍚庢墠浼氳濉厖銆備負浜嗗畬鎴愯繖涓洰鐨勬垜浠慨鏀逛簡絎竴涓弬鏁頒粠涓涓畝鍗曠殑鍏冪礌id鍒頒竴涓甫鏈変袱涓睘鎬х殑瀵硅薄錛?success (涓鍒嘜K鐨勬椂鍊欒鐢ㄥ埌) 鍜?failure (鏈夊湴鏂瑰嚭闂鐨勬椂鍊欒鐢ㄥ埌) 鍦ㄤ笅闈㈢殑渚嬪瓙涓病鏈夌敤鍒?tt>failure灞炴э紝鑰屼粎浠呭湪 onFailure 澶勪嬌鐢ㄤ簡 reportError 鏂規硶銆?/p>
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
濡傛灉浣犵殑鏈嶅姟鍣ㄩ昏緫鏄繑鍥濲avaScript 浠ｇ爜鑰屼笉鏄崟綰殑 HTML 鏍囪錛?Ajax.Updater瀵硅薄鍙互鎵ц閭ｆJavaScript浠ｇ爜銆備負浜嗕嬌榪欎釜瀵硅薄瀵瑰緟鍝嶅簲涓篔avaScript錛屼綘鍙渶鍦ㄦ渶鍚庡弬鏁扮殑瀵硅薄鏋勯犳柟娉曚腑綆鍗曞姞鍏?tt>evalScripts: true灞炴с?/p>