Lösungen für 5 häufige Ajax-Probleme

Der moderne Webentwickler, der Ajax bei der Planung oder Erstellung seiner Websites nicht in Betracht zieht, verpasst möglicherweise ein leistungsfähiges Tool, um die Benutzerfreundlichkeit zu verbessern.

Es gibt jedoch Herausforderungen bei der Implementierung der Ajax-Funktionalität auf einer Webseite.

In diesem Artikel werden Lösungen für fünf der häufigsten Herausforderungen diskutiert , mit denen Entwickler bei der Verwendung von Ajax konfrontiert werden, um den Inhalt auf ihrer Website zu verbessern.

Obwohl zu allen fünf Themen noch viel mehr zu diskutieren und zu recherchieren ist, sollte dieser Beitrag Anfängern und fortgeschrittenen Ajax-Entwicklern einige solide Tipps geben, wie sie die Ajax-Funktionalität benutzerfreundlicher und zugänglicher umsetzen können.

Problem # 1: Inhalt ist nicht rückwärtskompatibel

Dieses Problem tritt auf, wenn ein Designer JavaScript- und Ajax-Verbesserungen in die Architektur seiner Website integriert hat, ohne dass Browser aktiviert werden, die JavaScript deaktiviert haben.

Nichts ist falsch mit der Planung einer Website mit JavaScript und Ajax; Auf dem heutigen Markt sollten JavaScript-Überlegungen in den Planungsprozess integriert werden. Aber Sie sollten immer noch sicherstellen, dass die Website beim Start abwärtskompatibel ist (oder dass es sich leicht verschlechtert).

Lösung: Implementieren Sie Ajax als Erweiterung einer bereits funktionierenden Website

Auch wenn Ajax für die Planung der Architektur der Website unerlässlich ist, sollten Sie sicherstellen, dass alle Inhalte über herkömmliche serverseitige Methoden zugänglich sind.

Nehmen wir an, Sie haben eine Seite "Mitarbeiterinformationen" , die für jeden Mitarbeiter einen separaten Link enthält. Mithilfe der serverseitigen Technologie können Sie den Inhalt für einen bestimmten Mitarbeiter basierend auf einem Wert anzeigen, der über die Abfragezeichenfolge übergeben wird:

employees?view=VP">  Frank Smith - VizepräsidentJim Williams - Buchhalter

Alle oben genannten Links verweisen auf dieselbe Seite, die Seite "Employees" , die sich entsprechend der Variablen in der Abfragezeichenfolge ändert. Die Informationen jedes Mitarbeiters würden vom Server geladen, was auf verschiedene Arten geschehen könnte: über serverseitige Includes; durch eine Datenbank; oder sogar mit XML.

Auf welchen Mitarbeiterlink auch immer geklickt wird, die gesamte Seite muss geladen werden, damit die angeforderten Informationen zugestellt werden können.

Der Inhalt ist also vollständig zugänglich, bevor alle Ajax-Verbesserungen auf die oberste Ebene gelegt werden. Mit JavaScript kann dann die Aktualisierung der gesamten Seite unterbrochen und stattdessen der Inhalt über Ajax geladen werden. Der angeklickte Link könnte durch eine ID oder durch Überprüfen des Werts des HREF-Attributs im Anker identifiziert werden.

Obwohl der Inhalt mit deaktiviertem JavaScript vollständig zugänglich ist, wird den meisten Benutzern die erweiterte Ajax-Version angezeigt.

Das Prinzip der progressiven Erweiterung für Ajax ist allgemein bekannt, da es im Allgemeinen für unauffällige JavaScript-Techniken verwendet wird und CSS innewohnt, wie die folgende Grafik zeigt:

Erstellen Sie Ihre Website so, dass sie ohne JavaScript funktioniert, und fügen Sie dann JavaScript als Erweiterung hinzu, genau wie Sie Ihre Inhalte in HTML markieren und dann mit CSS "verbessern" würden .

Problem 2: Der Ladeindikator des Browsers wird nicht durch Ajax-Anfragen ausgelöst

Fast jeder Browser hat eine Möglichkeit, dem Benutzer visuell anzuzeigen, dass Inhalte geladen werden. In aktuellen Browsern wird die Anzeige auf der Registerkarte angezeigt, die den Inhalt lädt.

Die Bilder unten zeigen diesen animierten Indikator von einigen populären Browsern.


Der Ladeindikator von Internet Explorer ist ein durchgezogener Kreis mit einem Verlauf, der beim Laden des Inhalts gedreht wird.


Firefox zeigt ein ähnliches Symbol kleiner kreisender Kreise in verschiedenen Grautönen.


Google Chrome dreht einen Halbkreis.

Das Problem ist, dass Ajax-Anfragen diesen "Lade" -Anzeiger, der in Browser eingebaut ist, nicht auslösen.

Lösung: Fügen Sie einen ähnlichen Ladeindikator in die Nähe des Inhalts ein, der geladen wird

Die übliche Lösung besteht darin, einen benutzerdefinierten Fortschrittsindikator in die Ajax-Anforderung aufzunehmen. Eine Reihe von Websites bieten kostenlose "Ajax loading" -Grafiken.


Preloaders.net hat eine Reihe von ausgefallenen, anpassbaren animierten Grafiken zur Auswahl.

Das Implementieren dieser benutzerdefinierten Ladegrafik oder Fortschrittsanzeige in die Ajax-Funktionalität Ihrer Website ist lediglich eine Frage des Zeigens und Verbergens zu den entsprechenden Zeiten über JavaScript.

Ihr Ajax-Code enthält Codezeilen, die Sie darüber informieren, ob die Anfrage ausgeführt oder abgeschlossen wurde. Mit JavaScript können Sie die animierte Grafik anzeigen, während die Anfrage bearbeitet wird, und sie dann ausblenden, wenn die Aktion abgeschlossen ist.

Problem # 3: Der Benutzer weiß nicht, dass eine Ajax-Anfrage abgeschlossen wurde

Dies hängt mit dem vorherigen Problem zusammen, wird jedoch häufig übersehen, da der Entwickler annehmen könnte, dass das Verschwinden des Indikators "Laden" ausreicht, um den Benutzer darüber zu informieren, dass der Inhalt vollständig geladen wurde. In den meisten Fällen ist es jedoch besser, definitiv anzugeben, dass Inhalte aktualisiert oder aktualisiert wurden.

Lösung: Verwenden Sie eine eindeutige Nachricht "Anforderung abgeschlossen"

Dies kann ähnlich wie die Einreichung von Formularen geschehen. Nachdem ein Link gesendet wurde Digg Auf der Seite können Sie sehr deutlich erkennen, dass Ihre Einreichung eingegangen ist:

Obwohl dieser bestimmte Indikator nicht auf eine abgeschlossene Ajax-Anforderung hinweist, ist das Prinzip das gleiche: Das Feld "Erfolg" wird angezeigt, nachdem die Seite, die das Formular übermittelt hat, geladen wurde und die Box bunt und deutlich ist.

Eine ähnliche Grafik oder ein ähnlicher Indikator könnte am Ende einer Ajax-Anfrage verwendet werden, um den Benutzern mitzuteilen, dass der Inhalt aktualisiert wurde. Dies würde zusätzlich zu dem Fortschrittsindikator, der für das vorherige Problem vorgeschlagen wurde, implementiert werden.

Eine ähnliche, aber subtilere Art zu zeigen, dass ein Inhaltsbereich aktualisiert wurde, ist der Gelb verblassen Technik . Diese Methode ist den Benutzern bekannt und unauffällig und funktioniert gut mit Ajax-geladenen Inhalten.

Problem 4: Ajax-Anforderungen können nicht auf Webdienste von Drittanbietern zugreifen

Das XMLHttpRequest Das Objekt, das die Wurzel aller Ajax-Anfragen ist, kann nur Anfragen in der gleichen Domäne wie die Seite stellen, die die Anfrage stellt. Es gibt jedoch Fälle, in denen Sie über eine Ajax-Anforderung auf Daten von Drittanbietern zugreifen möchten. Viele Webdienste stellen ihre Daten über eine API zur Verfügung.

Lösung: Verwenden Sie Ihren Server als Proxy

Die Lösung für dieses Problem besteht darin, Ihren Server als Proxy zwischen dem Dienst des Drittanbieters und dem Browser zu verwenden. Obwohl die Details dieser Lösung den Rahmen dieses Artikels sprengen, gehen wir auf das Grundprinzip bei der Arbeit ein.

Da eine Ajax-Anforderung vom Browser des Clients stammt, muss sie auf eine Datei an einem anderen Speicherort, aber auf derselben Domäne wie die Quelle der Anforderung verweisen.

Ihr Server ist jedoch im Gegensatz zum Browser des Clients nicht auf diese Weise eingeschränkt. Wenn die Seite auf Ihrem Server aufgerufen wird, wird sie im Hintergrund wie gewohnt ausgeführt, aber mit Zugriff auf eine beliebige Domäne.

Dies stellt kein Sicherheitsrisiko für den Benutzer dar, da die Anforderungen an den Dienst des Drittanbieters auf Ihrem Server gestellt werden. Sobald die Informationen auf der Serverebene abgerufen wurden, besteht der nächste Schritt des Ajax-Aufrufs darin, eine Antwort an den Client zu senden, die in diesem Fall die vom Webdienst des Drittanbieters erhaltenen Daten enthält.

Wenn Sie weitere Informationen zu dieser leistungsfähigen Methode zum Kombinieren des Web-Service-Zugriffs mit benutzerdefiniertem Ajax benötigen, sollten Sie sich unbedingt andere Ressourcen ansehen, von denen einige im Folgenden aufgeführt sind.

Weiterführende Literatur:

• Verwenden Sie einen Web-Proxy für domänenübergreifende XMLHttpRequest-Aufrufe
• Cross Domain Ajax: eine kurze Zusammenfassung
• Cross-Domain-AJAX-Abfrage mit jQuery

Problem # 5: Deep Linking ist nicht verfügbar

Dies ist ein kniffligeres Problem, das jedoch je nach Art der Website oder Anwendung möglicherweise nicht erforderlich ist. Das Problem tritt auf, wenn Inhalte über Ajax geladen werden und dann der "Status" der Website geändert wird, ohne dass die URL auf die betroffene Seite verweist.

Wenn der Benutzer über ein Lesezeichen auf die Seite zurückkehrt oder den Link mit einem Freund teilt, wird der aktualisierte Inhalt nicht automatisch angezeigt. Die Website würde stattdessen in ihren ursprünglichen Zustand zurückkehren. Flash-Websites hatten früher das gleiche Problem: Sie erlaubten Benutzern nicht, auf irgendeinen anderen als den anfänglichen Bildschirm zu verlinken.

Lösung: Verwenden Sie interne Seitenanker

Um sicherzustellen, dass ein bestimmter "Status" auf einer Ajax-gesteuerten Webseite verknüpfbar und bookmarkbar ist, können Sie interne Seitenverknüpfungen verwenden, die die URL ändern, aber nicht die Seite aktualisieren oder ihre vertikale Position beeinflussen.

Dieser einfache Code demonstriert, wie das gemacht wird:

var currentAnchor = document.location;currentAnchor = String(currentAnchor);currentAnchor = currentAnchor.split("#");if (currentAnchor.length > 1) {currentAnchor = currentAnchor[1];} else {currentAnchor = currentAnchor[0];}switch(currentAnchor) {case "section1":// load content for section 1break;case "section2":// load content for section 2break;case "section3":// load content for section 3break;default:// load content for section 1break;}

Das obige ist kein funktionierender Code, sondern ein theoretisches Beispiel, um die wesentlichen Schritte zu demonstrieren.

Die ersten beiden Codezeilen setzen den aktuellen Seitenstandort (URL) in eine Variable. Dann wird die Position in eine Zeichenfolge umgewandelt, so dass wir sie manipulieren können.

Als nächstes "teilen" wir die Zeichenkette über das Ankersymbol (#) in zwei Teile und prüfen anschließend, ob das Array, das aus dem Split erstellt wird, größer als ein Element ist. Größer als ein Element bedeutet, dass die URL einen Anker hat.

Wenn die URL nur einen Teil hat, ist kein Anker vorhanden. Die nachfolgende "switch" -Anweisung lädt den Inhalt entsprechend dem Wert des Ankers. Die switch-Anweisung hat eine "default" -Option, falls kein Anker vorhanden ist, was dem Laden der Seite im ursprünglichen Zustand entspricht.

Darüber hinaus würden wir Code verwenden, um Links zu behandeln, die durch interne Anker direkt auf bestimmte Inhalte verweisen. Ein Link, der auf "content2" zeigt, würde den Inhalt in "content2" laden, und der String "# content2" würde an die aktuelle URL angehängt.

Dies würde die URL durch Hinzufügen eines internen Ankers ändern, ohne die Ansicht der Seite zu ändern, aber einen Bezeichner beizubehalten, der den gewünschten Zustand der Seite angibt.

Diese Erklärung ist nur Theorie. Das Konzept funktioniert und es funktioniert sehr gut. Aber ich habe nicht alle Möglichkeiten, Nachteile und andere Feinheiten des Aufbaus einer Website oder einer Seite auf diese Weise erklärt.

Folgen Sie den unten stehenden Links für eine umfassendere Diskussion des Themas oder experimentieren Sie selbst damit. Beachten Sie auch, dass dies mit Inhalten getestet werden kann, die sich nur mit JavaScript ändern und Ajax nicht verwenden muss.

Weiterführende Literatur:

• Deep Linking für AJAX
• AJAX: Umgang mit Lesezeichen und Zurück-Schaltflächen
• Fixieren der Zurück-Schaltfläche und Aktivieren der Lesezeichen für AJAX-Apps

Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs , wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können Louis folgen auf Twitter oder sich mit ihm in Verbindung setzen über seine Website .

Kennen Sie Lösungen für diese oder andere Ajax-Herausforderungen? Bitte teilen Sie Ihre Kommentare unten ...