voigtan
Roosweb
LP_MAXI
chrillemeterAJAX-styrd gästbok
I den här artikeln kommer jag att gå igenom hur man skapar en gästbok som använder AJAX teknologin. Vi kommer att gå igenom följande:
- Hur man hämtar data från en databas och visar den i en DIV
- Hur man sparar data i en databas
- Hur man raderar ett inlägg med AJAX
Inför
Jag vill åter igen (har sagt det i tidigare artiklar) att ni ska gå igenom grunderna för AJAX om ni inte kan dem. Ni kan läsa om förklaringen för AJAX koden i denna artikel: Lajv skript med AJAX. Vill du läsa mer om grunderna? Läs isåfall: Ajax Del 1 - Introduktion till AJAX.
Skapa JS-filen
Först ska vi börja med att skapa JavaScript filen som vi ska lägga AJAX koden i. Du kan även lägga denna kod direkt i ditt HTML/ASP/PHP dokument.
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;
}
Databasen
Här är ett exempel på hur databasen kan se ut:
| Namn |
Typ |
| gbID | Int(11) |
| gbText | Text |
| gbName | Varchar(15) |
| gbCreated | datetime |
Sidan som hämtar all data
Denna fil kommer att hämta alla inlägg från databasen. Den kommer även att skriva ut länken som ska radera respektive inlägg. Jag kommer inte att ta hänsyn till rättigheter osv, det får du sköta på eget sätt, jag visar principen.
Här får du anpassa din databaskoppling som du vill ha den, jag ger dig ett exempel.
Det jag försöker göra är att jag ska hämta all data från databasen och spara allt i en Array.
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
arrPosts = ""
Else
arrPosts = RecSet.GetRows()
End If
RecSet.Close : Set RecSet = Nothing
Connect.Close : Set Connect = Nothing
Nu ska vi kontrollera att poster har hittats i database. Om det finns sådana så loopas de ut.
If isArray(arrPosts) Then
For i = 0 To Ubound(arrPosts,2) Step 1
Response.Write("Text:" & arrPosts(1,i) & "<br />")
Response.Write("Skrevs av: " & arrPosts(2,i) & "<br />")
Response.Write("<a href=""javascript:;"" onclick=""makeRequest('deletePost.asp?id=<%=arrPosts(0,i)%>&rnd='+Math.random(),'showAlerts'); makeRequest('getPosts.asp?rnd='+Math.random(),'showPosts');"">Radera</a>")
Next
Else
Response.Write("Inga poster hittades")
End If
Kom ihåg att vi använder Math.random() för att vi ska slippa problemet med cache i Internet Explorer.
Kalla denna fil för getPosts.asp.
Sidan som sparar data
Nu ska vi skapa sidan som ska spara datan i databasen när man postar något i formuläret. Oroa dig inte, vi kommer snart att skapa sidan med formuläret.
strText = Request.QueryString("text")
strName = Request.QueryString("name")
If Len(strText) > 0 And Len(strName) > 0 Then
...Här sparar du datan i databasen. De finns ju nu i strText och strName....
Response.Write("Ditt inlägg har skapats, detta visas i showAlerts")
Else
Response.Write("Du måste fylla i alla uppgifter.")
End If
Det är inte svårare än så faktiskt =)
Kalla denna sida för savePost.asp.
Skapa formuläret
Nu ska vi skapa sidan som innehåller förmuläret. Denna sida kommer vi att döpa till Guestbook.asp.
<textarea id="msg" rows="5" cols="20"></textarea><br />
<input type="text" id="name" /><br />
<input type="button" id="btnSend" onclick="makeRequest( 'savePosts.asp?text='+document.getElementById('msg').value+'&name='+document.getElementById('name').value+'&rnd='+Math.random(), 'showAlerts'); makeRequest('getPosts.asp?rnd='+Math.random(),'showPosts');" />
Och under det ska vi skapa två st. DIVar. Den ena kommer vi att kalla för showPosts och som helt enkelt kommer att vara den som visar alla poster, medan den andra kallar vi för showAlerts som helt enkelt kommer att visa oss statusen på inlägget vi ska skapa.
<div id="showAlerts"></div><br />
<div id="showPosts"></div>
Sidan som raderar inlägget
Denna sida kommer att helt enkelt radera den valda posten, vi kallar den för deletePost.asp.
intID = Request.QueryString("id")
..Här skapar du kopplingen till databasen och raderar inlägget från den med hjälp av intID...
Response.Write("Raderat! Detta visas i showAlerts!")
Slutsats
Jag har inte testat detta skript än, men jag ska försöka göra det senare. Principen är korrekt iallfall =). Säg till ifall detta inte fungerar, då ska jag försöka rätta till det.
Det vi har gjort är att vi skapat en ganaka cool gästbok, trots att vi inte har använt oss av visuella effekter. Men detta är en förhoppningsvis fungerande gästbok.
Lycka till!
Skapades: 2007-09-17 21:40:49
Skribent: Shadi
Lästs 2683 gånger
Betyg: 7 (totalt 7 röster)