Caleb Madrigal

Programming, Hacking, Math, and Art


JSONP for cross-origin AJAX

I was recently wanting to enable a webpage to utilize some server-side functionality which was on a different server than the one serving the original page. Traditionally, this has been problematic due to browsers' Same origin policy. JSONP is a solution to this problem. Here is how to do it with jQuery...

This webpage can be saved locally to any machine, opened in a browser, and can then load data from my web server:

<script src="" type="text/javascript"></script>
<script type="text/javascript">
            jsonpCallback: "jsonp_load",
    <button>Load data</button>
    <div id="outputdiv"></div>

Here is what the server-side looks like:

jsonp_load("<h4>This text was loaded from</h4>");