Dazu benutze ich Client seitig HTML5 und jQuery.
Server seitig setze ich auf PHP, hier ist es aber eigentlich egal was ihr nehmt. Ich habe schon ganze Systeme von PHP auf Python umgeschrieben und die Templates nur minimal verändert.
Grund dafür war unter anderem der Einsatz von Json zur Übertragung. Json ist ein kompaktes Dateiformat das zur Übertragung von Daten genutzt wird und in so gut wie jeder Programmier- oder Scriptsprache eingesetzt werden kann.
Graue Theorie
Die Frage die sich als erstes stellt: "Was ist Ajax, brauch ich das überhaupt?". Zum Verwendungszweck kann man sagen, dass es nicht unbedingt nötig ist. Allerdings sind Webseiten die Ajax benutzen in der Regel Benutzerfreundlicher und vor allem schneller.
Wenn man bei einer Webanwendung im klassischen Sinne, also ohne Ajax, eine Unterseite öffnet, wird ein Request an den Webserver gesendet. Dieser lieft einem dann die gesamte Website zurück, wobei jede Datei, z.B. ein Bild, extra angefordert wird. Jeder Content wird extra verarbeitet. Das öffnen eine Seite bedeutet also jede Menge Arbeit und Kommunikation für den Browser. Moderne Browser setzten auf aufwendige Caching Algorithmen um bereits bekannten Inhalt nicht noch einmal zu laden oder zu verwerten. Wenn eine Seite also einmal geladen wurde, dauert es in der Regel nicht mehr ganz so lange um weitere Unterseiten auf zu rufen, dennoch wird bei jedem Aufruf die gesamte Seite beim Server abgefragt.
An dieser Stelle setzt Ajax an. Nachdem eine Seite geladen wurde, wird mittels Javascript nur noch der Teil der Seite nachgefordert der auch verändert wird. Javascript fragt also beim Server an und verarbeitet dann diese Antwort. Dies führt allerdings zu dem Problem, dass der Browser quasi übergangen wird. Dieser bekommt von dem Request nichts mit. Will man also in dem Browser-verlauf zurück gehen, funktioniert das in der Regel nicht. Ein weiteres Problem ist das Suchmaschinen wie Google die Unterseiten nicht aufrufen können.
Es gibt bereits Lösungen für beide Probleme. Diese Bedarfen aber zusätzlicher implementations Arbeit.
Für weitere Informationen zu diesem Thema empfehle ich die offizielle Google Präsentation. Ich selbst setzte zur Lösung dieser auf das Ajax-History-Plugin für jQuery von asual, jQuery Address
Die Unterschiede zwischen den beiden Techniken wird in dieser Grafik von Wikipedia sehr deutlich:
Quelle: Wikipedia - Ajax
Los geht’s!
So genug von diesem theoretischen Kram! Im folgenden wird möchte ich euch eine kleine Ajax basierend Webanwendung zeigen die das Prinzip verdeutlichen soll. Probiert ruhig immer wieder die Zwischenschritte aus!
Zu erst einmal braucht ihr die aktuelle jQuery. jQuery ist ein freies JavaScript Framework welches komfortable Funktionen zur DOM-Manipulation und -Navigation bietet. Es steht unter http://jquery.com zum Download zur Verfügung.
Ich lege in meinem Projektordner 2 Dateien an und füge jQuery hinzu.
index.html ist mein Startdokument. ajax.php dient zur Server seitigen Verarbeitung meines Ajax-Requests.
HTML-Grundgerüst
HTML-Code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // jQuery folgt hier </script> </head> <body> enter your name: <input type="text" id="name" /> <br /> <input type="button" id="buttonAjax" value="Call Ajax" /> <div id="output"></div> </body> </html>
der jQuery-Teil (Javascript)
Code javascript:
1 2 3 4 5 | <script type="text/javascript">
$(document).ready(function(){
alert("loaded");
);
</script> |
Syntax
Dieses kleine Beispiel zeigt wie ein Event an ein jQuery Objekt "gehängt" wird. Bei $(document) handelt es sich um das Objekt, an das Event .ready() gehängt wird. Dieser wird eine Funktion übergeben die beim auftreten des Events ausgeführt wird.
jQuery Selektoren
$(document) ist eine Möglichkeit einer Selektion. Hier wird einfach nur das bestehende Objekt um die Funktionalitäten von jQuery erweitert und ein neues Objekt erzeugt.
Aber jQuery kann noch viel mehr! Dabei werden unter anderem die CSS-Selektoren benutzt. So kann mittels $("#id") ein einzelnes DOM-Objekt selektiert werden oder per $(".classname") eine Klasse von Objekten. Eine vollständige Übersicht aller möglichen Selektoren findet ihr in der jQuery-Api. Diese ist sehr zu empfehlen und nach meiner subjektiven Meinung einer der besten die es gibt.
.ready();
Javascript wird in der Regel am Anfang einer HTML-Seite definiert und somit auch mit als erstes geladen. Das Problem hierbei ist, dass dann auf weiter unten definierte DOM-Objekte noch nicht zugegriffen werden kann, da diese einfach noch nicht existieren. jQuery bietet hier für das .ready() Event. Dieser wird eine Funktion übergeben die aufgerufen wird sobald die gesamte Seite fertig geladen wurde.
Code javascript:
1 2 3 4 5 6 7 | <script type="text/javascript">
$(document).ready(function(){
$("#buttonAjax").click(function(){
alert("button klicked");
});
);
</script> |
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript">
$(document).ready(function(){
$("#buttonAjax").click(function(){
var name = encodeURI($("#name").val());
if(name == ""){
alert("Bitte einen Namen angeben!");
}else{
// ajax request
}
});
);
</script> |
Anschließend erfolgt noch keine Überprüfung, wenn der Name leer ist wird eine Fehlermeldung ausgeben.
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript">
$(document).ready(function(){
$("#buttonAjax").click(function(){
var name = encodeURI($("#name").val());
if(name == ""){
alert("Bitte einen Namen angeben!");
}else{
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+name,
success: function(data){
alert(data);
}
});
}
});
);
</script> |
Die zu übergebenden Daten bei data angegeben. Daten müssen Key-Value-Paare sein. Der Syntax ist recht einfach: key = value & key = value.
Wenn das Event "succes" eintritt wird die definiert Funktion aufgerufen. Diese gibt in einem alert die Antwort des Requests aus.
PHP-Code:
<?php
if(!empty($_POST['name'])){
$ret = Array("hello" => "Hallo ".$_POST['name'], "ip" => $_SERVER['REMOTE_ADDR'] );
echo json_encode($ret);
}
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript">
$(document).ready(function(){
$("#buttonAjax").click(function(){
var name = encodeURI($("#name").val());
if(name == ""){
alert("Bitte einen Namen angeben!");
}else{
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+name,
success: function(data){
var json = $.parseJSON(data);
$("#output").html(json.hello+"<br />your ip: "+json.ip);
}
});
}
});
);
</script> |
Mit Hilfe dieses Objektes wird ein String zusammengestellt und in das Ausgabe div geschrieben.
Thats it!
Das war es eigentlich im großen und ganzen. Sicherlich handelt es sich hier um ein kleines Beispiel was niemals das volle Potenzial von Ajax zeigt, allerdings sollten die Grundlegende Funktionalität damit deutlich werden. Ich hoffe das ich euch den Umgang jQuer näher bringen konnte.
Bitte verzeiht eventuelle didaktische Fehler, es ist mein erstes Tutorial. Ich hoffe das ich tutorials.de einiges an Potenzial und Zeit zurück geben konnte, mich begleitet das Forum seit den Anfängen meiner Programmierarbeit und ist immer noch ein guter Ansprechpartner.
In diesem Sinne, viel Spaß beim code!
Zack
Login
Bereiche
Kategorien
Forum - Programming
Shop @ tutorials.de
tutorials.de-Systemmitteilung