Zur Übersicht

Zugriff auf die Webservices per Javascript und JSONP

Üblicherweise werden AJAX-Zugriff auf Webservices im Browser über das XMLHttpRequest-Objekt abgewickelt. Aufgrund der Same-Origin-Policy funktioniert das aber nicht, wenn Sie auf einem Server zugreifen, der nicht identisch ist mit Ihrer Webseite oder Webanwendung.

Das Problem kann durch eine JSONP genannte Technik umgangen werden. Die Golem.de Javascript-API implementiert diese Technik. Wenn Sie die Javascript-API nicht nutzen wollen, müssen Sie den Zugriff per JSONP selbst implementieren bzw. eine Javascript-Bibliothek benutzen, die JSONP unterstützt.

Bestandteil von JSONP ist die Übergabe eines URL-Parameters, der den Namen einer Javascript-Callbackfunktion enthält. Für alle Webservices von Golem.de lautet der Name des Parameters jsonp. Beispielsweise:

http://api.golem.de/api/article/meta/12345/?key=0_0_0&jsonp=myFunction

JSONP mit jQuery

Die AJAX-Implementierung von jQuery unterstützt JSONP. Dazu muss in die übergebenen URL für den Request lediglich ein Fragezeichen an die Stelle eingefügt werden, wo jQuery den Namen der Callbackfunktion einsetzen soll. Am Beispiel einer Abfrage nach den Metadaten eines Artikels:

$.getJSON("http://api.golem.de/api/article/meta/12345/?key="+DEVKEY+"&jsonp=?",
          function(result) {
           ...
          }
        );
Beispiel 1: Abfrage mit jQuery

War der HTTP-Request erfolgreich, wird die übergebene Callbackfunktion aufgerufen. Das der Funktion übergebene Objektliteral result enthält die zurückgelieferten Daten der Abfrage.

Sie müssen nun prüfen, ob der Webservice die Anfrage auch korrekt verarbeiten konnte. Die Eigenschaft result.success gibt Ihnen darüber Auskunft. Ist es true, war die Abfrage erfolgreich und die Daten befinden sich in result.data. Schlug die Abfrage fehl, hier weil der Artikel nicht existiert, dann ist der Wert false. In dem Fall erhalten Sie über result.errorCode die übermittelte Fehlernummer und über result.errorMessage die Fehlermeldung des Webservices.

$.getJSON("http://api.golem.de/api/article/meta/12345/?key="+DEVKEY+"&jsonp=?",
          function(result) {

                 if(result.success) {

                  var data = result.data;

                  document.getElementById('meta_id').innerHTML           = data.articleid;
                  document.getElementById('meta_headline').innerHTML     = data.headline;
                  document.getElementById('meta_subheadline').innerHTML  = data.subheadline;
                  document.getElementById('meta_abstracttext').innerHTML = data.abstracttext;

                  var publishDate = new Date(data.date * 1000);

                  document.getElementById('meta_published').innerHTML    = publishDate.toLocaleString();

                 } else {

                   alert(result.errorMessage);

                 }

          }
        );
Beispiel 2: Auswertung der Antwort

Vollständiges Beispiel für JSONP mit jQuery
<html>
 <head>
  <title>Golem.de access via JSONP and jQuery</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">

   var DEVKEY = '' // Entwicklerschlüssel hier einfügen

   $(document).ready(

    function() {

      $.getJSON("http://api.golem.de/api/article/meta/12345/?key="+DEVKEY+"&jsonp=?",
                function(result) {

                 if(result.success) {

                  var data = result.data;

                  document.getElementById('meta_id').innerHTML           = data.articleid;
                  document.getElementById('meta_headline').innerHTML     = data.headline;
                  document.getElementById('meta_subheadline').innerHTML  = data.subheadline;
                  document.getElementById('meta_abstracttext').innerHTML = data.abstracttext;

                  var publishDate = new Date(data.date * 1000);

                  document.getElementById('meta_published').innerHTML    = publishDate.toLocaleString();

                 } else {

                   alert(result.errorMessage);

                 }

                }
              );
    }

   );


  </script>
 </head>
 <body>
  <table border="1" width="100%">
   <tr>
    <th>Artikel-Identifer</th>
    <td id="meta_id"></td>
   </tr>
   <tr>
    <th>Überschrift</th>
    <td id="meta_headline"></td>
   </tr>
   <tr>
    <th>Unter-Überschrift</th>
    <td id="meta_subheadline"></td>
   </tr>
   <tr>
    <th>Abstract</th>
    <td id="meta_abstracttext"></td>
   </tr>
   <tr>
    <th>Veröffentlicht</th>
    <td id="meta_published"></td>
   </tr>
  </table>

 </body>
</html>


Zur Übersicht