Artiklar » JavaScript » AJAX Del 1 - Hämta info från databas

 
 

AJAX Del 1 - Hämta info från databas

Författare: Znake
Datum: den 10 december 2006
Antal lästa: 8968
Ej stjärnmärkt

I denna artikel kommer jag att gå igenom hur man med hjälp av AJAX hämtar information från databasen. Jag kommer att visa hur man enkelt skapar ett eget LAJV script som man kan använda på sin sida.

Kom ihåg att detta script går att modifiera väldigt lätt och man kan använda det till chatt och andra funktioner.


Vilka databaser fungerar det med?
Alla.

Vilket Serverklientspråk fungerar detta med?
Mer eller mindre alla. Självaste AJAX koden är ju skriven i JavaScript så det är det enda du behöver bry dig om för tillfället. Resten tar vi sen.

Att göra en "HTTP Request"
För att kunna göra en HTTP Request så måste du ha en klass som sköter denna funktionalitet. En sådan klass finns bland annat i Internet Explorer som ett ActiveX objekt och kallas för XMLHTTP. I Mozilla och andra webbläsare kallas den för XMLHttpRequest.

Skapa rätt objekt
FÖr att skapa rätt objekt för rätt webbläsare så skriver vi följande i koden.

Kod:

if(window.XMLHttpRequest) //Detta är för Mozilla, Safari...
{
  http_request = new XMLHttpRequest();
}
else if(window.ActiveXObject) //Detta är för Internet Explorer
{
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
}



Men för vissa av Mozilla versionerna kommer detta inte att fungera om du inte har en XML mime-type med i koden, därför blir man tvungen att skapa en extra metod som ska "override"a det som skickas av servern (ifall det inte är text/xml):

Kod:

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');



Vad ska hända när du får respons från servern?
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.

Kod:

http_request.onreadystatechange = functionensNamn
{
  //Här händer det något
};



Gör självaste anropet
Nu när vi har bestämt vad som skall hända så ska vi göra självaste anropet (request).

Kod:

http_request.open('GET', 'sida.asp', true);
http_request.send(null);



Den första parametern är open() följt av den sidan som vi vill anropa, sida.asp, och sist men inte minst så sätter vi true som helt enkelt berättar för oss att anropet är asynkront (läs mer här: http://sv.wikipedia.org/wiki/Asynkron).

Parametern send() kan innehålla vilken data som helst till servern som postar anropet. Då ska du sätta in datan i QueryStrings, ex:

namn=shadi&alder=21

Hantera Server Response
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:

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 HHTP server response, men i denna artikel är vi bara intresserade av 200 som innebärd OK.

Kod:

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)
}



Nu ska vi sätta ihop allt till ett enda stort script
Detta script ska hämta informationen från en annan sida på servern. Läs noggrant i kommentarerna så du hänger med. Jag kommer efter scriptet att visa dig exempel på hur sidan som anropas kan se ut.

Kod:

<script type="text/javascript" language="javascript">

  function makeRequest(url) { //Märk väl att vi skickar in sidan som vi ska öppna som parameter (url)
  var http_request = false;

  if (window.XMLHttpRequest) { // Detta är fö Mozilla, Safari, ...
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
  http_request.overrideMimeType('text/xml');
  // See note below about this line
  }
  } else if (window.ActiveXObject) { // Detta är för Internet Explorer

  try { //Här måste vi köra en try och catch för IE så vi får rätt objekt
  http_request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {}
  }

  }

  if (!http_request) { //om anropet är fortfarande falskt så har vi inte lyckats, varna om det
  alert('Jag ger upp :( Kunde inte skapa en XMLHTTP instans');
  return false;
  }

  http_request.onreadystatechange = function() { alertContents(http_request); }; //Nu pekar vi på den funktionen vi vill aktivera
  http_request.open('GET', url, true); //Här skickas parametern URL in
  http_request.send(null); //och så sker anropet med SEND()

  }

  function alertContents(http_request) { //Det är hit vi kommer sen

  if (http_request.readyState == 4) { //Om allt har laddat klart...
  if (http_request.status == 200) { //kontrollera ifall allt är OK, för isåfall...
  document.getElementById('lajv').innerHTML = http_request.responseText; //hämta texten och visa den i en DIV (lajv)
  } else {
  document.getElementById('lajv').innerHTML = "Ett fel uppstod vid anropet"; //...annars så har något gått snett
  }
  }

  }


  //Här skapar jag en timer som ska anropa min sida var 10:e sekund
  //Detta är självklart valfrimakeRequesttt, du kan välja att istället använda en länk för att aktivera det hela
  //Märk väl att jag använder mig av Math.random() i länken, jag ska förklara nedan varför.
  var interval = setInterval("makeRequest('sida.asp?rnd='+Math.random())",8000);

</script>



Och här är DIVen som skall få in alla värden i sig:

Kod:

<div id="lajv"></div>



Math.random()??
Jag ska förklara enkelt och snabbt varför jag skickar med ett slumpat nummer i en QueryString (rnd).
För det första så behöver den inte heta rnd, den kan heta vad som helst.

Till problemet:
När man gör ett anrop till samma sida hela tiden, som i detta script, så kommer Internet Explorer att chache:a den länken och det resulterar att du inte får ut nya värden från sidan du anropar (om det är så att värdet ändras i sidan du anropar). Och eftersom det är ett LAJV script vi utvecklar här så kommer

texten som skickas tillbaka att alltid vara något nytt.

Det är därför jag skapar en querystring med ett nytt värde varje gång sidan anropas, på detta sätt kan vi vara mer säkra på att den länken inte cache:as och vi får ett fungerande script.

Hur ska sidan vi anropar se ut då?
Det enda du behöver skriva in i den sidan du anropar är den koden som ska arbeta. Strunta i HTML koden och allt annat (<html><head>...).
Det viktiga är att den sidan du anropar skriver ut det som skall returneras.

Exempel #1
Sidan som du anropar kan vara ett HTML dokument som heter sida.html. Och då behöver den bara innehålla följande:

Kod:

Det här är texten som skall visas



Men eftersom vi utvecklar ett LAJV script så vill vi ha lite mer än så ;)

Exempel #2
Jag kommer inte att utveckla hela LAJV scriptet, det får du själv göra, jag vill bara visa hur det fungerar med AJAX.

Kod:

<%
'1. Skapa databaskopplingen

'2. Hämta raden som skall visas från databasen, ex:
'I detta exempel så hämtar jag en slumpvis rad från tabellen LAJV (MySQL databas)
Set RecSet = Connect.Execute("SELECT * FROM lajv ORDER BY RAND() LIMIT 1")

'Bearbeta allt och skriv sedan ut resultatet
Response.Write(RecSet("columnen"))
%>



Summering
Det vi har gjort är att vi har använt oss av AJAX för att hämta information från en databas och publicera det i en DIV utan att behöva ladda om sidan.

Slutord
Reservering för stavfel.
Säg gärna vad ni tycker om denna artikel och rapportera eventuella fel.

Nästa artikel kommer att handla om hur man kan skicka in data i databasen med AJAX.

Mvh
Shadi Domat
 
     

  » 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,0938 sekunder att ladda sidan