Akzeptieren

Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden. Mehr erfahren

AJAX: Verwendung, Tipps und Vorteile

Umfrage
Frage:
Nutzt Du Ajax
Ja
 
10 von 18 Antworten (56%)
Nein
 
8 von 18 Antworten (44%)


Verfasst am: 02. 12. 2009 [10:33]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber
Themenersteller

Beitrag hilfreich?

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?

Verfasst am: 02. 12. 2009 [11:28]
der_booker
3040 Beiträge
Moderator
selbständig
Dabei seit: 11.06.2009

✶✶✶ Unentbehrliches Mitglied

Beitrag hilfreich?

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


Verfasst am: 02. 12. 2009 [14:16]
willmann
264 Beiträge
TYPO3-Freelancer.
Dabei seit: 26.09.2009

Sehr aktiver Schreiber

Beitrag hilfreich?

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 icon_smile.gif

Marc

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


Verfasst am: 31. 01. 2010 [12:20]
peete
2 Beiträge
Webdesigner
Dabei seit: 31.01.2010

Neuankömmling

Beitrag hilfreich?

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


Verfasst am: 31. 01. 2010 [13:14]
georg123
603 Beiträge
Diplomökonom (Pensionär)
Dabei seit: 31.05.2009

✶ Sehr aktiver Content Bringer

Beitrag hilfreich?

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


Verfasst am: 28. 04. 2010 [18:03]
seitenreport
1934 Beiträge
Seitenreport Inhaber
TYPO3 Senior Developer
Dabei seit: 28.03.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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):

JAVASCRIPT
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);
}


Beispiel für einen Aufruf:
HTML
<div id="div_abc"></div>
 
<script type="text/javascript">
	var q= "user=" + encodeURIComponent(user);
	ajax("abc.php","div_abc",q);
</script>

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
PHP
$user = cleaner($_POST['user']);

abgefragt und bearbeitet werden).

Matthias

Matthias Gläßner.
Certified TYPO3 Developer
TYPO3 Senior Entwickler
Inhaber von Seitenreport, der SEO und Website Analyse


Verfasst am: 29. 04. 2010 [09:35]
gambler
108 Beiträge
Student
Dabei seit: 01.10.2009

Aktiver Schreiber

Beitrag hilfreich?

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.

JAVASCRIPT
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);
}



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



Verfasst am: 29. 04. 2010 [14:14]
seitenreport
1934 Beiträge
Seitenreport Inhaber
TYPO3 Senior Developer
Dabei seit: 28.03.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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):

JAVASCRIPT
var ergebnis = (wenn a) ? (dann b) : (ansonsten c);


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


lautet aufgeschlüsselt dann wie folgt:
JAVASCRIPT
var req;
if (window.XMLHttpRequest) {
	req = new XMLHttpRequest();
} else {
	if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		req = false;
	}
}

Grüße,
Matthias

Matthias Gläßner.
Certified TYPO3 Developer
TYPO3 Senior Entwickler
Inhaber von Seitenreport, der SEO und Website Analyse


Verfasst am: 27. 08. 2010 [11:20]
Ultima
867 Beiträge
Fachinformatiker / Anwendungsentwicklung
Dabei seit: 09.07.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

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.

JAVASCRIPT
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');
	   }
	}
}


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

JAVASCRIPT
var request = new Request();
request.get('example.com','foo=1&bar=2','exampleCallback');
 
function exampleCallback(responseText) {
  // responseText verarbeiten
}


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

Mein Portal: Ultima-Project.net


Verfasst am: 27. 08. 2010 [12:49]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer

Beitrag hilfreich?

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:

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







to Top to Top

Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:

RSS Feed abonnieren


0 Mitglieder waren innerhalb der letzten 15 Minuten online (4 heute gesamt):
[keine]

Administratoren und Moderatoren:
[keine]

Seitenreport hat 47724 registrierte Mitglieder, 4358 Themen und 37794 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 0 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 0 neue Themen und 0 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.