JQuery - AJAX
Wie funktioniert AJAX ?
Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten XML-HTTP Request oder kurz XHR. Dieser kommuniziert quasi am Browser vorbei mit dem Server.
Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von Asynchronous JavaScript and XML - AJAX
Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.
jQuery und AJAX
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.
Datenanforderung mit jQuery und AJAX
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
Textdatei anfordern
ajax1.html
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
ajax.txt
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
Erklärung:
Die 2 Buttons bekommen eine Klickfunktion zugewiesen. Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.
HTML Anfordern
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
Kommunikation mit dem Server über AJAX und jQuery
ajax.html
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben. 1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.
Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form
bezeichner : wert
ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).
username : $("input:first").val(),
login_get.php
<?php
$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}
mysql_close ($dbverbindung);
?>
Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).
Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
Kommunikation über JSON
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.
