How to ensure that the execution order of JavaScript jquery.html is not the omnipotent key

Last Update:2018-12-08 Source: Internet

Author: User

Tags script tag subdomain name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Introduction
In the previous article "how to ensure the execution sequence of JavaScript-jquery.htmldeep analysis", we revealed that the jquery.html function can be executed dynamically in JavaScript in various browsers. The secret is that AJAX can be synchronized to obtain external JavaScript.
Let's simply download the htmlsource code (test2.htm ): Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "js/jquery-1.4.4.js" type = "text/javascript"> </script>
<Script>
$ (Function (){
Certificate ('{container'{.html ('<script src = "./service. ashx? File = js/jquery-ui.js & delay = 2000 "type =" text \/javascript "> <\/script> '+' <script> alert (typeof (jQuery. ui); <\/script> ');
});
</Script>
</Head>
<Body>
<Div id = "container">
</Div>
</Body>
</Html>

By the way, external JavaScript loaded in this way cannot be debugged in Firebug, because the external JavaScript parsing after AJAX ends is the same as the inline JavaScript parsing (both call jQuery. globalEval ):

Next, let's go to the topic of this article: Can jquery.html ensure the sequential execution of JS in each browser if the JS of the website is in its own domain?
2. Establish Test Cases
1) Prepare two domain names
To test, I created two subdomains temporarily under my home page (http://sanshi.me/), respectively:
Http://test.sanshi.me/
Http://test1.sanshi.me/
2) Update the demo (test2_1.htm)
I will place test2_1.htm under the first subdomain name. The access address is http://test.sanshi.me/jsorder/test2_1.htm. the source code is as follows:Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "js/jquery-1.4.4.js" type = "text/javascript"> </script>
<Script>
$ (Function (){
Certificate ('{ininer'{.html ('<script src = "http://test1.sanshi.me/jsorder/service.ashx? File = js/jquery-ui.js & delay = 2000 "type =" text \/javascript "> <\/script> '+' <script> alert (typeof (jQuery. ui); <\/script> ');
});
</Script>
</Head>
<Body>
<Div id = "container">
</Div>
</Body>
</Html>

As you can see, the jQueryUI script points to the second domain name (test1.sanshi. me ).
3) test in different browsers

	Test2_1.htm Use the jquery.html function to dynamically load JavaScript in other domains
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

3. jQuery.html is not a omnipotent key, Then
The secret is not the omnipotent key. This makes us wonder if the internal logic of these two examples is the same?
But the second article is not clear. Do we use the synchronous AJAX mechanism to load external JS? And so on ......
Have you found any problems from the above analysis that AJAX is used to load resources in other domains? Isn't this a clear violation of the well-known single-Origin Policy? Therefore, jQuery cannot be implemented in this way. Let's take a look at the jQuery. ajax document:

It seems that the function (evalScript) we saw in the second article does not actually get data by synchronizing AJAX:

4. go deep into the jQuery. ajax function to see how to load JS files in different domains

The comment has been clearly written. If you request a JavaScript file in the GET method and the file is in a remote location in another domain ), add the script tag to the head instead of the AJAX process. Therefore, at the end of this condition branch, return directly from the function body:

Token is the same logic, which also verifies our idea:

It can be seen that if you want to be compatible with CDN to accelerate static resources, you must also use the"Solution 1: How to dynamically addScriptLabel execution order".

5. Postscript

This is the end of the series. However, after I tested jQuery1.5.1, I found that jQuery1.4.4 is different from the jQuery1.4.4 I used. I have long heard that jQuery1.5.1 has reconstructed the AJAX part. I did not expect it to have a slight impact on our code.

For details about the impact, see the next article: how to ensure the execution sequence of JavaScript-the slight differences between jQuery1.5.1 and jQuery1.4.4. To be continued...

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More