JSONP mit jQuery am Beispiel der Stackoverflow API

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.

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.

One Response

1. 

   Alex

   26. December 2011

   Guck Dir mal CORS an:
   http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

   Reply