Entwicklung & Design

JQuery-Lösungen für typische Ajax-Probleme: Ajax mit jQuery meistern

Die Verwendung von Ajax in Webapplikationen und Webseiten stellt Frontend-Entwickler vor neue Herausforderungen in der JavaScript-Entwicklung. Dieser Artikel zeigt am Beispiel von jQuery einige Lösungsmuster für typische Probleme.

jQuery bietet für die Verwendung von Ajax die Methode $.ajax an. Daneben existieren einige Methoden wie beispielsweise $.getJSON, $.get und andere, die vorkonfigurierte Varianten der Ajax-Methode darstellen sowie Ajax-Events wie „ajaxSuccess“ oder „ajaxComplete“ zur zentralen eventbasierten Ajax-Behandlung.

Mit Ajax kommen zur allgemein üblichen DOM-Script-Entwicklung einige weitere Herausforderungen hinzu:

  • Zusätzliche Fehlerquellen: Mit Ajax kommen möglicherweise zusätzliche Fehler wie http-, Format- und Timeout-Fehler ins Spiel
  • Ajax läuft grundsätzlich asynchron ab, was letztendlich dazu führt, dass Entwickler ihre Programme nicht linear coden können, sondern auf Events oder Callbacks warten müssen
  • Ajax führt meist zu DOM-Updates, die in der Regel nicht vom allgemeinen Initialisierungscode erfasst werden und die Komplexität des Skripts steigern können

jQuery sammelt alle möglichen Ajax-Fehler und führt, sofern konfiguriert, den error-Callback aus beziehungsweise triggert das ajaxError-Event mit weiteren Informationen zum Fehler. In dem Bestreben, möglichst schnell zum Ziel zu kommen, fangen viele Entwickler mit der Behandlung der erfolgreichen Abarbeitung des Ajax-Requests an. Kommt es zu Fehlern, fällt die Ursachenforschung allerdings schwer.

Dabei muss das Skript zum Loggen von Ajax-Fehlern gar nicht zeitraubend sein. Die Ausgabe von Fehlermeldungen benötigt hier weder eine schöne Oberfläche noch wiederkehrende Arbeit. Entwickler können sie einmal schreiben und dann in jedem Projekt wiederverwenden.

Einfaches Ajax-Fehlerlogging
$(document).ajaxError(function(e, xhr, opts, err){
	var status = (xhr || {}).status;
	xhr = null;
	setTimeout(function(){
		throw(e.type +' | '+ status +' | '+ opts.url);
	}, 0);
});

Listing 1

Der Error-Eventhandler zeigt die wichtigsten Informationen bei Auftreten eines Fehler in der Fehlerkonsole an. Das verwendete „setTimeout“ führt dazu, dass die Ausführung des übrigen Codes nicht durch „throw“ unterbrochen wird. Die Referenz auf das Ajax-Objekt wird per Hand gelöscht, um Memory Leaks im Internet Explorer zu vermeiden. Der Eventhandler lässt sich in Formatierung und Umfang weiter an die eigenen Bedürfnisse anpassen (Auswertung von opts.data/err). Ist das Logging-Script für Ajax-Fehler fertig, kann man ersten Request absetzen.

Fehler im Eventhandler finden

In der Regel führen click- oder submit-Events zur Ausführung von Ajax-Requests. Kommt es hierbei zu Fehlern, wird die default-Aktion des Browsers ausgeführt und der Fehler erscheint nur für einen Bruchteil einer Sekunde in der Konsole.

Eine Möglichkeit, die default-Ausführung trotz Fehler zu verhindern, bietet der Aufruf der Methode „preventDefault“ (siehe Listing) bereits ganz am Anfang des Eventhandlers auf dem Event-Objekt. Dies ist zumindest im Live-Betrieb keine gute Idee. Tritt nämlich unerwartet ein Fehler auf, passiert aus Nutzersicht schlichtweg nichts. Führt man die Methode dagegen am Ende aus oder bricht die default-Aktion mit „return false“ ab, fällt die Webseite im Fehlerfall und bei sauberer unobtrusiver Programmierung [1] automatisch auf das Ajax-Fallback zurück. Die Webanwendung wird damit auf elegante Weise fehlertolerant.

preventDefault
$('a').click(function(e){
	e.preventDefault();
});

Listing 2

Wesentlich geschickter ist es daher, den verwendeten JavaScript-Debugger so einzustellen, dass er bei Fehlern selbstständig stoppt beziehungsweise die Fehlerkonsole beim Wechsel der Seite nicht leert. Beides kann man in Firebug entsprechend einstellen. Im IE-Debugger ist dies bereits Default.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!