AJAX: Verwendung, Tipps und Vorteile

Umfrage
Frage:
Nutzt Du Ajax
Ja
 
10 von 17 Antworten (59%)
Nein
 
7 von 17 Antworten (41%)


Verfasst am: 02. 12. 2009 [10:33]
romacron
Dabei seit: 01.11.2009
Themenersteller

1143 Beiträge
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?
Profil
 
Verfasst am: 02. 12. 2009 [11:28]
der_booker
Dabei seit: 11.06.2009

2887 Beiträge
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 & webdesign
http://www.phw-jendreck.de
http://www.seo-labor.com
Profil
WWW
 
Verfasst am: 02. 12. 2009 [14:16]
willmann
Dabei seit: 26.09.2009

244 Beiträge
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
Profil
WWW
 
Verfasst am: 31. 01. 2010 [12:20]
peete
Dabei seit: 31.01.2010

2 Beiträge
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
Profil
WWW
 
Verfasst am: 31. 01. 2010 [13:14]
georg123
Dabei seit: 31.05.2009

538 Beiträge
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
Profil
WWW
 
Verfasst am: 28. 04. 2010 [18:03]
seitenreport
Dabei seit: 28.03.2009

Matthias Gläßner
Premium-Mitglied

1790 Beiträge
Beitrag hilfreich?



script.acu.losPrototype




besser:


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



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.


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

abgefragt und bearbeitet werden).

Matthias
TYPO3 Freelancer | Gründer und Betreiber von Seitenreport
TYPO3 Anfragen: info@matthias-glaessner.de | XING-Profil
Profil
WWW
 
Verfasst am: 29. 04. 2010 [09:35]
gambler
Dabei seit: 01.10.2009

96 Beiträge
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
Belegungsplan Ferienwohnung
Blog: Smart-Webentwicklung
Profil
WWW
 
Verfasst am: 29. 04. 2010 [14:14]
seitenreport
Dabei seit: 28.03.2009

Matthias Gläßner
Premium-Mitglied

1790 Beiträge
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
TYPO3 Freelancer | Gründer und Betreiber von Seitenreport
TYPO3 Anfragen: info@matthias-glaessner.de | XING-Profil
Profil
WWW
 
Verfasst am: 27. 08. 2010 [11:20]
Ultima
Dabei seit: 09.07.2010

759 Beiträge
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 - Gold für alle
Profil
WWW
 
Verfasst am: 27. 08. 2010 [12:49]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
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) { /* ... */ }

Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 




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:


1 Mitglied war innerhalb der letzten 15 Minuten online (24 heute gesamt):
tanzstelle

Administratoren und Moderatoren:
[keine]

Seitenreport hat 18136 registrierte Mitglieder, 3002 Themen und 29106 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 12 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 8 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Schnellzugriff

Hier werben
Partnerprogramm
Premium Pakete
Verlinkung freischalten
Allgemeine Geschäftsbedingungen
Kontakt aufnehmen
Impressum

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

Partnerprogramm

12% Lifetime Provision auf alle Buchungen von Dir geworbener Mitglieder sowie 0,50 € für jede Registrierung. Eines der besten deutschen Partnerprogramme laut den appCharts von 100partnerprogramme.de. Nimm jetzt teil am Seitenreport Partnerprogramm und verdiene gutes Geld dabei!

* = Partnerlinks