Bruk av jQuery.js
Eksempel 1
Et enkelt eksempel på henting av tekst.
Hent det hit
Javascriptkoden er slik
function getIt1(address,targetNodeId){
$.ajax({
url:address,
success:function(data)
{
$('#'+targetNodeId).html(data);
},
error:function(data)
{
$('#'+targetNodeId).html('error');
}
});
}
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="$('#case11').load('frej1.txt');">
Test dette
</p>
Test dette
Eksempel 2
Et enkelt eksempel på henting av headere.
Hent headers
Javascriptkoden er slik
function getIt2(address,targetNodeId){
$.ajax({
url:address,
type:'GET',
success:function(data,status,xhr)
{
var T=xhr.getAllResponseHeaders();
$('#'+targetNodeId).html('<pre>'+T+'</pre>');
},
error:function(data)
{$('#'+targetNodeId).html("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){
$.ajax({
url:address,
type:'POST',
success:function(data,status,xhr)
{
var T=xhr.responseText;
T='<span class="wxtexpand" '+'onclick="doUnExpand(\''+address+'\',\''+
targetNodeId+'\')"><span class="on"> </span></span>'+T;
$('#'+targetNodeId).html(T);
},
error:function(data)
{$('#'+targetNodeId).html("Could not access content")}
});
}
function doUnExpand(address,targetNodeId){
T='<span class="wxtexpand" '+'onclick="doExpand(\''+address+'\',\''+
targetNodeId+'\');"><span class="off"> </span></span>';
$('#'+targetNodeId).html(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="$('#thecard').load('mycard.txt');"/>
</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:
$('#thecard').load('host/cgi/mycard.py?lang=en');
Det er en slik framgangsmåte som er brukt på visittkortene nederst på sidene i dette materialet.
Eksempel 5
Parametere fra en form.
Javascriptkoden er slik
function goGetShakespeare(frm,targetNodeId){
var nr=parseInt(frm.nr.value);
if( (isNaN(nr)) || (nr < 1) ||(nr > 158))
nr=18; // use as default
var params='sonette_num='+nr;
$.ajax({
url:'http://www.it.hiof.no/~borres/cgi-bin/ajaxtest/shakereturn.py',
data:params,
success:function(data)
{
$('#'+targetNodeId).html(data);
},
error:function(data)
{
$('#'+targetNodeId).html('error');
}
});
return false;
}
