Einstieg in AJAX-Programmierung - Digital-Library - Happy
Werbung
www.Happy-Security.de präsentiert:
Einstieg in AJAX-Programmierung
Autor: Tsutomu Katsura
Datum: 26. Mai 2006
Herzlich willkommen zu meinem kleinen Tutorial über AJAX-Programmierung. Ich möchte hier nicht
allzu viel auf die Geschichte von AJAX eingehen, sondern einfach nur eine Festigung geben, wenn
jemand noch neu auf diesem Gebiet ist. Für alle, die jedoch noch gar nichts von AJAX gehört haben, hier
eine kurze Info:
Früher wurden Daten, die man für die Verarbeitung in JavaScript benötigt immer auf Vorrat gespeichert
und so ergab sich eine sehr große Datenmenge, die oftmals nie benutzt wird. Mit AJAX (Asynchronous
JavaScript and XML) wird nun die Möglichkeit geboten, spezifische Daten vom Server nachzufordern,
ohne dass der Benutzer dies merklich spürt. Im Großen und Ganzen bedeutet dies, dass eine Webseite
nicht vollständig neu geladen werden muss, was ergo viel benutzerfreundlicher und effizienter im
Umgang mit Traffic-Resourcen ist. Doch Obacht! Es ist nicht immer Ratsam, eine Technik wie AJAX zu
benutzen, nur weil Sie neu erscheint. Weitere Informationen zu der Technik, die hinter AJAX steht, gibt
es auf Wikipedia.
Ich möchte nun Anhand eines Bewertungsscripts für Bilder zeigen, auf welche Art Resourcen gespart
werden und eine schnelle Interaktion zwischen Client und Server erstellt werden kann. Dieses Beispiel ist
natürlich nur sehr kurz gefasst und lässt sich noch weiter ausbauen (ist hierfür nun aber nicht nötig).
Zunächst einmal erstellen wir folgende Datei namens „index.html“:
1. <html>
2.
<head>
3.
<title>
4.
AJAX-Tutorial von Happy-Security.de
5.
</title>
6.
<script type"text/javascript">
7.
function vote4it(id,value)
8.
{
9.
var nwl = (screen.width-150)/2;
10.
var nwh = (screen.height-150)/2;
11.
vote=window.open('vote.php?id='+id+'&value='+value, 'Artikel12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
Bewertung', 'width=150,height=150,left='+nwl+',top='+nwh+'');
vote.window.focus();
}
</script>
</head>
<body>
<div style="text-align:center">
Bewerten Sie meinen Artikel:<br />
Langer Text <br />
... <br />
und noch viel viel mehr mit <br />
Bildern und so was über sehr <br />
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
viele Zeilen lang <br />
<p>
<form name="voteform"> <b>Bewertung:</b>
<select name="rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" name="submit" value="SET"
onclick="javascript:vote4it('113',
document.voteform.rating.value)">
</form>
</p>
</div>
</body>
</html>
Am Ende dieser Datei (Ab Zeile 25) befindet sich ein sehr einfaches Formular mit einem Select-Feld, das
die Ziffern von 1-5 zur Auswahl bereitstellt. Wählt man nun eine dieser Optionen aus und klickt auf
„SET“, so wird die Funktion vote4it in JavaScript aufgerufen. So weit unterscheiden sich beide Varianten
nicht von einander. Erst jetzt gibt es einiges zu beachten. Als erstes jedoch der Aufbau mit JavaScript und
dem Aufrufen einer externen PHP-Datei, die alles verarbeitet. Wie man im Javascript erkennen kann,
wird ein Pop-Up ( Zeile 11) geöffnet und die Variablen $id sowie $value mit ans PHP-Script gesendet. So
wird schon mal nicht unser Hauptfenster neu geladen und man kann nahezu ungestört weiterlesen. Was
jedoch, wenn man einen Pop-Up Blocker hat? Da tauchen die ersten Probleme auf. Mit AJAX wäre das
nicht passiert ^_^
Schauen wir uns nun einmal an, was auf der PHP-Seite normalerweise nun gemacht wird.
1. <?PHP
2. $id = $_REQUEST['id'];
3. $value = $_REQUEST['value'];
4.
5. if(!is_numeric($id) OR !is_numeric($value)) exit; // error-handling
6.
7. mysql_connect('localhost','root','passwort') or die('connect error');
8. mysql_select_db('test') or die('db error');
9.
10. mysql_query("UPDATE test_table SET punkte = punkte+".$value.", stimmen =
stimmen+1 WHERE id = ".$id);
11.
12. $bewertung_sql = mysql_query("SELECT * FROM test_table WHERE id = ".$id);
13. $bewertung = mysql_fetch_array($bewertung_sql);
14.
15. echo "Der Artikel hat ". ($bewertung[punkte]/$bewertung[stimmen])." Punkte";
16.
17. ?>
Zum einfachen Schutz wird erstmal in Zeile 5 kontrolliert, ob die Eingabe auch legitim ist. Wir wollen
nur Zahlen erlauben, also wird alles was !is_numeric ist zum Abbruch der Scripts führen. Sehr einfach;
Sehr effektiv. Der wichtigste Teil ist hier Zeile 10 und 12. In Zeile 10 werden die Daten zur Datenbank
weitergeleitet und dort gespeichert. Später in Zeile 12 wird der aktuelle Stand von dem Artikel mit $id
ausgelesen und per echo() ins html geschrieben. Dies war die normale Methode, also bringen wir nun
AJAX ins Spiel um das Ganze etwas aufzubereiten. Zunächst einmal müssen wir die alte Funktion
vote4it() rausnehmen und ab Zeile 7 das folgende einfügen. Eine Erklärung dieses Scripts kommt im
Anschluss.
1. var resObjekt;
2.
3. if(navigator.appName.search("Microsoft") > -1) {
4.
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
5. }
6. else {
7.
resObjekt = new XMLHttpRequest();
8. }
9.
10. function sndReq(value) {
11.
id = document.voteform.id.value;
12.
resObjekt.open('get', 'vote.php?id='+id+'&value='+value, true);
13.
resObjekt.onreadystatechange = handleResponse;
14.
resObjekt.send(null);
15. }
16.
17. function handleResponse() {
18.
if(resObjekt.readyState == 4) {
19.
document.getElementById('output').innerHTML = resObjekt.responseText;
20.
}
21. }
Außerdem müssen wir das Formular ein wenig umbauen. Statt dem alten Formular nehmen wir also
dieses mal den folgenden Teil hier und fügen ihn an dieselbe Stelle ein, wo auch das alte Formular war.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<form name="voteform"> <b>Bewertung:</b>
<input type="hidden" name="id" value="2">
<select name="rating">
<option onClick="sndReq(1)">1</option>
<option onClick="sndReq(2)">2</option>
<option onClick="sndReq(3)">3</option>
<option onClick="sndReq(4)">4</option>
<option onClick="sndReq(5)">5</option>
</select>
</form>
<span id="output"></span>
Das war eigentlich auch schon alles. Nun können wir das Script testen. Wenn die Seite geladen wurde,
haben wir unten das Select-Feld (diesmal ohne Button zum Senden der Eingabe. Wählt man nun aus den
gegebenen Optionen eine Zahl aus, so wird dieser Wert per sndReq()-Befehl ans JavaScript übergeben
und dort weiterverarbeitet. Und hier fängt AJAX an zu arbeiten. Damit der weitere Ablauf auch
funktioniert, müssen wir unserem Browser nun ein Plugin geben, damit die Befehle auch richtig
interpretiert werden können.
Dies geschieht im Internet Explorer mit:
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
und in allen anderen Browser mit:
resObjekt = new XMLHttpRequest();
Wie man sieht, arbeitet hier Microsoft noch mit ActiveX als Konstruktor zur Erzeugung des
XMLHttpRequest Objekts und sollte dadurch natürlich nur die zweite Wahl beim Surfen sein ^^ Aber
was erzähle ich denn das... So etwas ist ja mittlerweile doch eigentlich überall bekannt. Da Microsoft wie
üblich einen anderen Weg wählt, müssen wir zur korrekten Einbindung des Objektes eine Browserweiche
wie am Anfang des neuen JavaScripts zu sehen ist, einbauen. Man könnte zwar mit anderen Kriterien als
if(navigator.appName.search("Microsoft") > -1) schauen, ob der benutzte Browser ein
Microsoft-Produkt ist oder nicht, aber diese Möglichkeit ist recht einfach gehalten.
Kommen wir jetzt zum Herzstück unserer neuen Anwendung. Die Funktion, die für das Senden unserer
Anfrage erstellt worden ist heißt sndReq(value) und wird ausgeführt, sobald man eine Auswahl im
select-feld getätigt hat. value ist der Wert aus dem soeben ausgewählten Select-Feld und wird in den
nächsten vier Zeilen unserer Funktion mit der $id unseres Artikels an den Server gesendet. Dies sind
nämlich jetzt die wichtigen AJAX-Teile, die bei jeder Client-Server Verbindung benutzt werden müssen.
resObjekt.open('get', 'vote.php?id='+id+'&value='+value, true);
Wie unschwer zu erkennen, wird über das Objekt resObjekt die Funktion open() mit drei Parametern
aufgerufen. Der erste Parameter beschreibt die Art des Sendens vom Request. Entweder geschieht dies
über GET oder POST. Meistens wird im HTML von Seitens des Browsers automatisch beim Senden von
Formulardaten die Methode GET gewählt, da diese sehr einfach zu handlen ist. Dies erkennt man beim
Surfen daran, dass in der Adresszeile die Variablen an die Adresse drangehangen werden. Beispiel:
> http://www.happy-security.de/vote.php?id=1&value=5&submit=absenden
Hier ist die Datei vote.php und id, value sowie submit sind die Variablen die zum Server zur Verarbeitung
gesendet werden. Bei der Methode POST werden diese Daten in eine Umgebungsvariable gepackt und im
HTTP-Header mit versendet. Man muss hier beachten, dass GET eine Begrenzung der Adresszeile als
Schutz vorgesehen hat und die ein paar Einschränkungen setzt. Für unseren Fall beim Senden der Anfrage
jedoch noch mehr als ausreichend. Als zweites steht dort die Adresse, damit unsere Funktion auch weiß
mit wem wir Verbindung aufnehmen wollen. Der Wert true am Ende gibt an, dass die Verbindung
asynchron stattfinden soll. Dies beschreibt eine wichtige Eigenschaft von AJAX, wie es bereits im Namen
steht. Würde dort false stehen, so würde es synrchon laufen und unser Script würde so lange pausieren,
bis die Kommunikation zwischen Client und Server abgeschlossen ist. Dies kann manchmal schon etwas
länger dauern (so 2-3 Sekunden – was in Ladezeit recht viel ist) und ist nicht der Sinn von Dynamik ;)
Als nächstes kommen wir zu einer Kontrollfunktion:
resObjekt.onreadystatechange = handleResponse;
Mit der ebigen Quelltext-Zeile kommt ein neuer wichtiger Punkt von AJAX hinzu. HandleResponse ist
eine Funktionsreferenz und dient in unserem Fall zum Kontrollieren, ob alle gewünschten Daten vom
Server beim Client angekommen sind und nun endlich weiter verarbeitet werden können.
1. function handleResponse() {
2.
if(resObjekt.readyState == 4) {
3.
document.getElementById('output').innerHTML = resObjekt.responseText;
4.
}
5. }
Dies ist der Inhalt unserer Funktion und in Zeile 2 wird gewartet bis Status = 4 (completed) ist. Die
anderen drei Möglichkeiten wären: 1 = LOADING (request-object erstellt aber kein send() ), 2 =
LOADED (Anfrage gesendet und Antwort-Header kann ausgewertet werden) 3 INTERACTIVE (es
werden gerade noch Daten empfangen, ziemlich kritischer Status bei nicht Beachtung). Wenn also nun
der Status 4 erreicht ist und alles komplett beisammen ist, kann in JavaScript mit den empfangenen Daten
weitergearbeitet werden. Dies geschieht in unserem Fall folgendermaßen:
document.getElementById('output').innerHTML = resObjekt.responseText;
Die Eigenschaft responseText enthält die Daten vom Server. Dies sind unsere Daten, die wir jetzt an
ein Element unserer Webseite mit der ID „output“ schicken und so dem Besucher unserer Seite wieder
zur Verfügung stellen. Man könnte den output zwar noch weiter in JavaScript bearbeiten und sogar noch
mal zum Server senden, aber das macht bei unserer einfachen Aufgabe keinen Sinn.
Ok, ich glaube nun beinahe, dass diese Erklärung ein wenig zu tief in die Details des Scripts eingegangen
sind, aber so ist jeder Punkt eigentlich hoffentlich verständlich und es können wie ersten Abwandlungen
anhand dieser Aufgabe geschaffen werden. Denn viel mehr ist es eigentlich nicht, was AJAX so
besonders macht ;) Und Nachschlagewerke gibt es im Internet genügend.
Ich hoffe ich konnte mal wieder etwas lehrreiches vermitteln und freue mich schon auf Kommentare zu
diesem Tutorial auf www.happy-security.de im Gästebuch oder Forum oder auf www.digitallibrary.de.vu in unserem Bücher-Archiv. Sicherlich wird AJAX in Zukunft nicht nur für Spielereien sehr
nützlich sein, sondern auch in vielen Firmen sehr gefragt werden. Also alle, die später gerne als
Programmierer oder Webdesigner arbeiten wollen, sollten flugs Ihre Kenntnisse in AJAX vertiefen. Es
wird sehr nützlich sein, das kann ich beschwören. In diesem Sinne: Life is a game; C u next level ;)
geschrieben von Tsutomu Katsura für www.Happy-Security.de
