AJAX: Verwendung, Tipps und Vorteile

Ajax ist Klasse. Wir benutzen es grad in Verbindung mit unserem Programm AG-VIP_SQL in Form eines BrowserControl für die Nutzung von Kennzeichenfelder in Abhängigkeit.

AJaX ist eine tolle Technologie (war sie auch schon, bevor sie AJaX hieß), wenn sie sinnvolll eingesetzt wird. Ich kenne gute Lösungen und auch Seiten, die so sehr mit AJaX spielen, dass sie nicht mehr sinnvoll benutzt werden können - und auch die Suchmaschinen darf man nicht vernachlässigen. Wenn relevante Inhalte nur per AJaX nachgeladen werden, schiesst man sich nicht selten ein Eigentor damit.

Zu den Libs: jede Bibliothek hat da ihre Stärken und Schwächen. Ich mag xajax und prototype, gehe da aber projektspezifisch ergebnisoffen an die Auswahl

Marc

Ajax steigert zwar die Usability, ist für viele Entwickler aber auch nicht ganz einfach zu programmieren. Hier sollte man auf jeden Fall auf Frameworks setzen. Ich persöhnlich verwende Prototype, wenn ich in PHP programmiere.

romacron schrieb:

Nachdem Ajax anscheinend kaum Beachtung findet, starte ich das einfach mal.

Ajax an der richtigen Stelle angebracht, bedeutet enormen komfort für Seitenbesucher und auch für den der die Anwendungen schreibt.

Da .js Aufgrund der fehlenden OOP nicht zu meinen Steckenpferden gehört nutze ich die xajax - class.
Welche Classes nutzt Ihr?
Erfahrungen?

Hallo Roman, keine Ahnung von Ajax! Mir fehlt Gerards Link für einen einführenden Artikel- aber drum poste ich nicht wirklich:
Ich habe aus Deiner Fußzeile den Link zu Reisebüro Stuttgart abgekupfert und hoffe, dass das auch 1/10 Wirkungen im Ranking bringt. Dieser Post also zur Erhöhung der Anzahl der Suchbegriffe Reisebüro Stuttgart bzw. Stuttgart und Reisebüro.
Fritz

Ein häufiger "Fehler" bei der Verwendung von AJAX ist, dass auf fertige AJAX-Bibliotheken zurückgegriffen wird, ohne diese den eigenen Gegebenheiten anzupassen.

So müssen für die AJAX Bibliothek script.acu.los (unkomprimiert) erst einmal 137 KB und für Prototype (unkomprimiert) sogar 157 KB übertragen werden, bevor die AJAX-Funktionen genutzt werden können. Das ist - vor allem für mobile Verbindungen - eine ganze Menge, die man sich meist sparen kann.

Lösung:
a) entweder die AJAX-Bibliothek dahingehend bereinigen, dass wirklich nur diejenigen Funktionen in der .js stehen, die ich auch tatsächlich verwende oder

besser:
b) die wirklich benötigten AJAX-Funktionen selbst schreiben (dadurch lassen sich AJAX-Requests mit gerade einmal 500 Byte(!) JS-Code bewerkstelligen):

[js]
function ajax(url,uid,query){
var req=(window.XMLHttpRequest)?new XMLHttpRequest() : ((window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP") :false);
req.open("POST",url,true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", query.length);
req.setRequestHeader("Connection", "close");
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
document.getElementById(uid).innerHTML=req.responseText;
}
}
req.send(query);
}
[/js]

Beispiel für einen Aufruf:
[html]

<script>
var q= "user=" + encodeURIComponent(user);
ajax("abc.php","div_abc",q);
</script>
[/html]
Ergebnis:
In den DIV-Container "div_abc" wird die echo-Ausgabe des PHP-Skriptes abc.php geschrieben.

(Der Inhalt der Variable user kann im PHP-Skript ganz normal über

$user = cleaner($_POST[\'user\']);

abgefragt und bearbeitet werden).

Matthias

seitenreport schrieb:

Ein häufiger "Fehler" bei der Verwendung von AJAX ist, dass auf fertige AJAX-Bibliotheken zurückgegriffen wird, ohne diese den eigenen Gegebenheiten anzupassen.

[js]
function ajax(url,uid,query){
var req=(window.XMLHttpRequest)?new XMLHttpRequest() : ((window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP") :false);
req.open("POST",url,true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", query.length);
req.setRequestHeader("Connection", "close");
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
document.getElementById(uid).innerHTML=req.responseText;
}
}
req.send(query);
}
[/js]

Stimmt! Ich ärgere mich sogar ziemlich oft darüber, wenn ich mit meinem Handy online bin und ich dann solche Websites erwische, die ewig laden, wegen überfüllten Javascript-Dateien. Mein Handy streikt dann immer, weil der Speicher vollgelaufen ist .

Ich finde aber, dass man die Geschwindigkeitsaspekte auch nicht übertreiben sollte. Dein angegebener Javascript-Code ist zwar noch kurz und somit überschaubar, aber ich finde die Anwendung des Trinitätsoperator hilft nicht zur besseren Ãœbersicht (zu dem wusste ich gar nicht, dass der in Javascript auch vorhanden ist :. Wenn man nur alleine den Quelltext verstehen muss, ist das kein Problem, aber wenn mehrere Entwickler daran arbeiten bevorzuge ich immer die normale IF-Verzweigung. Natürlich ist das Ansichtssache, aber ansonsten ein gutes Beispiel von dir.

Gruß Stephan

gambler schrieb:

... aber ich finde die Anwendung des Trinitätsoperator hilft nicht zur besseren Ãœbersicht (zu dem wusste ich gar nicht, dass der in Javascript auch vorhanden ist :. Wenn man nur alleine den Quelltext verstehen muss, ist das kein Problem, aber wenn mehrere Entwickler daran arbeiten bevorzuge ich immer die normale IF-Verzweigung. Natürlich ist das Ansichtssache, aber ansonsten ein gutes Beispiel von dir.

In diesem Sinne möchte ich dann auch kurz noch die Erklärung anfügen, falls jemand den Trinitätsoperator (engl. "Ternary-Operator") nicht kennt (dieser ist in seiner Form identisch mit dem Trinitätsoperator in PHP):

[js]
var ergebnis = (wenn a) ? (dann b) : (ansonsten c);
[/js]

Die obige Zuweisung
[js]
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : ((window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : false);
[/js]

lautet aufgeschlüsselt dann wie folgt:
[js]
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
req = false;
}
}
[/js]
Grüße,
Matthias

Ich finde die Ajax Technik super und setzte sie immer öfters ein.

Allerdings vordere ich keinen HTML-Code an wie im oberen Beispiel sondern JSON\'s. Die Informationen erweitern dann mit den DOM / DHTML Funktionen die Seite.

Das ganze hab ich in einem Objekt verpackt das nach einer Anfrage eine Callbackfunktion aufruft die die angeforderten Daten dann weiter verarbeitet.

[js]
var Request = function() {
this.http = null;

if (window.XMLHttpRequest) {
this.http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
this.http = new ActiveXObject(\'Microsoft.XMLHTTP\');
}

this.get = function(site,params,cb) {
if (this.http != null) {
this.http.open(\'POST\',site,true);
this.http.cb = cb;
this.http.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');
this.http.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) eval(this.cb+\'(this.responseText)\');
}
this.http.send(params);
} else {
alert(\'no XML Request Support\');
}
}
}
[/js]

Daraus erzeuge ich ein Objekt für jedes Einsatzgebiet auf der Seite damit sich die Requests nicht in die Quere kommen.

[js]
var request = new Request();
request.get(\'example.com\',\'foo=1&bar=2\',\'exampleCallback\');

function exampleCallback(responseText) {
// responseText verarbeiten
}
[/js]

Bei der Funktion weiter oben ist man schon etwas eingeschränkt außerdem wenn req gleich false ist kennt es keine Methode open() oder send().


Gruß Thomas

Hallo Ultima,

wenn das XmlHttpRequest-Objekt nicht initialisiert wurde, könntest du eine Exception werfen, das wäre wesentlich sauberer. Zudem könntest du entweder die http-Variable privat setzen (var _http = ...) oder die get-Funktion zur Verbesserung der Performance auslagern:

[js]var Request = function(){ /* ... */ }
Request.prototype.get = function(site, params, cb) { /* ... */ }[/js]

Ich nutze Ajax für meine Quizze. Eine feine Sache, Anwenderfreundlicher, meiner bescheidenen Meinung nach Traffic sparender allerdings für den Laien schwer zu erlernen.

Ich bin nich wirklich versiert darin nutze aber soweit ich das beurteilen kann keine Klasse habe mir das selbst zusammengebastelt. Einmal erstellt (Mein Klassikquiz) kann ich es wunderbar auf alle anderen Quizze anwenden.

Würde unter keinen Umständen mehr darauf verzichten wollen.

Achso mein Chat ist auch auf Ajax aufgebaut. Für den dahinterliegenden Code war aber eine XML einbindung nötig. Dafür habe ich einen Vorhandenen Quellcode angepasst. Viel ist davon nicht mehr übrig allerdings hätte ich ohne diesen Code das ganze nicht auf die Reihe bekommen.

Auf den Ur Code basieren meine Quizspiele. Allerdings ohne XML. Ob das so korrekt ist, valide, server freundlich .... kann ich nicht sagen.

Wer mir die Erleuchtung geben kann - nur her damit.

Liebe Grüße
Sven