Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2013
    Thanked 1 Time in 1 Post

    Unhappy How to load an external .json file upon a query request

    I'm trying to figure out how to load an external .json file from a query request. Originally, I was using the $getJSON Query until I found out that it was using an XHR request and that my .json file is not on the same machine (ergo there is the cross domain issue). How would you load a json file from an external source from an AJAX request?
    Ultimately I want to
    1. Take a .json file.
    2. Query results and store into array.

  2. #2
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    There are four things you could do

    - If you have admin access to the remote server
    1. Change the response header to add "Access-Control-Allow-Origin" to your requestor domain OR
    2. Implement the server to return JSONP

    - If you don't have admin access to the remote server
    3. If the remote server already implements JSONP, you should use it
    4. Implement a proxy script on your server. This proxy script will request the .json from the remote server (which is legal) and forward it to your browser. This will work around the Same Origin Policy

  3. Users who have thanked devnull69 for this post:

    and0rsk (09-24-2013)

  4. #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 626 Times in 605 Posts
    you can also use YQL to bend the rules: http://developer.yahoo.com/yql/conso...value.items%22
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

  5. Users who have thanked rnd me for this post:

    and0rsk (09-24-2013)

  6. #4
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    The core of JSONP is JSON. So you create your JSON output as usual. But beyond that, JSONP does not simply output this JSON but rather create a Javascript with Content-type: text/javascript that contains a function call with the JSON as parameter. The name of the function must be a function name that exists in the Javascript running the request.

    Example PHP
    header('Content-type: text/javascript');
    $callback = $_GET['callback'];
    $myjsonoutput = json_encode($data);
    // usually you would do echo $myjsonoutput, but now you output Javascript code
    echo $callback . '(' . $myjsonoutput . ');';
    // the result is something like "javascriptfunction({.....yourJSON....});"
    On the client side you don't start a usual AJAX call. Instead you create a new <script> element and assign the PHP script path to its src attribute. This src attribute can also be on an external server, so it circumvents the SOP (same origin policy) that stops you from doing this with plain AJAX.

    After the external PHP script has been loaded as Javascript, it will automatically be executed. So make sure that you have the correct callback function name
    var newscript = document.createElement('script');
    newscript.src = 'http://www.server.com/path/to/the/script.php?callback=myfunction';
    newscript.type = "text/javascript";
    function myfunction(JSON) {
       // here you have access to the JSON output directly as a Javascript object literal
    EDIT: By the way, if you use jQuery, you will find out that the AJAX methods provided by jQuery have a 'dataType : "jsonp"' option, so you can use those AJAX methods to access JSONP scripts even though (technically speaking) it is not AJAX. The callback function name sent by the PHP script will be automatically replaced by the "success" callback option of the AJAX method in that case.
    Last edited by devnull69; 10-17-2013 at 06:27 PM.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts