AJAX med jQuery

Hva

Det finnes en rekke JavaScriptbiblioteker som handterer AJAX. Jeg har i tur og orden testet flere av dem, og de har fungert greitt. Når jeg har stoppet opp med jQuery [1] så er det fordi jQuery ser ut til å være, og i nærmeste framtid forbli, det mest utbredte, og dermed mest testede, biblioteket. Dokumentasjonene er grei og oversiktlig. Jeg bruker i hovedsak jQuery til AJAX, men det er langt flere muligheter i jQuery, og det utvikles stadig "plugins".

Eksempel 1

Et enkelt eksempel på henting av tekst.

Javascriptkoden er slik

function getIt1(address,targetNodeId){
    $.ajax({
        url:address,
        success:function(data)
        {
            $('#'+targetNodeId).html(data);
            // or: 
            // document.getElementById(targetNodeId).innerHTML=data;
        },
        error:function(data)
        {
            $('#'+targetNodeId).html('error');
        }
        });
    }

og bruken er slik:

<p class="clickable" onclick="getIt1('frej1.txt','case1')">Hent det hit</p>

Hvis du ser på funksjonen getIt() over så er strukturen slik:

function getIt(a,b){
	$.ajax( obj );
}

eller om vi vil:

function getIt(a,b){
	jQuery.ajax( obj );
}

Vi kaller altså funksjonen ajax med et objekt som parameter. Hvilke egenskaper dette objektet kan ha er beskrevet i jQuery-dokumentasjonen. I dette tilfellet bruker url, som sier hvor vi skal hente data og vi angir hvilke funksjoner som skal kalles når ting går bra, success, og galt, error. Alle andre mulige egenskaper er satt til det som jQuery har definert som default.

Eksempelet overfor kunne vi også ha løst slik:

<button class="demobutton" onclick="$('#case11').load('frej1.txt');">Test dette</button>

Eksempel 2

Et enkelt eksempel på henting av headere.

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:

<button class="demobutton" onclick="getIt2('frej1.txt','case2')">getIt2('frej1.txt','case2')</button>

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="wxtexpand" onclick="doExpand('frej1.txt','case3');">
	<span class="off"> </span>
</span>
</div>

De to CSS-klassene on og off er definert med bakgrunnsbilder.

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="bs8.gif" 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('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.

En sonnette av Shakespeare (1..158)

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:'https://borres.hiof.no/wep/js/ajax/demo6/shakereturn.py',
        data:params,
        success:function(data)
        {
            $('#'+targetNodeId).html(data);
        },
        error:function(data)
        {
            $('#'+targetNodeId).html('error');
        }
        });
    return false;
}

Referanser

jQuery Javascript bibliotek jquery jquery.com/ 04-02-2014