19-4 使用 Prototype.js 來進? AJAX 網?設?

ثebW̱`QΨ쪺 JavaScript frameworkANO prototype.jsAiѤUC}UG
http://www.prototypejs.org
ҿת frameworkAiHݦO JavaScript ε{]APIAάO Appliation Program Interface^AiHڰ򥻪 JavaScript Ӵѧi\Cڭ̥p`ҥΪ prototype.js O 1.5.1.1]2007/06/19 o^AҴѪXR\pUG be@p`ڭ̤wgF AJAX 򥻨ϥΤ覡νdҡAp`Npϥ prototype.js Ӷi AJAX ]pCAڭ̪ݬݤ@²檺dҡG

Example]ajax/ajaxViaPrototype01.htm^G

oO@Ӭdߺq⪺AunAbrJqWrANiHϥ AJAX DPBǿ覡AߧYƮw ajax/test.mdb idߡAñNqTܦbrUCҦpAڭ̿JuHRgvëUueXvɡAN|ݨHRgTwgܦbUG

Hint
oO@ӤѪƮwAA]iHJLqݬݡAҦpPذBűҽBLнB彫BC

ӳoӹL{èSgѺӹFCdҪlXpUG

lɡ]ajax/ajaxViaPrototype01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// ܬdߵG
function showQueryResult(xmlHttpObj){
	Element.update('queryResult', xmlHttpObj.responseText);
}
// eXƮwd
function sendQuery() {
	var url = 'queryDb01.asp';				// A{	
	var queryString = 'singerName=' + $F('singerName');	// ѼƦC
	var ajax = new Ajax.Request(url, {method:'post', parameters:queryString, onComplete:showQueryResult});
}
</script>

qjWG<input type="text" id="singerName" value="HRg">
<input type="button" onClick="sendQuery()" value="eX">
<div id="queryResult"></div>

</body>
</html>

򥻤WAPrototype.js uON XMLHttpRequest u]_ӡvA򥻪y{٬OSܡAHW@`һTӰ򥻨BJӬݡAɮפλpUG

  1. ݪoeơGsendQuery()
    ƩwqFݪ{X]Ҭ queryDb01.asp^APɤ][JFѼƦC]Ҭ singerName=HRg^A̫Უ AJAX éwqѼơAe컷ݰC䤤XIn`NG
    • u$F('singerName')vO Prototype.js ҴѪ²ƻykA\udocument.getElementById('singerName').valuevCP˦aAڭ̤]iHϥΡu$('singerName')vӥN id singerName A\udocument.getElementById('singerName')vC

      Hint
      pGڭ̦b $() Jh idAƷ|^ǹo id Ҧ}CC

    • AJAX 󪺲ĤGӰѼƬOu{method:'post', parameters:queryString, onComplete:showQueryResult}vAѼƥ@Ө㦳T쪺A]ڭ̬ƦܥiHN sendQuery() ƪĤTCԭzG var ajax = new Ajax.Request(url, {method:'post', parameters:queryString, onComplete:showQueryResult}); 令UC{XG var ajaxParam = new Object(); ajaxParam.method='post'; ajaxParam.parameters=queryString; ajaxParam.onComplete=showQueryResult; var ajax = new Ajax.Request(url, ajaxParam); ұo쪺GO@˪C
  2. ݪ{XGqueryDb01.asp
    {XpUG

    lɡ]ajax/queryDb01.asp^G]ǦϰUYi^
    <%@language=jscript%>
    <%//AJAX remot program in charge of database query%>
    <%Response.Charset="utf-8"%>
    <%
    // Ǧ^d߸ƮwĤ@
    function getFirstRecordFromQueryResult(database, sql){
    	var Conn = Server.CreateObject("ADODB.Connection");
    	Conn.ConnectionString = "DBQ=" + Server.MapPath(database) + ";Driver={Microsoft Access Driver (*.mdb)};Driverld=25;FIL=MS Access;";
    	Conn.Open();
    	var RS = Conn.Execute(sql);
    	var out="<p><b>Query Result of <u>"+sql+"</u>:</b><p>";
    	if (RS.EOF)
    		return(out+"No data found!");
    	for (i=0; i<RS.Fields.Count; i++)
    		out=out+"<font color=red>"+RS(i).Name+"</font>: <font color=blue>"+RS(i)+"</font><br>";
    	RS.Close();
    	Conn.Close();
    	return(out);
    }
    
    database="test.mdb";		// ƮwW
    sql="SELECT * from Singer where ChineseName = '"+Request("singerName")+"'";	// yX SQL O
    outStr=getFirstRecordFromQueryResult(database, sql);				// ^DzĤ@dߵG
    Response.write(outStr);		// LXdߵG
    %>

    \²AYOϥΪ̿JqWrAyX SQL ROAðeJƮwdߡAñNdߵGLXӡC

  3. ݪơGshowQueryResult()
    bƤAڭ̥uϥΤ@C{XG Element.update('queryResult', xmlHttpObj.responseText); o]O Prototype.js ҴѪ²ƻykA\ document.getElementById('queryResult').innerHTML=xmlHttpObj.responseText
t~٦@InSO`NGѩƮwMsX@PA`|ɭPýX͡A]ڭ̳oӽdҪɮס]ajaxViaPrototype01.htm MqueryDb01.asp^AOĥ UTF-8 sXA]Ū̦b}ҳoɮ׮ɡAn`NArs边O_䴩 UTF-8 sXɮ׽s\C

Hint
@`Ϊrs边AҦpOƥ]notepad.exe^ UltraEditA䴩 UTF-8 rɪ˵MsC

ƹWAWzd٥iH²ApGڭ̥uONdߵGܦbWAiHΥt@ Prototype.js AJAX ҴѪ Ajax.Updater()AϥνdҦpUG

Example]ajax/ajaxViaPrototype02.htm^G

dҩMe@ӽdҪ\৹ۦPAƦܳsݪ{XOb queryDb01.aspAߤ@POAڭ̧ΤF Ajax.Updater()AҥHiHw^ǸƩҥe{mAdҭlXpUG

lɡ]ajax/ajaxViaPrototype02.htm^G]ǦϰUYi^
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Updater() in Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// eXƮwd
function sendQuery() {
	var url = 'queryDb01.asp';				// A{	
	var queryString = 'singerName=' + $F('singerName');	// ѼƦC
	var ajax = new Ajax.Updater('queryResult', url, {method:'post', parameters:queryString});
}
</script>

qjWG<input type="text" id="singerName" value="HRg">
<input type="button" onClick="sendQuery()" value="eX">
<div id="queryResult"></div>

</body>
</html>

bWzlXAAjax.Updater() Ĥ@ӰѼƬO 'queryResult'AoNON^ǸƱN|Qw document.getElementById('queryResult').innerHTMLA]ڭ̴Nt~bg@ӭtdܵGơAyܻAMe@ӽdҤAڭ̤wgݭn showQueryResult() oӨƤFAҥHӺlXݰ_ӧ[²C

Yn AJAX y{ii@BAڭ̥iHϥ Ajax.Responders.register ӵUXӨơAHK AJAX u@y{CҦpAbd߸ƮwɡAYɶL[Aڭ̳q`ƱbܡuƳBz...vrˡAHKϥΪ̥HOݦAFCHUo²檺dҡANF즹\G

Example]ajax/ajaxViaPrototype03.htm^G

ڭIueXvɡA|ܡuƳBzAеy...vrˡApUG

dߧAҦ^ǪƴN|ܦbWCdҪlXpUG

lɡ]ajax/ajaxViaPrototype03.htm^G]ǦϰUYi^
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Responders.register in Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// eXƮwd
function sendQuery(){
	// U AJAX YǨƥҹ
	Ajax.Responders.register ({
		onLoading:
			function(){
				Element.update('queryResult', '<font color=red>d߸ƤAеy...</font>');
			},
		onComplete:
			function(junk, xmlHttpObj){
				Element.update('queryResult', xmlHttpObj.responseText);
			}
		});
	var url = 'queryDb03.asp';				// A{	
	var queryString = 'singerName=' + $F('singerName');	// ѼƦC
	var ajax = new Ajax.Request(url, {method:'post', parameters:queryString});
}
</script>

qjWG<input type="text" id="singerName" value="HRg">
<input type="button" onClick="sendQuery()" value="eX">
<div id="queryResult"></div>

</body>
</html>

bdҤAڭ̨ϥ Ajax.Responders.register() ӵUFӨơA onLoading ƥ󪺨ƥiH_LXuƳBzAеy...vTAӹ onComplete ƥ󪺨ƫhiH̫ܳdߵGC


JScript {]pPΡGΩAݪ ASP