Da ich auf die schnelle kein gutes Tutorial kenne, hab ich schnell mal selbst eines geschrieben.
Die meisten Tutorials über Ajax sind nicht gerade gut.
Ich lasse jetzt mal die Erklärung was Ajax genau ist weg, wer es wissen will soll doch mal google fragen.
Als erstes müssen wir ein XMLHttpRequest() Objekt erzeugen, da aber jeder Browser es anders händelt brauchen wir auch eine Unterscheidung.
Code:
var xmlHttp = null;
function ajaxTest()
{
if(window.ActiveXObject) // Für den IE
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // XMLHttp Objekt erzeugen!
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Und nochaml für den IE
}
catch (e)
{
xmlHttp = null;
}
}
}
else if(window.XMLHttpRequest) // Die anderen Browser
{
try
{
xmlHttp = new XMLHttpRequest(); // Objekt erstellen
}
catch (e)
{
xmlHttp = null;
}
}
else
{
alert("Was für einen Browser haben Sie den?");
}
if(xmlHttp) // Falls Objekt erzeugt werden konnte
{
xmlHttp.open('GET','ajaxTest.php' , true);
xmlHttp.onreadystatechange = data;
xmlHttp.send(null);
}
else
{
alert("Es konnte kein Objekt erzeugt werden!");
}
}
So hier ist mal eine fertige Funktion die einen HttpRequest absetzt!
Kommen wir nun zu den drei wichtigsten Zeilen Code:
Code:
xmlHttp.open('GET','ajaxTest.php' , true);
xmlHttp.onreadystatechange = data;
xmlHttp.send(null);
Die erste Zeile öffnet eine Verbindung zum Server! Der erste Parameter gibt die Übertragungsmethode an, in diesem fall GET (es gibt auch noch POST, PUT, HEAD). Der zweite Parameter gibt das Script an, welches den Request bekommt und einen Response zurück gibt. Der letzte Parameter gibt an welche Verbindungsmethode benutzt werden soll. Bei "true" handelt es sich um eine Asynchrone Übertragung, und bei false um eine Synchrone welche wir aber nicht wollen. Erklär ich jetzt auch mal nicht näher, da eigentlich jeder wissen sollte was der Unterschied zwischen Asynchron und Synchron ist!
In der zweiten Zeile gibt man den Funktionsnamen der Funktion an, die auf der Clientseite den Response empfängt und weiterverarbeitet.
Die dritte Zeile dient für die Übergabe von POST Variablen.
Den oberen können wir in eine Datei auslagern z.B. ajax.js!
Jetzt erstellen wir den Code für die Clientseite. Was brauchen wir alles? Wir zum einen die vorher angegebene Funktion data() und einen bereich wo wir den Response anzeigen.
Fangen wir mal an, damit das nicht zu lange dauert hab ich da mal was vorbereitet.
Code:
<html>
<head>
<title>Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript" type="text/javascript">
function data()
{
if(xmlHttp.readyState == 4) // hier wird überprüft ob der Response schon komplett ist!
{
daten = xmlHttp.responseText; //den Response an die Variable daten übergeben, es gibt auch die Funktion responseXML welche aber nur für XML Dateien ist!!
if(daten != "") // wurden daten übertragen?
{
document.getElementById('daten').innerHTML = daten; // übertragenen Daten in den Div Container schreiben zum anzeigen.
}
}
}
</script>
</head>
<body>
<a href="#" onClick="ajaxTest();">Klick mich an!</a> // den Request auslösen!
<div id="daten">
</div>
</body>
</html>
Ok, die Clientseite ist somit fertig!
Erstellen wir jetzt die Serverseite:
PHP:
$intZahl1 = 5;
$intZahl2 = 6;
$intSum = $intZahl1 + $intZahl2;
echo 'Dies ist ein Ajax-Test: ', $intSum;
exit();
Den code speichern wir unter ajaxTest.php ab! Man könnte jetzt z.B. auch eine Datenbankabfrage usw. einbauen!
So, Ihr könnt das Script nun testen! Es sollte eigentlich gehen, hab es aber selber nicht getestet. Also habt nachsicht falls es nicht geht.
Ich weiss das es jetzt einige offene Fragen gibt, also fragt mich!
Hier mal ein weiterführender
Link![[HaBo]](/styles/default/logoklein.png){kind=small}
