romacron
Themenersteller
JDev Xer
Content Gott (1224 Beiträge)

AJAX: Verwendung, Tipps und Vorteile

am 02.12.2009, 10:33 Uhr eröffnete romacron folgenden Thread
AJAX & JavaScript (JS)    7457 mal gelesen    10 Antwort(en).

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?


der_booker
Foren Moderator
selbständig
(2762 Beiträge)
am 02.12.2009, 11:28 Uhr schrieb der_booker

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.


Heiko Jendreck
personal helpdesk
http://www.phw-jendreck.de
http://www.seo-labor.com

willmann
Avatar willmann
TYPO3-Freelancer.
Guru (246 Beiträge)
am 02.12.2009, 14:16 Uhr schrieb willmann

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


Marc Willmann. TYPO3-Freelancer.
http://www.marc-willmann.de

peete
Webdesigner
Neuling (2 Beiträge)
am 31.01.2010, 12:20 Uhr schrieb peete

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.


www.writeadd.com - The Collaborative Writing Community for Authors

georg123
Avatar georg123
Diplomökonom (Pensionär)
Content Halbgott (569 Beiträge)
am 31.01.2010, 13:14 Uhr schrieb georg123

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


http://georg-hh.freimaurerei.de

Freiheit-Gleichheit-Brüderlichkeit, Toleranz und Humanität:
Dafür stehen und danach streben Freimaurer

seitenreport
Avatar seitenreport
Inhaber
TYPO3 Senior Developer
Content Gott (1773 Beiträge)
am 28.04.2010, 18:03 Uhr schrieb seitenreport

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 type="text/javascript">
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


SEO Analyse und Website-Check mit Seitenreport

gambler
Student
Guru (101 Beiträge)
am 29.04.2010, 09:35 Uhr schrieb gambler

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


Belegungsplan Ferienwohnung
Blog: Smart-Webentwicklung

seitenreport
Avatar seitenreport
Inhaber
TYPO3 Senior Developer
Content Gott (1773 Beiträge)
am 29.04.2010, 14:14 Uhr schrieb seitenreport

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


SEO Analyse und Website-Check mit Seitenreport


gelöschter Benutzer
am 27.08.2010, 11:20 Uhr schrieb

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


UFOMelkor
Avatar UFOMelkor
Student
Content Meister (350 Beiträge)
am 27.08.2010, 12:49 Uhr schrieb UFOMelkor

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]


Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community


gelöschter Benutzer
am 28.08.2010, 10:35 Uhr schrieb

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


  • 1


« zurück zu: AJAX & JavaScript (JS)

Das Seitenreport Forum hat aktuell 5270 Themen und 36106 Beiträge.
Insgesamt sind 48314 Mitglieder registriert.