LP_MAXI
Ingemar
Pettersoft
ViktorNiklasson
chrillemeterLajv skript med AJAX
Hej!
I denna artikel kommer jag att gå igenom hur man bygger ett LAJV-skript med hjälp av AJAX, ASP och MySQL (självklart får du använda en annan databas om du vill det).
Lär dig grunderna
Eftersom jag har skrivit en artikel om vad AJAX är och hur det fungerar så tänker jag gå snabbt in på detta skript utan att ta hänsyn till det grundläggande.
Har du inte läst min artikel? Då rekomenderar jag att du gör det, den heter AJAX Del 1 - Introduktion till AJAX.
Skapa JS-filen
Det första vi ska göra är att skapa JavaScript-filen där vi ska klistra in självaste AJAX funktionen, men i denna funktion kommer vi att göra en liten ändring (eller flera små ändringar). Jag kommer med hjälp av olika färger markera det som jag har ändrat på eller lagt till (jämfört med grundkoden från min förra artikel, se länken ovan), för att sedan förklara varför jag gjorde det jag gjorde. Okey?
function makeRequest(page,divid)
{
var http_request = getHttpRequest();
http_request.onreadystatechange = function() { handle_request(http_request,divid); };
http_request.open('GET', page, true);
http_request.send(null);
return false;
}
function handle_request(handle,divid)
{
if (handle.readyState != 4) {
document.getElementById(divid).innerHTML = 'Anropet misslyckades, ej komplett!';
return;
}
if (handle.status && handle.status != 200) {
//Något gick snett på server-sidan
document.getElementById(divid).innerHTML = 'Ett fel uppstod. Felkod: ' + handle.status;
return;
}
//Vi väljer att visa resultatet i en DIV som har ID = 'resultat'
//Här visas alltså den texten som returnerats av sidan vi just anropat
document.getElementById(divid).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;
}
Så vad hände nu?
-
page är den parametern som ska innehålla sökvägen till sidan som vi vill anropa
-
divid är ID på den DIVen eller det objektet som vi vill visa resultatet i
-
Text som är visat i lila är den koden som ser till att informationen visas i DIVen eller objektet
Lägg märke till hur vi nu har skickat med divid när vi anropat handle_request(), det är mycket viktigt att informationen skickas vidare för att dett skript ska fungera!
Anropa sidan
Nu ska vi anropa sidan som ska hämta texten från databasen. Vi vill ju att den ska hämta informationen direkt när sidan laddas, eller hur? Då är det bäst att vi laddar in skriptet så här:
<body onload="makeRequest('sida.asp?rnd='+Math.random(),'lajvBody')">Och självklart ska vi ju ha en div där vi ska visa all text också:
<div id="lajvBody"></div>
Nu undrar du varför jag har lagt till en QueryString som jag tilldelat värdet Math.random(). Jag ska förklara det snabbt för dig.
Det är så att när du anropar en sida så kommer det anropet att cachas (sparas i minnet), och det innebär problem i bl.a. Internet Explorer. Så det vi gjorde nu är att vi lade till en QueryString som hela tiden får ett nytt siffervärde varje gång den sidan anropas, på det sättet "försäkrar" vi oss att vi får ut rätt information från den begärda sidan.
Anropa sidan regelbundet
Nu har vi sett till att sidan anropats en gång bara, men den ska ju uppdateras eller hur? Nu ska vi se till att den sidan anropas automatiskt var femte (5) sekund. Det gör vi med hjälp av en JavaScript kod. Se till att den koden placeras efter att skriptet ovan har laddats, annars kan den ju inte anropas, eller hur? ;)
var interval = setInterval("makeRequest('sida.asp?rnd='+Math.random())",5000);Mer än så är det inte faktiskt.
Skapa ASP-sidan (eller PHP, eller något annat...)
Den här sidan kommer jag inte att skapa åt dig, det får du göra själv, för jag vet inte hur din databas ser ut :) Men jag ska göra ett exempel.
Det enda vi behöver göra är att anropa databasen och hämta den texten som ska skrivas ut.
OBS!
Tänk på att omvandla Å Ä Ö till Å Ä och Ö och så vidare. För sen när den visas på användarens skärm så kommer de att visas som Å Ä Ö. Glöm inte å ä ö också (små bokstäver). Om du inte gör det så finns det en risk att användaren inte kommer kunna läsa de bokstäverna.
Du kan göra det på vilket sätt som helst, ett enkelt och snabbt exempel är att använda Replace, t.ex.:
Replace(strText,"Å","Å")
Hur som helst, nu ska jag visa ett exempel (principen) på hur man hämtar information och skriver ut den:
Set Connect = Server.CreateObject("ADODB.Connection")
Connect.Open "DRIVER={MySQL ODBC 3.51 Driver}; SERVER=server; DATABASE=databas; USER=användarnamn; PASSWORD=lösenord;"
Set RecSet = Connect.Execute("SELECT texten FROM tblLajv ORDER BY RAND()")
If RecSet.EOF Then
Response.Write("Inget hittades")
Else
Response.Write(RecSet("texten"))
End If
RecSet.Close : Set RecSet = Nothing
Connect.Close : Set Connect = Nothing
Det som kommer hända nu är att texten som skrivs ut på denna sida kommer att hämtas av vårt JavaScript och sedan visas i den DIVen eller objektet som informationen ska sedan visas i. Enkelt va? =)
Slutord
Jag kan ha missat något, säg till om detta inte fungerar eller ifall jag skrivit fel någonstans. Men principen är ganska enkel faktiskt. Skicka in anropet med sökvägen och diven som ska uppdateras så är det klart! :)
Skapades: 2007-08-04 00:32:07
Skribent: Shadi
Lästs 2146 gånger
Betyg: 0 (artikeln har endast 3 röster, det krävs minst 5 för ett betyg)
Kommentarer
Kevin sa den 4 augusti 2007 kl 00:43:vore bra om man i slutet kunde se koderna i fil för fil i artikeln..