!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

AJAX
jQuery.js
Børre Stenseth
AJAX > Kodestrategier >jQueryAjax

Bruk av jQuery.js

Hva
Noen eksempler på bruk av jquery-biblioteket

JavaScript- biblioteket jQuery [1] ser ut til å være et nyttig og greitt bibliotek for flere formål. Det er godt dokumentert på hjemmesidene. Her skal vi bare se på noen eksempler på bruk av jQuery i forbindelse med AJAX.

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.

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:'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;
}
Referanser
  1. jQuery Javascript bibliotek jquery jquery.com/ 04-07-2010
Vedlikehold

B.Stenseth, juli 2009

( Velkommen ) AJAX > Kodestrategier >jQueryAjax ( Prototype )