1. Introduction
In the previous article "How to ensure the sequence of JavaScript execution-jquery.html depth Analysis", we have revealed that the jquery.html function is able to maintain dynamic JS sequence execution in a variety of browsers, the secret is- Synchronize Ajax to get external JavaScript.
Let's start with a brief review of the HTML source code (test2.htm):
Copy Code code as follows:
<title></title>
<script src= "Js/jquery-1.4.4.js" type= "Text/javascript" ></script>
<script>
$ (function () {
$ (' #container '). html (' <script src= "./service.ashx?file=js/jquery-ui.js&delay=2000" Type= "Text\/javascript "><\/script> ' + ' <script>alert (typeof (Jquery.ui));<\/script>");
});
</script>
<body>
<div id= "Container" >
</div>
</body>
Incidentally, external JavaScript loaded in this way cannot be debugged in Firebug, Since the end of Ajax, external JavaScript parsing and inline JavaScript parsing are the same (both call Jquery.globaleval):
The following into the subject of this article: if the loaded JS is in the other domain below, jquery.html can also be in each browser can guarantee the order of JS implementation?
2. Set up Test Cases
1) Prepare two domain names
To test, I created two subdomains temporarily below the Personal homepage (http://sanshi.me/), respectively:
http://test.sanshi.me/
http://test1.sanshi.me/
2) Update Demo page (test2_1.htm)
I'll put the test2_1.htm under the first subdomain, the access address is http://test.sanshi.me/jsorder/test2_1.htm, and the source code is as follows:
Copy Code code as follows:
<title></title>
<script src= "Js/jquery-1.4.4.js" type= "Text/javascript" ></script>
<script>
$ (function () {
$ (' #container '). 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>
<body>
<div id= "Container" >
</div>
</body>
As you can see, the jQueryUI script points to the second domain name (test1.sanshi.me).
3 test in different browsers
|
Test2_1.htm dynamically load JavaScript under other domains using the jquery.html function |
Firefox 3.6 |
|
IE 8 |
|
Chrome 10 |
|
Safari 4 |
|
Opera 11 |
|
3. Jquery.html is not a key to the AlmightySo
I don't know if you remember the test3.htm we mentioned in the first article, the result is exactly the same as the result of that example, and jquery.html is not a master key. This makes us wonder if the internal logic of the two examples is the same?
But the second article is not to tell us plainly, jquery.html is using the synchronous AJAX mechanism to load external JS? Wait a minute......
Did you find any problems from the above analysis, Ajax to load the resources of other domains, this is not obvious violation of the well-known homologous strategy (Same Origin Policy) it? So jquery can't do that, so let's look at what the Jquery.ajax document says:
It seems that the function that we saw in the second article (Evalscript) does not really capture data by synchronizing Ajax:
4. Drill down Jquery.ajax function to see how to load JS files in different domains
The note is clearly written, and if you request a JavaScript file by getting, and the file is under a different domain (remote), then it is handled by adding a script tag to the head. Rather than taking the Ajax process. So at the end of this conditional branch, you return directly from the function body:
After analysis, we found that in the dynamic loading of different domains of JavaScript , jquery.html actually used in the head to add a script tag (whether it is external JS or inline JS), This is exactly the same logic as the test3.htm we mentioned in the first article , and it validates our thinking:
Thus, if you want to be compatible with the CDN acceleration of static resources, you must also use the "scenario one" mentioned in the first article , how to ensure the order of execution when adding script tags dynamically .
5. PostScript
Originally this series of articles to this should be over. However, after I test jQuery1.5.1 , incredibly found and I use the jQuery1.4.4 is different, long heard that jQuery1.5.1 to the Ajax part of the refactoring , I didn't expect to have a real impact on our code.
Specifically, see the next article: How to ensure that JavaScript executes in the order - jQuery1.5.1 and jQuery1.4.4 Subtle differences. Cond...
