StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Say you had some URL that gave you JSON data like:</p> <pre><code>{'field': 'value'} </code></pre> <p>...and you had a similar URL except it used JSONP, to which you passed the callback function name 'myCallback' (usually done by giving it a query parameter called 'callback', e.g. <code>http://example.com/dataSource?callback=myCallback</code>). Then it would return:</p> <pre><code>myCallback({'field':'value'}) </code></pre> <p>...which is not just an object, but is actually code that can be executed. So if you define a function elsewhere in your page called <code>myFunction</code> and execute this script, it will be called with the data from the URL. </p> <p>The cool thing about this is: you can create a script tag and use your URL (complete with <code>callback</code> parameter) as the <code>src</code> attribute, and the browser will run it. That means you can get around the 'same-origin' security policy (because browsers allow you to run script tags from sources other than the domain of the page).</p> <p>This is what jQuery does when you make an ajax request (using <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer"><code>.ajax</code></a> with 'jsonp' as the value for the <code>dataType</code> property). E.g.</p> <pre><code>$.ajax({ url: 'http://example.com/datasource', dataType: 'jsonp', success: function(data) { // your code to handle data here } }); </code></pre> <p>Here, jQuery takes care of the callback function name and query parameter - making the API identical to other ajax calls. But unlike other types of ajax requests, as mentioned, you're not restricted to getting data from the same origin as your page. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload