JSON(P): JQuery

 

Die nachfolgenden Beschreibungen und Beispiele gehen von einer Verwendung von JQuery aus! Bei der Verwendung von anderen JavaScript Bibliotheken können andere Regeln gelten.

Zu Beachten!

  • Die JSONP-URL zu dem anderen Server muss beim Aufruf durch JQuery immer mit dem CGI-Parameter "callback=?" erweitert werden!
  • Die JSON-Daten, die von dem anderen Server zurückgeliefert werden, müssen immer in einer Funktion gekapselt werden, welches ein Objekt zurückliefert! bspw. myData({});
  • Der Funktionsname bei den gelieferten JSON-Daten muss im eigenen Script namentlich exakt gleich definiert worden sein, damit er durch den "Callback"-Mechanismus aufgerufen werden kann.
  • Um die JSONP-Daten abzurufen, genügt die Verwendung von "$.getJSON(jsonUrl);" Im Gegensatz zu einem einfachen, lokalen JSON-Abruf wird hier auf die Definition einer Callback-Funktion bei der Verwendung von "$.getJSON(url)" verzichtet. Der Name der Callback-Funktion ist ja bereits in den zurückgelieferten JSONP-Daten enthalten.


Beispiel

Server 1:

Aufgabe: liefert die dynamisch generierten JSON Daten
Url: http://www.anyserver1.org/testdata/customers.json

JSON Daten:

myCustomers({
  "jsonData":[
    {"name":"meyer","credit":false,"limit":0},
    {"name":"smith","credit":true,"limit":10000}
  ]
});


Server 2:

Aufgabe: enthält die statischen HTML-Seiten, die die JSON-Daten per JavaScript abfragen
Url: http://www.anyserver2.org/jsontest/customers.html

JavaScript Datei 'my.js':
... zum Laden und Integrieren der Daten (mit JQuery).

function callJsonResult(){
  var jsonUrl = "http://www.anyserver1.org/testdata/customers.json?callback=?";
  $.getJSON(jsonUrl);
}

function myCustomers(jsonData){
  var tableContent = "";
  $.each(jsonData, function(idx, row){
    var rowText = "<tr>";
    rowText += "<td>" + row.name + "</td>";
    rowText += "<td>" + row.credit + "</td>";
    rowText += "<td>" + row.limit + "</td>";
    rowText += "</tr>;
    tableContent += rowText;
  });
  tableContent = "<tbody>" + tableContent + "</tbody>";
  $("#idCustomer").innerHTML = tableContent;
}

customers.html

Im Header ...

  <script type="text/javascript" src="jquery-1.8.2.js">
  
Im Body ...
  
  <table id="idCustomer"/>
  <button id="butLoad" onclick="callJsonResult();">Load json</button>
  <script type="text/javascript" src="my.js"/>


Weitere Artikel:


Links: