Bruk av prototype.js
Eksempel 1
Et enkelt eksempel på henting av tekst.
Hent det hit
Javascriptkoden er slik
function getIt1(address,targetNodeId){
new Ajax.Request(address,
{method:'get',
onSuccess:function(transport){
var T=transport.responseText;
$(targetNodeId).update(T);
},
onFailure:function(){$(targetNodeId).update("Could not access content")}
});
}
og bruken er slik:
<p class="clickable" onclick="getIt1('frej1.txt','case1')">Hent det hit</p>
Vi kunne også ha gjort det slik, altså uten en egen javascriptfil:
<p class="clickable"
onclick="javascript:new Ajax.Updater('case11','frej1.txt', {method:'get'});">
Test dette
</p>
Test dette
Eksempel 2
Et enkelt eksempel på henting av headere.
Hent headers
Javascriptkoden er slik
function getIt2(address,targetNodeId){
new Ajax.Request(address,
{method:'get',
onSuccess:function(transport){
var T=transport.getAllHeaders();
$(targetNodeId).update('<pre>'+T+'</pre>');
},
onFailure:function(){$(targetNodeId).update("Could not access content")}
});
}
og bruken er slik:
<p class="clickable" onclick="getIt2('frej1.txt','case2')">Hent headers</p>
Eksempel 3
Et enkelt eksempel på ekspand/unexpand.
Javascriptkoden er slik
function doExpand(address,targetNodeId){
new Ajax.Request(address,
{method:'post',
onSuccess:function(transport){
var T=transport.responseText;
T='<span class="wxtexpand" '+'onclick="doUnExpand(\''+address+'\',\''+
targetNodeId+'\')"><span class="on"> </span></span>'+T;
$(targetNodeId).update(T);
},
onFailure:function(){$(targetNodeId).update("Could not access content")}
});
}
function doUnExpand(address,targetNodeId){
T='<span class="wxtexpand" '+'onclick="doExpand(\''+address+'\',\''+
targetNodeId+'\');"><span class="off"> </span></span>';
$(targetNodeId).update(T);
}
og bruken er slik:
<div id="case3">
<span class="expand" onclick="doExpand('frej1.txt','case3');">
<span class="on">+</span>
</span>
</div>
Eksempel 4
En nyttig og svært enkel anvendelse er "visittkort". Vi ønsker kanskje å skjule epostadressen vår eller vi ønsker ikke å overbelaste siden med kontaktinformasjon. En enkel måte å gjøre dette på er å hente kontaktinformasjon ved et AJAX oppslag:
Knappen er ganske enkelt skrevet slik:
<div id="thecard">
<input type="button"
value="Kontakt"
onclick="javascript:new Ajax.Updater('thecard','mycard.txt', {method:'get'});"/>
</div>
og det vi henter inn ser slik ut:
<div style="font-family:geneva;font-size:11px;border:solid;border-width:thin;
width:235px;padding:4px;background-color:#F7F7F7">
<img src="http://www.ia.hiof.no/~borres/self/bs1.png"
style="float:left;margin-right:4px" alt="bs"/>
Me
<br/>workplace
<br/>job: (47) 55 55 55
<br/>mob: (47) 55 55 55
<br/>my.mail@somewhere.no
</div>
Det er selvsagt ikke noe i veien for at vi kan bruke et Pythonskript som URL i stedet for 'mycard.txt' slik at vi eventuelt kan sende med parametere og få en tilpasset tilbaemelding. F.eks. slik:
new Ajax.Updater('thecard','host/cgi/mycard.py',{method:'get',parameters:'lang=en'});
Det er en slik framgangsmåte som er brukt på visittkortene nederst på sidene i dette materialet.
