I am new to jsonp and I understand that JSONP is a technique which creates a dynamic <script src="..."> tag, that wraps the returned JavaScript (or JSON object) with a callback function.

But if I am not mistaken, src attribute in a script tag will hold back all further executions until the script loads, so how can it be asynchronous call?

I am new to jsonp and I understand that JSONP is a technique which creates a dynamic <script src="..."> tag, that wraps the returned JavaScript (or JSON object) with a callback function.

But if I am not mistaken, src attribute in a script tag will hold back all further executions until the script loads, so how can it be asynchronous call?

• javascript
• asynchronous
• jsonp

• Your question seems to be inplete... Please provide more details. And look in here, great topic about JSONP stackoverflow./questions/3839966/… – user219882 Commented Feb 19, 2012 at 12:43
• now my question is plete. any ideas? – yoav barnea Commented Feb 20, 2012 at 6:13

7 Answers 7

Actually, as you can read up on here and here dynamically created <script src=".."> elements after the DOM has finished loaded will NOT be blocking and by that they will be asynchrounus.. at least in the order they are created.

qutoted from http://calendar.perfplanet./2010/the-truth-about-non-blocking-javascript/

When inserting a script dynamically, the non-blocking download begins immediately. The script executes as soon as it is downloaded pletely. In most browsers, the order of execution is not guaranteed, though Firefox < 4 and Opera will execute the scripts in the order in which they were inserted. This general approach is supported in all major browsers.

I think your question has two parts.

First, JSONP is essentially not about dynamic script tags, rather dynamic script tags are a technique used hand in hand with JSONP.

JSONP is a method which allows site to load content from different domains than the ORIGIN, exploiting the browser's tolerance towards SCRIPT tags with src pointing to external domains. (You should know this by going through the links given in other answers).

Dynamic SCRIPT tags on the other hand provides an Asynchronous nature to any script be it JSONP or otherwise.

Point is, whenever a browser hits a SCRIPT tag on a document, it stops most other activities (rendering DOM specially) until that script is download. This affects users experience on how responsive the site is. Effect of this is even worse if the script is not directly contributing to the primary content of the site (such as Google Ads, Tweets, or Facebook Timeline (Asuming you are not Mark Z. :P), etc)

To avoid this problem, you can inject dynamic SCRIPT tags to the page once it has fully loaded on the browser (i.e ready/loaded event). Then the browser will silently load the new script, but user has the full page (almost) rendered for him giving impression of quick loading. In that sense dynamic scripts can be asynchronous to page loading.

However, in practice most of scripts used in this way are JSONP scripts residing on different domains, although it's not a requirement.

Hope this makes sense.

For TRUE async script loading you should look into HTML5 sync attribute:

The call is asynchronous, yes. Maybe you are confusing the behaviour of a script tag when the page is loading and when the page is already loaded.

As the page is being loaded by the browser, all HTML tags with resources (image tags, link tags, etc...) have their resources downloaded assynchronously and don't interrupt the browser rendering task. This has the improvement of optimizing the performance of the page rendering.

The only tag which doesn't follow this rule is the script tag. Because the browser has to ensure the order of the scripts, it will not load them in parallel. Additionally, the browser has to count with dynamic alterations on the HTML document made from the script, using document.write, and for this reason it will evaluate the script as soon as it is downloaded. So, this is the default behaviour from the browsers concerning script tags with src file: they will block the rendering of the page, be downloaded in sequence and will be evaluated as soon as they have been loaded. There are techniques to avoid this, like placing the scripts at the bottom of your document (scripts will only be downloaded and evaluated after the document has been rendered) or using the new HTML5 script tag attributes "async" and "defer": http://blogs.microsoft.co.il/blogs/gilf/archive/2011/12/29/the-async-and-defer-script-attributes-in-html5.aspx .

Going back to JSONP: yes, it is asynchronous in the way that it is not blocking any further browser behaviour (page is already rendered). This is the asynchronicity regular AJAX calls provide.

JSONp includes don't really work like AJAX calls since they're a bit of a hack. If I were pressed to put them in either box I'd go with "asynchronous".

I guess the most important trait is that the 'return value' will show up in another event.

You can't write:

var return_value = do_jsonp("my function");

You have to write this instead: (or use some sort of promise library)

do_jsonp("my function", function (return_value) {});

So, when the script in the JSONp resource actually gets executed is not relevant. All that is relevant is that it happens in a different event.

This related question should shed some light on your question.

Script nodes added dynamically using javascript are executed asynchronously and they won't block execution of other scripts.

you are kind of misinterpreting the word "asynchronous". the javascript excecution is asynchronous, which means the every line of javascript-code which es after you inject your script-tag is executed.

example:

var yourCB = function(result) { ... }

// i use the script injection from neiker here (without the async = true, to illustrate that this has nothing to do with the asynchronous nature JSONP 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; 
ga.src = 'http://domain/api/...?callback=yourCB';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s);

// everything after the script insertion is excecuted, even if your jsonp-callback hasnt been called. as soon as your script-request has finished yourCB is called.
alert('THIS IS ALERTED EVEN IF yourCB HASNT BEEN CALLED');

var ga = document.createElement('script'); 
ga.type = 'text/javascript'; 
ga.async = true;
ga.src = 'http://domain/api/...?callback=something';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s);

Anyway, can't you use jQuery? If not, try this: https://github./ded/reqwest