Artiklar » Tävlingsartikel ASP » Grunderna i AJAX

 
 

Grunderna i AJAX

Författare: Andy_
Datum: den 9 oktober 2007
Antal lästa: 6224
Stjärnmärkt

Med Ajax kan du skapa snabbare, bättre och mer användarvänlig webbsida. AJAX står för Asynchronous JavaScript and XML och är baserat på Javascript och HTTP-requests (datatrafiken mellan din webbläsare och webbservern). Ordet asynchronous betyder asynkron på svenska (Mer om asynkron:  http://sv.wikipedia.org/wiki/Asynkron). Du kan bl a använda AJAX till att hämta info från sidor som är integrerade med databaser utan att behöva uppdatera sidan.

Du bör kunna grundkunskaperna inom HTML och Javascript annars kan det vara svårt att förstå dig på AJAX. Från början kan det vara en smula krångligt men man vänjer sig rätt snabbt.
    
Fungerar för nästan alla
I stort sätt fungerar AJAX på nästan alla moderna webbläsare. Nyare modeller av Firefox, Internet Explorer, Konqueror, Netscape, Opera och Safari är bara några exempel där AJAX fungerar. Enligt undersökningar gjorda av Net Applications 2007 så använder endast 0.20 % andra webbläsare än ovannämnda webbläsare. Så du behöver inte vara orolig!

Så fungerar det teoretiskt
Ett XMLHttpRequest objekt skapas via Javascript och anropar webbservern. Anropet kan innehålla flera parametrar. Det kan både vara GET och POST parametrar. Serversidan, t ex. ASP, PHP eller ASP.net (kom ihåg att det även går att använda vanlig HTML, men det är i princip meningslöst att använda Ajax då för att man inte t ex. inte hämtar någonting från en databas) tar emot anropet som sedan jobbar och returnerar resultatet. XMLHttpRequest:et tar i sin tur upp resultatet från serversidan och sparar det temporärt. Man kan sedan skriva ut resultatet på hemsidan via klienten med hjälp av Javascript. Helt utan att behöva ladda om sidan.

Detta kan man göra
Du kan skapa dynamiska chattar, gästböcker, forum som inte ens behöver uppdatera hela sidan utan bara uppdatera den delen du vill uppdatera. En chatt är ett utmärkt alternativ för att använda AJAX på. Din sida blir elegantare, snabbare och bättre. Dessutom blir det mindre trafik.

Så här fungerar det praktiskt
För det första får vi skapa ett XMLHttpRequest objekt via Javascript. Eftersom att Microsoft kom på idén att skapa en egen XMLHttpRequest objekt med ActiveX istället som inte fungerar i andra webbläsare och Internet Explorer kan inte läsa det vanliga XMLHttpRequest objektet så måste vi göra ett test som vi sedan tilldelar objektet till en variabel (i detta fall xmlHttp) om ett objekt kunde skapas. Om inget objekt skapas får man en alert om att webbläsaren inte stödjer XMLHttpRequests.
Kod:
try {
    //Nästan alla webbläsare utom Internet Explorer
    var xmlHttp = new XMLHttpRequest();
} catch(e) {
    try {
        //Internet Explorer
        var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.2.0");
    } catch(e) {
        try {
            //Äldre Internet Explorer
            var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            alert("Din webbläsare stödjer tyvärr inte XMLHttpRequests!");
            return false;
        }
    }
}


Det andra vi behöver göra är att skapa en funktion som vi kallar för ajaxRequest() och sätter url och complete som argument. url kommer att att innehålla adressen som vi ska anropa till serversidan.  complete kommer att innehålla en funktion som vi vill köra efter anropet.
Kod:
function ajaxRequest(url, complete) {
}


Vi använder oss av onreadystatechange för att få fram responsen sen när vi har anropat. Med hjälp av readyState testar vi om våran respons är klar. Om vi har fått respons så använder vi oss av responseText för att få fram responsen. responseText är alltså lagrad i metoden onreadystatechange. Vi behöver skapa en tom funktion för att köra det vi vill. Om responsen är klar kör den funktionen complete (kommer från andra argumentet i ajaxRequest funktionen).

readyState värden
Ställning – Beskrivning
0 – Begäran är signerad
1 – Begäran är godtagen
2 – Begäran har blivit skickad
3 – Begäran håller på
4 – Begäran är färdig

Du kan alltså ändra värdet 4 till en annan siffra. Du kan t ex. skriva if (xmlHttp.readyState == 3) { kod } för att skriva en kod som ska hända medan requesten håller på.
Kod:
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        complete();
    }
}



Nu när du har objektet måste du anropa till serversidan.
open() är metoden för att öppna anropet. 'GET' är att vi ska använda oss av GET-metoden (man använder QueryString då) för att det ska bli så lätt som möjligt, alternativet är 'POST'. url innehåller adressen som vi ska anropa till. True är för att vi vill att anropet ska vara asynkront motsatsen är False om du vill att anropet ska vara synkront.
Vi gör sedan anropet med metoden send(). Det kan innehålla data mellan () om du använder dig av POST-metoden. Men nu använder vi oss av GET så vi sätter det som null.
Kod:
xmlHttp.open('GET', url, true);
xmlHttp.send(null);



Exempel
Då var våran funktion, ajaxRequest klar och nu ska jag visa er hur man använder den. I detta exempel kommer vi att göra en enkel knapp med alert där texten kommer ifrån en aspsida som inte är integrerad med en databas.
Vi börjar med att skapa en knapp där vi har onclick attributet som säger att vi ska anropa ajaxRequest. Den innehåller URL som den ska anropa. Jag tänkte att vi skulle göra en alert när vi har fått responsen, vi lägger in detta i en tom funktion (som blir complete() senare) eftersom att vi anropar en funktion senare.
Anledningen till att vi kör en Math.random() är för att Internet Explorer cachar sidan och då får man aldrig ett nytt svar. Så vi får skapa unika adresser hela tiden. Det gör vi genom att lägga in ett slumptal i en QueryString. Som du kanske ser så har jag lagt in alla parametrar i en QueryString i URL:n eftersom att vi använder oss av GET-metoden.
Kod:
<!--index.html-->
<html>
    <head>
        <title>AJAX</title>
    </head>
        <script type="text/javascript">
                try {
                    //Nästan alla webbläsare utom Internet Explorer
                    var xmlHttp = new XMLHttpRequest();
                } catch(e) {
                    try {
                        //Internet Explorer
                        var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.2.0");
                    } catch(e) {
                        try {
                            //Äldre Internet Explorer
                            var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch(e) {
                            alert("Din webbläsare stödjer tyvärr inte XMLHttpRequests!");
                        }
                    }
                }
        
            function ajaxRequest(url, complete) {
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState == 4) {
                        complete();
                    }
                }

                xmlHttp.open('GET', url, true);
                xmlHttp.send(null);
            }

        </script>
    <body>
        <input value="Klicka" type="button" onclick="ajaxRequest('test.asp?name=Andy&year=2007&month=Oktober&rand=' + Math.random(), function() { alert(xmlHttp.responseText) });" />
    </body>
</html>



Vi gör ett enkelt script i ASP för att hämta. Observerar att du använder Request.Form istället för Request.QueryString om du använder POST som metod istället för GET. Men självklart kan du använda Request.QueryString fastän du använder POST som metod om du har parametrar i URL:n.
Kod:
'test.asp
<%= Request.QueryString("name") & " - " & Request.QueryString("year") & " " & Request.QueryString("month")%>


Resultat:
Andy – 2007 Oktober



Debugga
Det är rätt så svårt att debugga AJAX-request om man inte vad som skickas och inte får några felmeddelanden. Använder du Firefox så finns ett bra addon som kallas för Firebug. Där kan du se vad som händer mellan varje request. Javascript-felmeddelanden syns även tydligt. Jag rekommenderar varmt detta program!
Här hämtar du Firefox: http://www.getfirefox.com
Här hämtar du Firebug: http://www.getfirebug.com

Summering
Du har nu alltså lärt dig AJAX. Förhoppningsvis har du förstått allt. Har du inte det, är det värt att läsa igenom artikeln en extra gång för att få koll på det. För det är inte så svårt som det verkar.
Nu kan jag bara önskar dig lycka till! /Andy Truong
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan