AJAX Del 1 - Introduktion till AJAX

Vad är AJAX?

AJAX betyder Asynchronous Javascript And XML.
Många tror att AJAX är en ny teknik, på sätt och vis har man rätt, men ändå inte. AJAX en modernare kombination av en gammal programmeringsteknik vars mening är att skapa program med mer tilltalande gränssnitt.

När vi vanligtvis klickar på en länk så laddas hela sidan om för att vi ska se resultatet. Med AJAX är det nu historia, för med AJAX kan man genomföra flera förfrågningar samtidigt - som körs i bakgrunden - utan att sidan behöver laddas om.

Skapa Objektet

AJAX använder sig av (består av) JavaScript-objektet XMLHttpRequest som har hand om sändning och mottagning av data. Detta körs på webservern.

Hur skapar man ett sådant objekt?

I vissa versioner av Internet Explorer:

new ActiveXObject("Microsoft.XMLHTTP")

Medan i andra versioner:

new ActiveXObject("Msxml2.XMLHTTP")

Och som vi vet så är inte alla webbläsare lika. I Netscape:

new XMLHttpRequest()

Men hur gör vi då? Alla använder olika webbläsare!

Då gör vi en enkel If-sats som kontrollerar vilken webbläsare man använder och anpassar därefter objektet efter det.

if (window.XMLHttpRequest) { // Firefox, Opera, Safari 
    http_request = new XMLHttpRequest(); 
 } else if (window.ActiveXObject) { // Internet Explorer 
    try { 
       http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
 
    } catch (e) { 
       try { 
          http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e) {} 
    } 
 }

Koppla till en funktion

Det vi vill göra är att när ovanstående är klart så vill vi att en funktion skall aktiveras, detta gör vi genom att använda oss av onreadystatechange.

http_request.onreadystatechange = function() { handle_request(http_request); }; 

Efter det måste göra självaste anropet till filen. I detta fall kommer vi att använda oss av en textfil som vi kallar för ajax.txt.

http_request.open('GET', 'ajax.txt', true); 

Vi har nu valt att använda oss av ett anrop av typen GET i detta fall. Vi kan även välja POST om vi vill, men det gör vi inte den här artikeln.

Kort bara: Vad är skillnaden mellan GET och POST?

GET begär en fil från servern, och POST skickar data till servern.

Okey då fortsätter vi...

Efter det har vi anropat filen ajax.txt och sist men inte minst så berättar vi för funktionen att anropet är asynkront genom att sätta tredje värdet till true.

Har vi gjort anropet än?

Nej, det ska vi göra nu!

http_request.send(null);

Varför sätter vi null som parameter? Kan vi ändra på det?

Eftersom vi använder oss av GET så skickar vi ingen data, utan vi hämtar. Så om vi har parametrar som vi vill lägga till i anropet så får vi göra det där vi angett filen. Säg t.ex. att vi ska anropa ajax.asp istället för ajax.txt, då kanske vi behöver skicka med en parameter.

http_request.open('GET', 'ajax.asp?id=1', true); 

Men om vi använder oss av POST så skickar vi dessa parametrar i send() istället.

http_request.open('POST', 'ajax.asp', true);
 http_request.send('id=1');

Kontrollera hur det gick

När man skickar ett anrop så förväntar man sig ett svar, eller hur? För detta använder vi nedanstående kod:

if (http_request.readyState == 4) 
 {
   //Kommer man hit så är det lungt, man fick respons
 } else 
 {
   //Är man här så är det inte klart än
 }
 

Kontrollera statusen på responsen
Det finns en massa koder för de olika statusen för HTTP server response, men i denna artikel är vi bara intresserade av 200 som innebär OK.

if (http_request.status == 200) 
 {
   // perfekt!
 } else {
   // ett problem med requesten uppstod,
   // det kan vara till exempel att sidan inte hittades (404)
   // eller att den sidan som anropades har ett internt fel i t.ex. ASP koden (500)
 }
 

Hela koden

Nu när vi lärt oss de olika delarna så är det dags att sätta ihop dem till ett enda fungerande script.

function makeRequest() 
 { 
    var http_request = getHttpRequest(); 
 
    http_request.onreadystatechange = function() { handle_request(http_request); }; 
    http_request.open('GET', 'ajax.txt', true); 
    http_request.send(null); 
     
    return false; 
 } 
 
 function handle_request(handle) 
 { 
    if (handle.readyState != 4) { 
       //Hit kommer du om anropet inte är komplett
       return; 
    } 
     
    if (handle.status && handle.status != 200) { 
       //Något gick snett på server-sidan 
       alert(Ett fel uppstod. Kod:' + handle.status ); 
       return; 
    } 
     
    //Vi väljer att visa resultatet i en DIV som har ID = 'resultat'
    document.getElementById('resultat').innerHTML = handle.responseText; 
 } 
 
     
 //Returnerar ett XMLHttpRequest objekt 
 function getHttpRequest() 
 { 
    var handle = false; 
 
    if (window.XMLHttpRequest) { // Firefox, Opera, Safari 
       handle = new XMLHttpRequest(); 
 
    } else if (window.ActiveXObject) { // Internet Explorer 
       try { 
          handle = new ActiveXObject("Msxml2.XMLHTTP"); 
       } catch (e) { 
          try { 
             handle = new ActiveXObject("Microsoft.XMLHTTP"); 
          } catch (e) {} 
       } 
    } 
 
    if (!handle) { 
       alert('Ger upp! Kan inte skapa ett XMLHTTP-objekt'); 
       return false; 
    } 
 
    return handle; 
 } 

Den koden ska du ha i din JavaScript fil, eller direkt i dokumentet, det där får du välja själv.

HTML-Koden

Och här har du ett exempel på hur det kan se ut på sidan som du vill ha anrops-knappen på:

<div id="resultat"></div><br />
 <a href="javascript:void(0);"" onclick="makeRequest()">Klicka här</a>

När du klickar på länken så kommer innehållet från ajax.txt att visas i DIVen.

Skapades: 2007-07-06 16:09:15
Skribent: Shadi
Lästs 3892 gånger
Betyg: 0 (artikeln har endast 1 röster, det krävs minst 5 för ett betyg)

Kommentarer