Install

  1. Download ajax-cross-origin Plugin from here
  2. Extract the file: "jquery.ajax-cross-origin.min.js" and copy it to your JavaScript folder.
  3. Add jQuery <script> tag:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  4. Add ajax-cross-origin Plugin <script> tag after the jQuery <script> tag:
    <script type="text/javascript" src="http://www.example.com/path/getdata"></script>
  5. Call jQuery ajax and set the option: crossOrigin: true

    Use jQuery.ajax():

    $.ajax({
      crossOrigin: true,
      url: url,
      success: function(data) {
    	console.log(data);
      }
    });

    Use jQuery.getJSON():

    $.ajaxSetup({
      crossOrigin: true
    });
    
    $.getJSON(url, null, function(data) {
      $( '#test' ).html(data);
    });

    Note: the only change from regular jQuery.ajax() call is the option: crossOrigin: true

  6. Choose your Proxy Server.

    You can choose one of the 3 options:
    1. Use your own Proxy Server (no limitation - server required)
    2. Use Google Apps Script as a Proxy Server running under your own Google Account (limited by Google policy)
    3. Use this site shared demo Script as a Proxy Server running under my Google Account (limited & shared)

Use your own Proxy Server

  1. Extract the file: "proxy.php" and copy it to your server if your server support PHP (or you can write your own proxy script that accept url as param and return jsonp).

    proxy.php:

    <?php
    $url = (isset($_GET['url'])) ? $_GET['url'] : false;
    if(!$url) exit;
    
    $referer = (isset($_SERVER['HTTP_REFERER'])) ? strtolower($_SERVER['HTTP_REFERER']) : false;
    $is_allowed = $referer && strpos($referer, strtolower($_SERVER['SERVER_NAME'])) !== false; //deny abuse of your proxy from outside your site
    
    $string = ($is_allowed) ? utf8_encode(file_get_contents($url)) : 'You are not allowed to use this proxy!';
    $json = json_encode($string);
    $callback = (isset($_GET['callback'])) ? $_GET['callback'] : false;
    if($callback){
    	$jsonp = "$callback($json)";
    	header('Content-Type: application/javascript');
    	echo $jsonp;
    	exit;
    }
    echo $json;
    ?>
  2. Set the option: proxy: [proxy url]

    Use jQuery.ajax():

    $.ajax({
      crossOrigin: true,
      proxy: "http://www.domain.com/path/proxy.php", //to overide default proxy
      url: url,
      success: function(data) {
    	console.log(data);
      }
    });

    Use jQuery.getJSON():

    $.ajaxSetup({
      crossOrigin: true,
      proxy: "http://www.domain.com/path/proxy.php"
    });
    
    $.getJSON(url, null, function(data) {
      $( '#test' ).html(data);
    });

Use your own Google Apps Script as a Proxy Server

  1. Download the Source Code Package from Home Page
  2. Extract the file: "code.gs".
  3. Go to Google Apps Script and create a new Script (Blank Project)
  4. Copy & Paste the content of: "code.gs" into the new Script.
  5. Save the Script, set the version and Publish.

  6. Copy the web app URL
  7. Edit the file: "jquery.ajax-cross-origin.min.js" and set the proxyJsonp variable to your web app URL.