JavaScript/Handling JSON
Previous: Handling HTML Index Next: Handling XML

Native JSON

Modern JSON Handling

Handling JSON may require adding a supporting library, which creates the global JSON object. This object is present natively only in new browsers (e.g. FF 3.5, IE8). Such a library can be found here:

//Parsing JSON:
var myObject = JSON.parse(myJSONtext)

//Creating JSON:
var myJSONText = JSON.stringify(myObject);

Old way

In old browsers you could use the following syntax, but this raises issues of security, such as XSS.

var myObject = eval("(" + myJSONtext + ")")


Given browser restrictions on cross-domain Ajax (allowed only by configuration in some earlier browsers, by non-standard means in IE8, and with server headers in HTML5), one way to circumvent such restrictions (while still requiring some server-side script coordination) is for sites to insert an HTML script tag dynamically into their code, whereby the cross-domain script they target (typically) supplies JSON, but wrapped inside a function call (the function name being supplied according to the value of a "callback" parameter supplied by the requestor) or some other executable code.

In PHP, one might serve such JSONP in as simple a fashion as this:

if (isset($_GET['callback'])) {
  header('Content-Type: application/javascript');
  $our_site_data = ... // Set to an array or object containing data to be supplied for use at other sites
  print $_GET['callback'] . '(' . json_encode($our_site_data) . ')';

jQuery and other frameworks have their own means of generating JSONP requests, but we'll use the following custom code.

Note: It is important to bear in mind that the following code should not be used, if the targeted site or the data supplied by the target site, may come from a non-trustworthy source, since it is possible for such scripts to run with the privileges of the using site (e.g., to read user cookies and pass them on to another site) and thereby execute a Cross-site scripting attack.

var JSONP = function(global) { // Introduces only one global
  // MIT Style license, adapted from
  function JSONP(uri, callback) {
    function JSONPResponse {
      // Reduce memory by deleting callbacks when finished
      try { delete JSONP[src] } catch(e) { JSONP[src] = null; }
      // Execute the user's callback with the arguments supplied by the server's JSONP call
      if (typeof callback === 'string') { // Assumes only one return argument and that it is an HTML string
        document.getElementById(callback).innerHTML = arguments[0];
      } else {
        callback.apply(this, arguments);
    // Ensure a unique callback
    var src = '_' + id++,
    script = document.createElement("script");
    // Add our callback as a property of this JSONP
    // function to avoid introducing more globals
    JSONP[src] = JSONPResponse;
    // We include "callback", as it is typically used in
    // JSONP (e.g., on Study Guides' API) to specify the callback
    ).src = uri + (uri.indexOf('?') === -1 ? '?' : '&') + "callback=JSONP." + src;
  var id = 0, documentElement = document.documentElement;
  return JSONP;

// Get the parsed HTML of this page you are reading now
// using the Mediawiki API (See
// for Study Guides, but it also applies at other Mediawiki wikis) that
// allows for such cross-domain calls
  function (data) {

More information

Previous: Handling HTML Index Next: Handling XML

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us  |  About |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books