Der moderne Webentwickler, der nicht darüber nachdenkt Ajax Bei der Planung oder Erstellung ihrer Websites fehlt möglicherweise ein leistungsstarkes Tool zur Verbesserung der Benutzerfreundlichkeit.
Bei der Implementierung der Ajax-Funktionalität auf einer Webseite gibt es jedoch Herausforderungen.
In diesem Artikel werden wir diskutieren Lösungen für fünf der häufigsten Herausforderungen mit denen ein Entwickler konfrontiert ist, wenn er Ajax verwendet, um den Inhalt seiner Website zu verbessern.
Obwohl es zu allen fünf Themen noch viel mehr zu diskutieren und zu recherchieren gibt, sollte dieser Beitrag Anfängern und fortgeschrittenen Ajax-Entwicklern einige solide Tipps zur Implementierung der Ajax-Funktionalität in einem größeren Rahmen geben benutzerfreundliche und zugängliche Art und Weise.
Problem Nr. 1: Inhalte sind nicht abwärtskompatibel
Dieses Problem tritt auf, wenn ein Designer JavaScript- und Ajax-Erweiterungen in die Architektur seiner Website integriert hat, ohne Vorkehrungen für Browser zu treffen, die JavaScript deaktiviert haben.
Es ist nichts Falsches daran, eine Website mit JavaScript und Ajax zu planen. Tatsächlich sollten JavaScript-Überlegungen auf dem heutigen Markt ein integraler Bestandteil des Planungsprozesses sein. Sie sollten jedoch dennoch sicherstellen, dass die Website beim Start abwärtskompatibel ist (oder dass sie ordnungsgemäß beeinträchtigt wird).
Lösung: Implementieren Sie Ajax als Erweiterung einer bereits funktionierenden Website
Während Ajax ein wesentlicher Bestandteil Ihrer Planung der Website-Architektur sein kann, stellen Sie sicher, dass alle Inhalte über herkömmliche serverseitige Methoden zugänglich sind.
Nehmen wir an, Sie haben eine “Mitarbeiterinformation” Seite, die für jeden Mitarbeiter einen separaten Link enthält. Mit serverseitiger Technologie könnten Sie den Inhalt für einen bestimmten Mitarbeiter basierend auf einem über die Abfragezeichenfolge übergebenen Wert anzeigen, etwa so:
John Doe – CEO Frank Smith – Vizepräsident Jim Williams – Buchhalter
Alle oben genannten Links verweisen auf dieselbe Seite, die “Mitarbeiter” Seite, die sich entsprechend der Variable in der Abfragezeichenfolge ändert. Die Informationen jedes Mitarbeiters würden vom Server geladen, was auf verschiedene Arten erfolgen könnte: über serverseitige Includes; über eine Datenbank; oder sogar XML verwenden.
Unabhängig davon, auf welchen Mitarbeiterlink geklickt wird, muss die gesamte Seite geladen werden, damit die angeforderten Informationen übermittelt werden.
Somit ist der Inhalt vollständig zugänglich, bevor irgendwelche Ajax-Erweiterungen darüber gelegt werden. Mithilfe von JavaScript könnte dann die vollständige Seitenaktualisierung unterbrochen und der Inhalt stattdessen über Ajax geladen werden. Der angeklickte Link könnte durch eine ID oder durch Überprüfung des Werts des HREF-Attributs im Anker identifiziert werden.
Obwohl der Inhalt bei deaktiviertem JavaScript vollständig zugänglich ist, sehen die meisten Benutzer die erweiterte Ajax-gesteuerte Version.
Das Prinzip der progressiven Erweiterung für Ajax ist bekannt, da es häufig für unauffällige JavaScript-Techniken verwendet wird und in CSS verankert ist, wie die folgende Grafik zeigt:
Erstellen Sie also Ihre Website so, dass sie ohne JavaScript funktioniert, und fügen Sie dann JavaScript als Erweiterung hinzu, so wie Sie Ihre Inhalte in HTML auszeichnen würden “erweitern” es mit CSS.
Problem Nr. 2: Die Ladeanzeige des Browsers wird nicht durch Ajax-Anfragen ausgelöst
Fast jeder Browser verfügt über eine Möglichkeit, dem Benutzer visuell anzuzeigen, dass Inhalte geladen werden. In aktuellen Browsern erscheint der Indikator auf der Registerkarte, die den Inhalt lädt.
Die Bilder unten zeigen diesen animierten Indikator einiger beliebter Browser.
Die Ladeanzeige des Internet Explorers ist ein ausgefüllter Kreis mit einem Farbverlauf, der sich dreht, während der Inhalt geladen wird.
Firefox zeigt ein ähnliches Symbol mit kleinen sich drehenden Kreisen in verschiedenen Grautönen an.
Google Chrome dreht sich im Halbkreis.
Das Problem besteht darin, dass Ajax-Anfragen diesen in Browsern integrierten „Ladeindikator“ nicht auslösen.
Lösung: Fügen Sie einen ähnlichen Ladeindikator in der Nähe des geladenen Inhalts ein
Die übliche Lösung hierfür besteht darin, einen benutzerdefinierten Fortschrittsindikator in die Ajax-Anfrage zu integrieren. Eine Reihe von Websites bieten kostenlose „Ajax Loading“-Grafiken an.
Preloaders.net bietet eine Reihe ausgefallener, anpassbarer animierter Grafiken zur Auswahl.
Um diese benutzerdefinierte Ladegrafik oder Fortschrittsanzeige in die Ajax-Funktionalität Ihrer Website zu implementieren, müssen Sie sie einfach per JavaScript zum richtigen Zeitpunkt ein- und ausblenden.
Ihr Ajax-Code enthält Codezeilen, die Ihnen mitteilen, ob die Anfrage ausgeführt oder abgeschlossen wird. Mithilfe von JavaScript können Sie die animierte Grafik während der Verarbeitung der Anfrage anzeigen und nach Abschluss der Aktion wieder ausblenden.
Problem Nr. 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 möglicherweise annimmt, dass das Verschwinden des “Wird geladen” Der Indikator reicht aus, um den Benutzer darüber zu informieren, dass der Inhalt vollständig geladen wurde. In den meisten Fällen ist es jedoch besser, eindeutig anzugeben, dass Inhalte aktualisiert oder aktualisiert wurden.
Lösung: Verwenden Sie eine eindeutige Meldung „Anfrage abgeschlossen“.
Dies kann ähnlich wie bei der Bestätigung von Formularübermittlungen erfolgen. Nachdem ein Link übermittelt wurde DiggAuf der Seite erfahren Sie ganz deutlich, dass Ihre Einreichung eingegangen ist:
Obwohl dieser spezielle Indikator nicht auf eine abgeschlossene Ajax-Anfrage hinweist, ist das Prinzip dasselbe: die “Erfolg” Das Feld wird angezeigt, nachdem die Seite, die das Formular übermittelt, vollständig geladen wurde, und das Feld ist bunt und deutlich.
Eine ähnliche Grafik oder ein ähnlicher Indikator könnte am Ende einer Ajax-Anfrage verwendet werden, um Benutzern mitzuteilen, dass Inhalte aktualisiert wurden. Dies würde zusätzlich zum für das vorherige Problem vorgeschlagenen Fortschrittsindikator und nicht anstelle dieses implementiert werden.
Eine ähnliche, aber subtilere Möglichkeit, anzuzeigen, dass ein Inhaltsbereich aktualisiert wurde, ist die Gelb-Fade-Technik. Diese Methode ist den Benutzern vertraut, unauffällig und funktioniert gut mit Ajax-geladenen Inhalten.
Problem Nr. 4: Ajax-Anfragen können nicht auf Webdienste von Drittanbietern zugreifen
Das XMLHttpRequest-Objekt, das sich im Stammverzeichnis aller Ajax-Anfragen befindet, ist darauf beschränkt, Anfragen auf derselben Domäne zu stellen wie die Seite, die die Anfrage stellt. Es gibt jedoch Fälle, in denen Sie über eine Ajax-Anfrage auf Daten Dritter zugreifen möchten. Viele Webdienste machen ihre Daten über eine API zugänglich.
Lösung: Verwenden Sie Ihren Server als Proxy
Die Lösung für dieses Problem besteht darin, Ihren Server als Proxy zwischen dem Drittanbieterdienst und dem Browser zu verwenden. Obwohl die Details dieser Lösung den Rahmen dieses Artikels bei weitem sprengen würden, gehen wir auf das Grundprinzip bei der Arbeit ein.
Da eine Ajax-Anfrage vom Browser des Clients stammt, muss sie auf eine Datei an einem anderen Ort, aber in derselben Domäne wie die Quelle der Anfrage verweisen.
Ihr Server ist jedoch im Gegensatz zum Browser des Clients nicht auf diese Weise eingeschränkt. Wenn also die Seite auf Ihrem Server aufgerufen wird, läuft sie wie gewohnt im Hintergrund, jedoch mit Zugriff auf eine beliebige Domain.
Für den Benutzer stellt dies kein Sicherheitsrisiko dar, da die Anfragen an den Drittanbieterdienst auf Ihrem Server erfolgen. Sobald die Informationen auf Serverebene abgerufen wurden, besteht der nächste Schritt des Ajax-Aufrufs darin, eine Antwort an den Client zurückzusenden, die in diesem Fall die vom Webdienst eines Drittanbieters erhaltenen Daten umfassen würde.
Wenn Sie weitere Informationen zu dieser leistungsstarken Methode zur Kombination von Webservice-Zugriff mit benutzerdefiniertem Ajax wünschen, schauen Sie sich unbedingt andere Ressourcen an, von denen einige unten aufgeführt sind.
Weiterführende Literatur:
Problem Nr. 5: Deep Linking ist nicht verfügbar
Dies ist ein schwierigeres Problem, ist jedoch je nach Art Ihrer Website oder Anwendung möglicherweise nicht erforderlich. Das Problem tritt auf, wenn Inhalte über Ajax geladen werden und dann der „Status“ der Website geändert wird, ohne dass die URL, die auf die Seite verweist, betroffen ist.
Wenn der Benutzer über ein Lesezeichen zur Seite zurückkehrt oder den Link mit einem Freund teilt, werden die aktualisierten Inhalte nicht automatisch angezeigt. Stattdessen würde die Website in ihren ursprünglichen Zustand zurückkehren. Flash-Websites hatten früher das gleiche Problem: Sie erlaubten Benutzern nicht, auf etwas anderes als den Startbildschirm zu verlinken.
Lösung: Verwenden Sie interne Seitenanker
Um sicherzustellen, dass ein bestimmter „Zustand“ auf einer Ajax-gesteuerten Webseite verlinkt und mit Lesezeichen versehen werden kann, können Sie interne Seitenlinks verwenden, die die URL ändern, aber die Seite nicht aktualisieren oder ihre vertikale Position beeinflussen.
Dieser einfache Code zeigt, wie das geht:
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”: // Inhalt für Abschnitt 1 laden break; case „section2“: // Inhalt für Abschnitt 2 laden break; case „section3“: // Inhalt für Abschnitt 3 laden break; Standard: // Inhalt für Abschnitt 1 Pause laden; }
Das Obige ist kein funktionierender Code, sondern ein theoretisches Beispiel zur Veranschaulichung der wichtigsten Schritte.
Die ersten beiden Codezeilen geben den aktuellen Seitenstandort (URL) in eine Variable ein. Dann wird der Standort in einen String umgewandelt, damit wir ihn bearbeiten können.
Als nächstes „teilen“ wir den String über das Ankersymbol (#) in zwei Teile und prüfen anschließend, ob das Array, das aus der Teilung entsteht, größer als ein Element ist. Mehr als ein Element bedeutet, dass die URL einen Anker hat.
Wenn die URL nur aus einem Teil besteht, bedeutet das, dass kein Anker vorhanden ist. Die nachfolgende „switch“-Anweisung lädt Inhalte entsprechend dem Wert des Ankers. Die switch-Anweisung verfügt über die Option „default“ für den Fall, dass kein Anker vorhanden ist, was dem Laden der Seite im Originalzustand gleichkäme.
Darüber hinaus würden wir Code anwenden, um mit Links umzugehen, die über interne Anker direkt auf bestimmte Inhalte verweisen. Ein Link, der auf „content2“ verweist, würde den Inhalt in „content2“ laden und die Zeichenfolge „#content2“ würde an die aktuelle URL angehängt werden.
Dies würde die URL durch Hinzufügen eines internen Ankers ändern, ohne die Ansicht der Seite zu ändern, aber eine Kennung beizubehalten, die den gewünschten Status der Seite angibt.
Diese Erklärung ist nur Theorie. Das Konzept funktioniert, und zwar sehr gut. Aber ich habe nicht alle Möglichkeiten, Nachteile und andere Feinheiten der Erstellung einer Website oder Seite auf diese Weise erklärt.
Folgen Sie den untenstehenden Links für eine ausführlichere Diskussion des Themas oder experimentieren Sie selbst damit. Beachten Sie außerdem, dass dies anhand von Inhalten getestet werden kann, die sich allein mit JavaScript ändern, und dass Ajax nicht verwendet werden muss.
Weiterführende Literatur:
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, verfasst. Louis rennt Beeindruckende Webs, wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Du kannst Louis folgen auf Twitter oder nehmen Sie Kontakt mit ihm auf über seine Website.
Kennen Sie Lösungen für diese oder andere Ajax-Herausforderungen? Bitte teilen Sie Ihre Kommentare unten …
