HowTo: Json-Services erstellen (…oder wie erstell ich dynamisch Javascript?…oder Web 2.0 ohne AJAX?)

JSON (oder Javascript Objekt Notation) ist besonders für Webanwendung eine sehr gute Alternative zu XML. Auf Javascript mit Xml zugreifen geht (siehe HowTo), ist aber nicht unbedingt schön.
In Zeiten von (XML) Webservices und AJAX steht man dabei aber vor einem Problem: Wie bekomm ich etwas in einem Json Format? Gibts ein Serialisierer?

Ja, gibts – sogar direkt von Microsoft – die ASP.NET 2.0 AJAX Extensions oder ASP.NET 3.5.

Was wollen wir eigentlich erreichen?

Wie man einen ASP.NET Webservice dazu bringt Json zu generieren, wurde hier bereits beschrieben (einfach über die Webmethod das ResponseFormat angeben), was wir aber wollen ist ein direkter “Json Service” welchen man direkt als Javascript Datei mit ins Projekt einbinden über den üblichen Syntax: <script src=”…” …>…</script>
Ein anderer Punkt ist folgender: AJAX ist schön und gut – aber mal ehrlich: Jedes mal einen Request losschicken nur weil man ein paar Daten mehr haben möchte? Warum das nicht direkt in einem Rutsch laden? Mit Json ist eine wesentlich schnellere Datenübertragung möglich als mit AJAX:

In einem Projekt mit einer Datenbank wo über 1000 Produkte samt Beschreibungstexte drin stehen, sowie Preise, Bewertungen etc. wurden alle Daten direkt auf den Client übertragen und diese Datei war nur 300kb groß (mit Kompression sogar nur 150kb!)- jedes Bild ist heutzutage größer.

Was bringt das nun?

Web 2.0 ohne AJAX – warum kleine Datenmengen immer über einen umständlichen XmlHttpRequest nachladen, wenn es reichen würde die Daten einmal komplett als Json zu ziehen – das ist wesentlich trafficsparender und ermöglicht es alle Daten ohne nervige AJAX Ladebalken oder ähnliches anzuzeigen.

Da Json nur Javascript ist…

Zur eigentlichen Frage: Wie kann ich Javascript dynamisch erstellen?

Schritt 1: ASP.NET AJAX Projekt anlegen

Wir legen uns ein einfaches ASP.NET AJAX Projekt an und haben dann diese Struktur:

In unserer Default.aspx wollen wir unsere generierte Json Datei später einbinden.

Schritt 2: Demodaten vorbereiten

Zur Demonstration wollen wir einfach ein paar Kontaktdaten (“Contacts” & “Address”) nehmen. Da wir keine Datenbank haben, simulieren wir einfach 500 Kontakte über den “ContactManager”, welcher 500 Contacts erstellt und als “List<Contact>” zurück gibt.

Klassenstruktur (Verschachtelte Struktur beachten) :

Schritt 3: Generischer Handler implementieren – dyamischer Javascript Generator

Oft übersehen aber in diesem Fall äußerst praktisch:

Da wir eine Javascript Datei dynamisch erstellen wollen, brauchen wir kein Markup (aspx/html) oder ein Webdienst (asmx). Die Lösung: Eine ASHX.

Source Code “ContactJsonService”

    public class ContactJsonService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            ContactListManager manager = new ContactListManager();

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string output = "var ContactList = " + serializer.Serialize(manager.GetAllContacts());

            context.Response.ContentType = "application/json";
            context.Response.Write(output);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

Die HTTP Anfrage kommt rein und alles was wir machen ist den Content uns selber zusammenstellen – daher wird auch nur das ausgegeben was wir wollen und kein unnötiges Markup. Als ContentType geben wir hier nun noch “application/json” an – aber eigentlich ist das egal.

Wichtig: “var ContactList = ” muss angegeben werden, damit man später auf das Json zugreifen kann. Ein verschateltes Json, so wie wir es wollen findet man auch auf json.org gut erklärt.
Der JavaScriptSerializer ist im Namespace “System.Web.Script.Serialization” welche sich in der Assembly “System.Web.Extensions” (also ASP.NET AJAX / ASP.NET 3.5) befindet.

Schritt 4: Unsere dynamische JS Datei einbinden

Auf unserer Default.aspx können wir nun einfach die ASHX einbinden:

    <script src="ContactJsonService.ashx" type="text/javascript" language="javascript"></script>

Und schon haben wir Zugriff auf das JS Objekt:

Und erstellen daraus unsere dynamische Liste welche direkt im onload aufgerufen wird:

    function create()
    {
        for(i=0; i<ContactList.length; i++)
        {
        var newLi = document.createElement("li");
        newLi.innerHTML = ContactList[i].Name;
        $get("list").appendChild(newLi);
        }
    }

Was sagt die Ladezeit?

Mit 54kb und 1 Sekunde Ladezeit auf einem Development Server (ein richtiger IIS ist schneller und mit Kompression kann man es nochmal verbessern) hat man 500 Datensätze da und kann die über Javascript anschauen wie man möchte – ohne weitere Ladezeiten!

Fazit:

Das Implementieren eines Json Services ist nicht schwer – man muss aber beachten, dass es nur dort Sinn macht, wo der Datenbestand sich nicht jede Sekunde / Minute verändert, weil man den Browser nicht dazu veranlassen kann die Daten neu zu ziehen,jedenfalls nicht direkt über diese Einbindung.

Bei den meisten Sachen ist dies aber auch gar nicht nötig. Bei einem Shop zum Beispiel könnte man den Produktkatalog einmal direkt auf den Client über dieses Technik schieben und könnte diese dann anschauen und in der Darstellung verändern ohne weitere Ladezeit, was bei AJAX so nicht möglich ist.
Der Produktkatalog wird sich immerhin nicht ständig ändern und sobald der Nutzer wieder auf die Seite geht, wird eine aktuelle Datei gezogen.

Wenn man nur “readonly” die Daten anders Darstellen will (Eine Listenansicht, eine Detailansicht etc.) kann man dies ohne AJAX machen und dadurch, dass man keine Requests los schickt, auch wesentlich performanter dies realisieren.

Das sowas auch in der Praxis geht, zeigt dotnetkicks.com mit seinem JsonService.

[ Download Source Code | Demoanwendung ]

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

4 Responses

1. 

   johannes

   15. April 2008

   wie kann man bloß seine zeit mit ASP.NET verschwenden – unbegreiflich. sonst netter artikel.

   Reply
2. 

   Robert Mühsig

   15. April 2008

   Ich lass mal diese Kritik hier stehen
   Sprachen-bashing (“PHP ist grottig”, “Java ist langsam!” etc.) können wir an einer anderen Stelle betreiben

   Reply
3. 

   simcup

   18. April 2010

   was wäre denn dann eine gute technik für sich häufig ändernde daten? zu beispiel den abgleich bei einem auktionshaus?

   Reply
4. 

   simcup

   18. April 2010

   //edit
   kein flash, dafür müsste ja zuerst der player installiert werden und das würde ich gern vermeiden

   Reply