Warum ist es eine schlechte Praxis, generiertes HTML anstelle von JSON zurückzugeben? Oder ist es?

Es ist ganz einfach, HTML-Inhalte mit JQuery oder einem ähnlichen Framework von Ihren benutzerdefinierten URLs / Webdiensten zu laden. Ich habe diesen Ansatz viele Male und bis jetzt verwendet und fand die Leistung zufriedenstellend.

Aber alle Bücher, alle Experten versuchen mich dazu zu bringen, JSON anstelle von generiertem HTML zu verwenden. Wie ist es viel besser als HTML?

Ist es sehr viel schneller?
Hat es eine sehr viel geringere Belastung auf dem Server?

Auf der anderen Seite habe ich einige Gründe für die Verwendung von generiertem HTML.

1. Es ist ein einfaches Markup und oft genauso kompakt oder sogar kompakter als JSON.
2. Es ist weniger fehleranfällig, da Sie nur Markup und keinen Code erhalten.
3. In den meisten Fällen ist das Programmieren schneller, da Sie den Code für das Client-Ende nicht separat schreiben müssen.

Auf welcher Seite stehst du und warum?

Eigentlich bin ich ein bisschen auf beiden Seiten:

• Wenn ich auf der Javascript-Seite Daten benötige , verwende ich JSON
• Wenn ich auf der Javascript-Seite eine Präsentation brauche, für die ich keine Berechnung durchführen werde, verwende ich im Allgemeinen HTML

Der Hauptvorteil der Verwendung von HTML besteht darin, dass Sie einen vollständigen Teil Ihrer Seite durch das ersetzen möchten, was aus der Ajax-Anforderung stammt:

• Das Neuerstellen eines Teils der Seite in JS ist (ziemlich) schwierig
• Sie haben wahrscheinlich bereits eine Template-Engine auf der Serverseite, mit der die Seite ursprünglich generiert wurde ... Warum nicht wiederverwenden?

Ich berücksichtige im Allgemeinen nicht wirklich die "Leistungsseite" der Dinge, zumindest auf dem Server:

• Auf dem Server wird das Generieren eines Teils von HTML oder JSON wahrscheinlich keinen großen Unterschied machen
• Über die Größe des Materials, das durch das Netzwerk geht: Nun, Sie verwenden wahrscheinlich nicht Hunderte von KB Daten / HTML ... Die Verwendung von gzip für alles, was Sie übertragen, wird den größten Unterschied ausmachen (nicht zwischen HTML wählen und JSON)
• Eine Sache, die berücksichtigt werden könnte, ist jedoch, welche Ressourcen Sie auf dem Client benötigen, um den HTML-Code (oder die DOM-Struktur) aus den JSON-Daten neu zu erstellen. Vergleichen Sie dies mit dem Verschieben eines Teils des HTML-Codes in die Seite. -)

Schließlich eine Sache, die definitiv wichtig ist:

• Wie lange werden Sie brauchen, um ein neues System zu entwickeln, das Daten als JSON + -Code sendet, den JS benötigt, um sie als HTML in die Seite einzufügen?
• Wie lange dauert es, bis nur HTML zurückgegeben wird? Und wie lange können Sie einen Teil Ihres bereits vorhandenen serverseitigen Codes wiederverwenden?

Und um eine andere Antwort zu beantworten: Wenn Sie mehr als einen Teil der Seite aktualisieren müssen, gibt es immer noch die Lösung / den Hack, alle diese Teile in einer großen Zeichenfolge zu senden, die mehrere HTML-Teile gruppiert und die relevanten Teile in JS extrahiert.

Sie könnten beispielsweise eine Zeichenfolge zurückgeben, die folgendermaßen aussieht:

<!-- MARKER_BEGIN_PART1 -->
here goes the html
code for part 1
<!-- MARKER_END_PART1 -->
<!-- MARKER_BEGIN_PART2 -->
here goes the html
code for part 2
<!-- MARKER_END_PART2 -->
<!-- MARKER_BEGIN_PART3 -->
here goes the json data
that will be used to build part 3
from the JS code
<!-- MARKER_END_PART3 -->

Das sieht nicht wirklich gut aus, ist aber auf jeden Fall nützlich (ich habe es einige Male verwendet, meistens, wenn die HTML-Daten zu groß waren, um in JSON gekapselt zu werden) : Sie senden HTML für die Teile der Seite, die benötigen Präsentation, und Sie senden JSON für die Situation, in der Sie Daten benötigen ...

... und um diese zu extrahieren, wird die JS-Teilstring-Methode den Trick machen, nehme ich an ;-)

Ich stimme hauptsächlich den hier geäußerten Meinungen zu. Ich wollte sie nur zusammenfassen als:

• Es ist eine schlechte Praxis, HTML zu senden, wenn Sie es am Ende clientseitig analysieren, um einige Berechnungen darüber durchzuführen.

• Es ist eine schlechte Praxis, JSON zu senden, wenn Sie es am Ende nur in den DOM-Baum der Seite integrieren müssen.

Gut,

Ich bin eine dieser seltenen Personen, die Dinge gerne folgendermaßen trennen: - Der Server ist für die Bereitstellung von Daten (Modell) verantwortlich. - Der Kunde ist dafür verantwortlich, Daten anzuzeigen (anzuzeigen) und zu bearbeiten (Modell).

Der Server sollte sich also auf die Bereitstellung des Modells konzentrieren (in diesem Fall ist JSON besser). Auf diese Weise erhalten Sie einen flexiblen Ansatz. Wenn Sie die Ansicht Ihres Modells ändern möchten, sendet der Server dieselben Daten und ändert lediglich den Client, die Javascript-Komponenten, die diese Daten in eine Ansicht ändern. Stellen Sie sich vor, Sie haben einen Server, der Daten sowohl an mobile Geräte als auch an Desktop-Apps liefert.

Dieser Ansatz erhöht auch die Produktivität, da der Server- und Client-Code gleichzeitig erstellt werden kann, ohne den Fokus zu verlieren, was passiert, wenn Sie ständig von js zu PHP / JAVA / usw. wechseln.

Generell denke ich, dass die meisten Leute es vorziehen, so viel wie möglich auf der Serverseite zu tun, weil sie js nicht beherrschen, also versuchen sie, es so weit wie möglich zu vermeiden.

Grundsätzlich bin ich der gleichen Meinung wie die Leute, die an Angular arbeiten. Meiner Meinung nach ist das die Zukunft von Web-Apps.

Ich habe etwas Interessantes, von dem ich dachte, ich könnte es hinzufügen. Ich habe eine Anwendung entwickelt, die nur einmal eine vollständige Ansicht geladen hat. Ab diesem Zeitpunkt wurde nur noch mit Ajax an den Server zurückgemeldet. Es musste immer nur eine Seite geladen werden (mein Grund dafür ist hier unwichtig). Der interessante Teil besteht darin, dass ich ein besonderes Bedürfnis hatte, einige Daten zurückzugeben, die im Javascript bearbeitet werden sollen, UND eine Teilansicht anzuzeigen. Ich hätte dies in zwei Aufrufe zu zwei getrennten Aktionsmethoden aufteilen können, aber ich entschied mich für etwas, das ein bisschen mehr Spaß macht.

Hör zu:

public JsonResult MyJsonObject(string someData)
{
     return Json(new { SomeData = someData, PartialView = RenderPartialViewToString("JsonPartialView", null) }, JsonRequestBehavior.AllowGet);
}

Was ist RenderPartialViewToString (), das Sie fragen könnten? Es ist dieses kleine Nugget der Kühle hier:

protected string RenderPartialViewToString(string viewName, object model)
{
     ViewData.Model = model;

     using (StringWriter sw = new StringWriter())
     {
          ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
          ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
          viewResult.View.Render(viewContext, sw);

          return sw.GetStringBuilder().ToString();
     }
}

Ich habe diesbezüglich keine Leistungstests durchgeführt, daher bin ich mir nicht sicher, ob dies mehr oder weniger Aufwand verursacht als das Aufrufen einer Aktionsmethode für das JsonResult und einer für das ParticalViewResult, aber ich fand es trotzdem ziemlich cool. Es serialisiert nur eine Teilansicht in eine Zeichenfolge und sendet sie zusammen mit dem Json als einen seiner Parameter. Ich benutze dann JQuery, um diesen Parameter zu nehmen und ihn in den entsprechenden DOM-Knoten zu stecken :)

Lassen Sie mich wissen, was Sie von meinem Hybrid halten!

Wenn die Antwort keine weitere clientseitige Verarbeitung erfordert, ist HTML meiner Meinung nach in Ordnung. Durch das Senden von JSON werden Sie nur gezwungen, diese clientseitige Verarbeitung durchzuführen.

Andererseits verwende ich JSON, wenn ich nicht alle Antwortdaten auf einmal verwenden möchte. Zum Beispiel habe ich eine Reihe von drei verketteten Auswahlen, wobei der ausgewählte Wert von eins bestimmt, welche Werte zum Auffüllen der zweiten verwendet werden sollen, und so weiter.

IMV, es geht nur darum, die Daten von der Präsentation der Daten zu trennen, aber ich bin bei Pascal, es folgt nicht unbedingt, dass diese Trennung nur über die Client / Server-Grenze erfolgen kann. Wenn Sie diese Trennung bereits (auf dem Server) haben und dem Client nur etwas anzeigen möchten, hängt es ganz von Ihren Anforderungen ab, ob Sie JSON zurücksenden und auf dem Client nachbearbeiten oder nur HTML zurücksenden. Zu sagen, dass Sie "falsch" sind, HTML im allgemeinen Fall zurückzusenden, ist eine viel zu pauschale Aussage IMV.

JSON ist ein sehr vielseitiges und leichtes Format. Ich habe seine Schönheit entdeckt, als ich damit begonnen habe, es als clientseitige Vorlagen-Parser-Daten zu verwenden. Lassen Sie mich erklären, während ich früher Smarty und Ansichten auf der Serverseite verwendet habe (was eine hohe Serverlast erzeugt), verwende ich jetzt einige benutzerdefinierte Abfragefunktionen und alle Daten werden auf der Clientseite gerendert, wobei der Client-Browser als Vorlagenparser verwendet wird. Es spart Serverressourcen und andererseits verbessern Browser ihre JS-Engines jeden Tag. Daher ist die Geschwindigkeit der Client-Analyse derzeit kein wichtiges Thema. Darüber hinaus sind JSON-Objekte normalerweise sehr klein, sodass sie nicht viele clientseitige Ressourcen verbrauchen. Ich bevorzuge eine langsame Website für einige Benutzer mit langsamem Browser, anstatt eine langsame Website für alle, da der Server sehr ausgelastet ist.

Wenn Sie jedoch reine Daten vom Server senden, abstrahieren Sie diese von der Präsentation. Wenn Sie sie also morgen ändern oder Ihre Daten in einen anderen Dienst integrieren möchten, können Sie dies viel einfacher tun.

Nur meine 2 Cent.

Wenn Sie einen sauberen entkoppelten Client wünschen, was meiner Meinung nach die beste Vorgehensweise ist, ist es sinnvoll, 100% des DOM von Javascript erstellen zu lassen. Wenn Sie einen MVC-basierten Client erstellen, der über alle Kenntnisse zum Erstellen der Benutzeroberfläche verfügt, laden Ihre Benutzer einmal eine Javascript-Datei herunter und sie wird auf dem Client zwischengespeichert. Alle Anforderungen nach dem ersten Laden basieren auf Ajax und geben nur Daten zurück. Dieser Ansatz ist der sauberste, den ich gefunden habe, und sorgt für eine saubere, unabhängige Kapselung der Präsentation.

Die Serverseite konzentriert sich dann nur auf die Bereitstellung von Daten.

Wenn Sie also morgen vom Produkt aufgefordert werden, das Design einer Seite vollständig zu ändern, ändern Sie lediglich die Quell-JS, die das DOM erstellt. Wahrscheinlich können Sie jedoch Ihre bereits vorhandenen Ereignishandler wiederverwenden, und der Server ist sich dessen nicht bewusst, da er zu 100% von der Präsentation entkoppelt ist

Abhängig von Ihrer Benutzeroberfläche müssen Sie möglicherweise zwei (oder mehr) verschiedene Elemente in Ihrem DOM aktualisieren. Wenn Ihre Antwort in HTML ist, werden Sie das analysieren, um herauszufinden, was wohin geht? Oder Sie können einfach einen JSON-Hash verwenden.

Sie können es sogar kombinieren, einen JSON mit HTML-Daten zurückgeben :)

{ 'dom_ele_1' : '<p>My HTML part 1</p>', 'dome_ele_2' : '<div>Your payment has been received</div>' }

HTML hat viele redundante und nicht angezeigte Daten, z. B. Tags, Stylesheets usw. Daher ist die HTML-Größe im Vergleich zu JSON-Daten größer, was zu mehr Download- und Renderzeit führt. Außerdem ist der Browser damit beschäftigt, die neuen Daten zu rendern.

Das Senden von json erfolgt im Allgemeinen, wenn ein Javascript-Widget Informationen vom Server anfordert, z. B. eine Liste, eine Baumansicht oder eine automatische Vervollständigung. In diesem Fall würde ich JSON senden, da es sich um Daten handelt, die analysiert und roh verwendet werden. Wenn Sie jedoch nur HTML anzeigen möchten, ist es viel weniger Arbeit, es serverseitig zu generieren und es einfach im Browser anzuzeigen. Browser sind für das direkte Einfügen von HTML in den Dom mit innerHTML = "" optimiert, sodass Sie nichts falsch machen können.

Ich denke, es hängt von der Struktur des Designs ab. Es ist einfach sexy, JSON als HTML zu verwenden, aber die Frage ist, wie man damit umgehen würde, damit es leicht zu warten ist.

Angenommen, ich habe eine Auflistungsseite, die denselben HTML- / Stil der gesamten Site verwendet. Ich würde die globale Funktion schreiben, um diese Teile von HTML zu formatieren, und alles, was ich tun muss, ist, das JSON-Objekt an die Funktion zu übergeben.

Eine HTML-Antwort ist in den meisten Fällen ausreichend, es sei denn, Sie müssen auf der Clientseite eine Berechnung durchführen.

Kommt auf die Umstände an.

Manchmal ist es wichtig, JSON zu vermeiden. Wenn unsere Programmierer zum Beispiel Probleme beim Programmieren in js haben.

Meine Erfahrung zeigt mir Folgendes: Verwenden Sie den Ajax-Dienst besser als Inline-JSON.

Früher oder später wird das js zum Problem