26 December 2011 HowTo, jsonp, Stackoverflow Robert Muehsig

Stackoverflow.com – der Segen für alle Programmierer und die, die es werden wollen. Die Seite enthält nicht nur Fragen und Antworten, sondern hat über die Tagging Funktion auch eine Art “Mini”-Wiki für Technologien entwickelt. Stackoverflow bietet natürlich auch eine API an und für einfache lesende Zugriffe gibt es auch eine Variante, welche die eigenen Serverkapazitäten schont und ziemlich clever ist: Die Rede ist von JSONP.

Was ist JSONP?

Durch das Sicherheitsmodell im Browser ist es heutzutage nicht wirklich einfach möglich AJAX Requests an Seiten zu schicken, welche eine andere Domain haben. Allerdings kann man einen kleinen Workaround benutzen: Es ist erlaubt, fremde Ressourcen von anderen Domains über GET einzubinden. Dazu zählt natürlich auch Javascript.

JSONP bedient sich diesem Trick: Der Browser erlaubt es, dass man fremden Javascript Content via Http GET auf die eigene Seite einbindet. Der fremde Javascript Code kann alles mögliche sein, u.a. auch JSON. Damit ist die Idee der JSONP API geboren.

jQuery und JSONP – sieht aus wie AJAX. Ist auch fast dasselbe.

Ein normaler jQuery AJAX Aufruf, um ein

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

 

Der JSONP jQuery Aufruf ist leicht modifiziert und enthält ein “dataType jsonp” Property.

$.ajax({
  url: "otherDomain...",
  cache: false,
  dataType: 'jsonp',
  success: function(html){
    $("#results").append(html);
  }
});

Beispiel Stackoverflow API:

Ich möchte die Wiki Information über das Tag “RavenDB” mir über JSONP holen.

            
                $.ajax({
                    type: 'GET',
                    url: 'http://api.stackoverflow.com/1.1/tags/ravendb/wikis',
                    dataType: 'jsonp',
                    success: function (data) {
                        if (data.tag_wikis.length > 0) {
                            alert(data.tag_wikis[0].wiki_excerpt);
                     	}  
                    },
                    jsonp: 'jsonp'
                });

Als Ergebnis kommen die Daten über den Browser geladen direkt von Stackoverflow.

Was bringt das?

Durch jsonp erspart man sich den Proxy, welcher zwischen dem Browser und dem eigentlichen Service vermitteln müsste. Allerdings sind die Anwendungsfälle recht beschränkt und ein praktischer Einsatz ist mir nur bei lesenden Sachen bekannt. Evtl. geht hier aber später mehr mit Websockets & co.


Written by Robert Muehsig

Software Developer - from Saxony, Germany - working on primedocs.io. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de