Detailed explanation of usage examples of loading script files using ajax

Use the ajax method to load the script file code from the background to the foreground, and then execute the code through eval() on the loaded content. The second is to dynamically create a script tag, set its src attribute, and load js by inserting the script tag into the head of the page, which is equivalent to writing a cf63513d015db02810a3e91eb1a17796f17187729fd6950c0000c870f2310c96, but this script tag is dynamically created using js
For example, if we want to dynamically load a callbakc.js, we need such a script tag:

<script type="text/javascript" src="call.js"></script>

The following code is how Create this tag through js (and add it to the head):

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script);

When call.js is loaded, we have to call the method in it. However, we cannot call the js immediately after header.appendChild(script). Because the browser loads this js asynchronously, we don't know when it has finished loading. However, we can determine whether helper.js is loaded by listening to events. (Assume there is a callback method in call.js)

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

Set up 2 event listening functions, because onreadystatechange is used in ie, and gecko, webkit browsers and opera all support onload. In fact, this.readyState == 'complete' does not work very well. In theory, the state changes are as follows:

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

But some states will be skipped. According to experience, in IE7, only one of loaded and completed can be obtained, but not both. The reason may be that the state change affects whether reading from the cache is affected, or it may be other reasons. It is best to change the judgment condition to this.readyState == 'loaded' || this.readyState == 'complete'
Refer to the implementation of jQuery, our final implementation is:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

There is another The simple situation is that you can write the help() call at the end of helper.js, then you can ensure that help() can be automatically called after helper.js is loaded. Of course, you must also be able to see if this is suitable for your application.

Also need to note:

1. Because the src of the script tag can access resources across domains, this method can simulate ajax and solve the problem of ajax cross-domain access.
2. If the html code returned by ajax contains script, directly inserting innerHTML into the dom will not make the script in the html work. After a cursory look at the original code of jQuery().html(html), jQuery also parses the incoming parameters first, strips off the script code, and dynamically creates script tags. The jQuery html method is used to add the html into the dom if it contains script. is executable. Such as:

jQuery("#content").html("<script>alert(&#39;aa&#39;);<\/script>");

The above is the detailed content of Detailed explanation of usage examples of loading script files using ajax. For more information, please follow other related articles on the PHP Chinese website!