JavaScript/Handling JSON
Native JSON
[edit | edit source]Modern JSON Handling
[edit | edit source]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:varmyObject=JSON.parse(myJSONtext)//Creating JSON:varmyJSONText=JSON.stringify(myObject);
Old way
[edit | edit source]In old browsers you could use the following syntax, but this raises issues of security, such as XSS.
varmyObject=eval("("+myJSONtext+")")
JSONP
[edit | edit source]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:
<?phpif(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 sitesprint$_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.
<script>varJSONP=function(global){// Introduces only one global// MIT Style license, adapted from http://devpro.it/code/209.htmlfunctionJSONP(uri,callback){functionJSONPResponse(){// Reduce memory by deleting callbacks when finishedtry{deleteJSONP[src]}catch(e){JSONP[src]=null;}documentElement.removeChild(script);// Execute the user's callback with the arguments supplied by the server's JSONP callif(typeofcallback==='string'){// Assumes only one return argument and that it is an HTML stringdocument.getElementById(callback).innerHTML=arguments[0];}else{callback.apply(this,arguments);}}// Ensure a unique callbackvarsrc='_'+id++,script=document.createElement("script");// Add our callback as a property of this JSONP// function to avoid introducing more globalsJSONP[src]=JSONPResponse;// We include "callback", as it is typically used in// JSONP (e.g., on Wikibooks' API) to specify the callbackdocumentElement.insertBefore(script,documentElement.lastChild).src=uri+(uri.indexOf('?')===-1?'?':'&')+"callback=JSONP."+src;}varid=0,documentElement=document.documentElement;returnJSONP;}(this);// Get the parsed HTML of this page you are reading now// using the Mediawiki API (See http://en.wikibooks.org/w/api.php// for Wikibooks, but it also applies at other Mediawiki wikis) that// allows for such cross-domain callsJSONP('http://en.wikibooks.org/w/api.php?action=parse&format=json&page=JavaScript/Handling_JSON',function(data){alert(data.parse.text['*']);});</script>