Does JSONP make an asynchronous call?
I am new to jsonp and understand that JSONP is a method that creates a dynamic <script src="...">
that wraps the returned JavaScript (or JSON object) with a callback function.
But if I am not mistaken, the src
attribute in the script tag will hold back all further executions until the script is loaded, so how can this be an asynchronous call?
This related question should shed light on your question.
Script nodes added dynamically using javascript are executed asynchronously, and they will not block the execution of other scripts.
Actually, since you can read here and here the dynamically created <script src="..">
element after the download is complete, the DOM will NOT block and thereby be asynchronous .. at least in the order in which they are created.
qutoted from http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
When the script is dynamically entered, immediate loading without blocking begins. The script is executed as soon as it is fully loaded. In most browsers, the execution order is not guaranteed, although 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 a dynamic script tag, and dynamic script tag is a manual method used by JSONP.
JSONP is a method that allows a site to download content from different domains than ORIGIN, using browser validity for script tags with src pointing to external domains. (You should know this by following the links provided in other answers).
Dynamic script tags, on the other hand, provide an asynchronous nature for any script, be it JSONP or otherwise.
Point - whenever the browser falls into the script tag in the document, it stops most other actions (especially the DOM rendering) until the script loads. This affects user experience regarding how sensitive the site is. The effect of this is even worse if the script does not directly affect the main content of the site (for example, Google Ads, Tweets or Facebook Timeline (if you are not Mark Z .: P), etc.)
To avoid this problem, you can add dynamic script tags to the page as soon as it fully loads in the browser (i.e. a finished / loaded event). Then the browser will quietly load the new script, but the user has a full page (almost) created for him, giving the impression of a quick download. In this sense, dynamic scripts can be asynchronous to load pages.
However, in practice, most of the scripts used in this way are JSONP scripts located in different domains, although this is not a requirement.
Hope this makes sense.
To load the TRUE async script, you must examine the HTML5 sync attribute :
The call is asynchronous, yes. You may be confusing the behavior of the script tag when the page loads and when the page is already loaded.
When a page is loaded by the browser, all HTML tags with resources (image tags, link tags, etc.) load their resources asynchronously and do not interrupt the browser rendering task. This improves page rendering performance optimization.
The only tag that does not comply with this rule is the script tag. Since the browser must ensure the order of the scripts, it will not load them in parallel. In addition, the browser must account for dynamic changes to the HTML document made from the script using document.write, and for this reason it will evaluate the script as soon as it is loaded. Thus, this is the default behavior from browsers regarding script tags with the src file: they will block the page rendering, load sequentially and will be evaluated immediately after they are loaded. There are ways to avoid this, for example, placing scripts at the bottom of the document (scripts will be downloaded and evaluated only after the document has been displayed) or using the new HTML5 tag attributes script "async" and "defer": http://blogs.microsoft.co .il / blogs / gilf / archive / 2011/12/29 / the-async-and-defer-script-attributes-in-html5.aspx .
Returning to JSONP: yes, this is asynchronous, since it does not block further browser behavior (the page is already displayed). This is the asynchrony of regular AJAX calls.
JSONp includes, really, it does not work like AJAX calls, as they are a bit hacked. If I were pressed to put them in any drawer, I would go with "asynchronous".
I think the most important feature is that the "return value" will appear in another event.
You cannot write:
var return_value = do_jsonp("my function");
You need to write this instead: (or use some kind of promise library)
do_jsonp("my function", function (return_value) {});
So, when the script in the JSONp resource is actually executed, it does not matter. All that matters is that it happens in another event.
you misinterpret the word asynchronous. the javascript excess is asynchronous, which means that every line of javascript code that appears after you enter 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, you can not use jQuery? If not, try the following: https://github.com/ded/reqwest