{"id":81,"date":"2009-06-21T21:48:29","date_gmt":"2009-06-21T21:48:29","guid":{"rendered":"http:\/\/localhost\/tfcom_wp\/2009\/06\/21\/jquery-jsonp\/"},"modified":"2009-06-21T21:48:29","modified_gmt":"2009-06-21T21:48:29","slug":"jquery-jsonp","status":"publish","type":"post","link":"https:\/\/www.tech-freaks.com\/java\/javascript\/jquery-jsonp.html","title":{"rendered":"Using Jquery with JSONP"},"content":{"rendered":"

The workshop is for<\/strong><\/p>\n

This workshop is dedicated to all those who are stuck with cross-domain communication issue trying to fetch JSON data from a different domain using Jquery.<\/p>\n

Introduction<\/strong><\/p>\n

This workshop is built up based on ‘JSON with Jquery’ workshop. It starts by providing a working example of JSON service accessed by Jquery and highlights cross-domain communication issue while trying to access JSON data from a different domain. It then goes on showing the resolution using JSONP (JSON with Padding).<\/p>\n

Quick Recap<\/strong><\/p>\n

Let us have a quick recap of the example ‘JSON with Jquery’. However, it is strongly recommended to have go through\u00a0JSON with Jquery\u00a0<\/a>workshop just to get an idea of what the example deals with. Here is a summary:<\/p>\n

    \n
  1. A\u00a0HTML page has the Jquery code to access JSON and generate dynamic dropdowns.<\/li>\n
  2. There are two predefined static JSON files one for category and another for articles.<\/li>\n<\/ol>\n

    Dynamically generated JSON files<\/strong><\/p>\n

    We will be modifying the previous workshop example to generate dynamic JSON files using server side components (like JSP\/Servlet, PHP etc). So, we will create a JSP\/PHP which spits out a JSON data. We create a PHP file by the name getSiteJSON.php. Here, we merge the content of two static JSON files used previously into a single server component. Note that our JSON file is still static, as the contents are hardcoded. However, in real life your JSON contents will be dynamically pulled from\u00a0the database.<\/p>\n

    The below code snippet highlights the change in the Jquery JSON call in the html file.<\/p>\n

    $.getJSON(\"http:\/\/www.stage3.tech-freaks.in\/sourcecode\/jquery_jsonp\/\r\n                      getSiteJson.php?type=category\",  function(json) {\r\n          var catJson = json[sSec];\r\n          var options = \"<option value=\\\"select\\\">Select<\/option>\";\r\n          for(i=0;i<catJson.length;i++) {<\/code><\/pre>\n
    The below code snippets is a PHP code which generates JSON.<\/p>\n
       $type = $_GET['type'];\r\n    $jsonData = \"\";\r\n    if($type==\"category\")\r\n        $jsonData = \"{\\\"java_programming\\\": [ { \\\"ky\\\": \\\"java_basics\\\", ....}]}\";\r\n    else\r\n        $jsonData = \"{\\\"java_basics\\\": [\\\"Java Hello World - Tech Programmer\\\", ...]}\";\r\n    echo $jsonData;<\/code><\/pre>\n
    \u00a0You may want to check the working of the getSiteJSON.php by accessing the page directly with query parameter of ‘type=category’ or ‘type=article’ and see the JSON printed in the page.<\/p>\n
    Cross domain JSON fetch<\/strong><\/p>\n
    Now, let us assume that we want to get the site data as JSON from a different site. From a technical perspective, this means that getSiteJSON.php or some service similar to it is present in a different domain. This is common with JSON services provided by a different site and used by another site.\u00a0<\/p>\n
    For this workshop, we simulate this\u00a0scenario by hosting the getSiteJSON.php in\u00a0www.stage3.tech-freaks.in<\/em>\u00a0and the HTML page which fetches the JSON content using Jquery in\u00a0www.tech-freaks.in<\/em>.<\/p>\n
    Uploading files…..<\/p>\n
    Check\u00a0JSON service from cross-domain<\/a>\u00a0by checking this demo.<\/p>\n
    Oops! The drop-downs are not loading. Let check the error console in FireFox (from menu Tools >> Error Console).<\/p>\n
    We see two error lines as below:<\/p>\n
    \n
    \n
    Error: [Exception... \"Access to restricted URI denied\"\u00a0 code: \"1012\" nsresult: \"0x805303f4 (NS_ERROR_DOM_BAD_URI)\"\u00a0 location: \"... Line: ...\"]<\/code>
    Source File: ....<\/code>
    Line: ...<\/code><\/p>\n
    Security Error: Content at file:... may not load data from .....<\/code><\/p>\n<\/dd>\n<\/dl>\n
    Hmmm, this is a cross domain JSON data fetch issue. So, when you try to access a JSON data using Jquery\/AJAX call from a different domain, we see the browser slapping the above error message on our face.<\/p>\n
    Where do we go from here?<\/p>\n
    JSONP comes to the party<\/strong><\/p>\n
    JSONP stands for JSON with Padding. It is a work around used to resolve the cross domain dynamic JSON fetch problems by wrapping the JSON data in a function. So, what we return is something like:<\/p>\n
    functionName({\"java_programming\": [ { \"ky\": \"java_basics\", \"val\": \"Java Basics\" }, ...]})<\/code><\/pre>\n
    The function name is passed as a parameter. In Jquery, during the getJSON call we pass a parameter ‘callback=?’. Jquery support JSONP and automatically generations a function name. The callback is the parameter in which the function name is passed.<\/p>\n
    Let us get to work. We want to modify the code for implementing JSONP.<\/p>\n