Wie Graceful Degradation AJAX Web-Seite zu bauen?

Question

Ich möchte Web-Seite mit "Graceful Degradation" bauen. Das heißt, die Web-Seite funktioniert auch Javascript deaktiviert. Jetzt muß ich Design-Entscheidung über das Format von AJAX Antwort machen.

Wenn Sie Javascript deaktiviert, jede HTTP-Anforderung an Server HTML als Antwort erzeugen. Der Browser wird aktualisiert mit dem zurückgegebenen HTML. Das ist in Ordnung.

Wenn Javascript aktiviert ist, jede AJAX HTTP-Request an den Server generiert ... na ja, JSON oder HTML.

Wenn es HTML ist, ist es einfach zu implementieren. Haben Sie einfach Javascript Teil der Seite mit dem zurückgegebenen HTML zu ersetzen. Und in der Server-Seite wird nicht viel Codeänderung erforderlich.

Wenn es JSON ist, dann habe ich JSON-to-HTML-Logik in Javascript wieder zu implementieren, das fast doppelt die Server-Seite Logik. Die Vervielfältigung ist böse . Ich weiß nicht wirklich wie es. Der Vorteil ist, dass die Bandbreitennutzung ist besser als HTML, die eine bessere Leistung bringt.

Also, was ist die beste Lösung für Graceful Degradation? AJAX-Request besser zurückzukehren JSON oder HTML?

Answer 1

Ich glaube nicht, kann es eine ‚beste solution` sein für jeden gegebene Situation. vielleicht nur eine ‚angemessene Lösung‘ für einen bestimmten. Es hängt wirklich davon ab, was Sie zu tun versuchen. Was Graceful Degradation bedeutet für mich ist:

• baut eine ‚gut genug‘ Schnittstelle, das funktioniert auf so viele Browser (Desktop und mobil) wie möglich.
• Unauffällig add in einigen Scripting (Validierungsmethoden, Schnittstellenelemente wie Tabulatoren und Schiebern oder was auch immer), die nur vorhanden sein, wenn der Browser die Seite in hat geladen hat sich die benötigten Funktionen ihnen Arbeit zu machen.

Ob HTML oder JSON in der Serverantwort zu verwenden, sehr subjektiv ist, ich finde mich oft kämpfen, zwischen ihnen zu wählen. Man könnte zum Beispiel argumentieren, dass eine Reihe von Schlüssel-Wert-Paaren von dem Server zu empfangen und sie in eine bestehenden select-Element-Rendering würde bedeuten, mehr Code und daher mehr Zeit damit verbracht Codierung und mehr potenzielle Fehler. Stattdessen könnte man einfach das vorgefertigte anfordern select-Element von dem Server, und es in einen Behälter injizieren. Die Logik für den Aufbau des Elements befindet sich bereits auf dem Server, warum bauen sie zweimal in zwei verschiedenen Sprachen an.

Die andere Perspektive ist, dass JSON Bandbreitennutzung minimiert, so dass es lohnt sich die extra Meile ist eine JSON zu analysieren einige Markup auf dem Client zu bauen. Ich finde es einfach, mit diesem Standpunkt nicht einverstanden sind, für ein paar Gründe (ich bin nicht verallgemeinernde, verstehen Sie mich nicht falsch). Vor allem viele, viele Webserver konfiguriert Kompresse / deflate / gzip ihren Ausgang, und viele, viele Browser accept Inhalt komprimiert. Markup ist extrem komprimierbar ist, wie es boatloads Redundanz enthält (<strong></strong>). Es ist daher sinnvoll zu berücksichtigen, dass die Größe einer JSON-Antwort nicht überwältigend kleiner als ein Antwort-mit-Markup sein würde. Zweitens eine große Datenmenge eine beträchtliche Ausführungszeit auf dem Client bedeuten könnte (böse, verschachtelte Schleifen sind an der Tagesordnung - offensichtlich in einige der Fragen, die hier auftauchen)

.

Mein Rat an Sie ist zu versuchen, die Vor- und Nachteile zu jedem Ansatz zu verstehen, und diese Informationen zu nutzen. Sie könnten diese lesen wollen:

http://www.quirksmode.org/blog/archives /2005/12/the_ajax_respon.html

Answer 2

IMO, von HTML-Code bringt mehr Sicherheitsrisiken (MITM Skripteinschleusung, etc). Jedes Mal auf „Vervielfältigung“ gespeichert sollte wirklich auf desinfizierende vor Anhängen ausgegeben werden.

JSON werden kann sicher analysiert und ist in der Regel wesentlich kompakter, wie Sie sagen, spart Bandbreite.

Ich weiß, was ich wählen würde (JSON).

Answer 3

Zunächst einmal sorgfältig darüber nachdenken, ob Sie wirklich brauchen, sowohl JavaScript-fähige und nicht-aktivierte Benutzer zu unterstützen. Für mein Geld, ist die große Sache über AJAX, dass es Anzeige (Aufbau von HTML) von Informationen trennt.

Das sagte, hier ist ein Ansatz, der funktionieren könnte:

1. Schreiben Sie ein serverseitige Programm, das tut, was Ihre Seite tun muss, und gibt die Antwort (was auch immer das besteht aus) in der einfachsten möglichen Form. Für die einfache Ausgabe - wie angibt, nur wenn es funktioniert oder nicht - dies könnte nur eine Zahl oder eine einfache Zeichenfolge sein. Für etwas komplizierter als nur ein einziges Ergebnis ist es wahrscheinlich XML sein wird.

2. ein serverseitiges Skript schreibt, ruft einfach das Programm und gibt das Ergebnis als Text oder XML.

3. Schreiben Sie einen anderen Server-Skript, die Ihr Programm aufruft und baut eine HTML-Seite von ihm.

4. In der Seite, die der Benutzer Anrufe, um die Routine zu laufen, umfassen Javascripts, die eine Steuerung (zB eine Schaltfläche) schreiben, wenn eine AJAX-Anforderung gedrückt sendet das erste Skript aufrufen, dann das Ergebnis analysiert und aktualisiert die Seite entsprechend. Auch sind ein anderes Steuerelement, innerhalb NOSCRIPT-Tags, so dass Benutzer, die JS-fähigen sind, wird es nicht sehen, was tut ein Standardformular einreichen Ihr zweites Skript auszuführen. So müssen Sie noch zwei Skripte, aber das Haupt Fleisch Ihrer Berechnung wird nur einmal durchgeführt.