Using AJAX to return JavaScript scripts in HTML fragments

This is a very common problem in AJAX development. If you have not been using JavaScript frameworks for development, I believe you have discovered this problem long ago. This article analyzes two solutions, one of which explains the implementation of the jQuery framework.

1. Problem description The following is a simple example to demonstrate the problem. In the following example, assume that the variable responseText is the HTML fragment data loaded by AJAX, which contains a script to pop up a message. Use the innerHTML method to insert it into the DIV with the ID ajaxData. You may expect to see the message box pop up, but you find that it does not. That's the problem.

Copy code The code is as follows: var responseText = ' This is a paragraph

alert("This is loaded back by AJAX Script fragment") '; document.getElementById('ajaxData').innerHTML = responseText; 2. Two solutions Method 1. Use JavaScript’s eval method to execute the script.

The specific implementation idea of this method is to extract all the scripts in xmlHttp.responseText. No matter how many script blocks the HTML loaded by AJAX contains, we can call the eval method to execute the found script blocks. . An encapsulated function is provided below: Copy code The code is as follows: function executeScript(html ) { var reg = / ]*>([^x00] )$/i; //Split the entire HTML fragment by Split var htmlBlock = html.split(" "); for (var i in htmlBlock) { var blocks; // Content array matching regular expression, blocks[1] is a real script content, because we used brackets to capture the previous reg definition if (blocks = htmlBlock[i].match(reg)) { //Clear Possible comment tags can be ignored at the end of the comment -->, and eval will still work normally var code = blocks[1].replace(/ try { eval(code) //Execute script } catch (e) { } } } } The use of this method is as follows. Use the innerHTML method to add HTML to the DOM, and then call the executeScript method to execute the script block: Copy code The code is as follows: document.getElementById("div1").innerHTML = xmlHttp.responseText; executeScript(xmlHttp.responseText); Obviously this method is still flawed, if xmlHttp.responseText contains external script calls like this: , the executeScript method cannot further execute this externally loaded script.

2. Learn and use the implementation of the jQuery framework

jQuery loads HTML with AJAX and ultimately converts the entire xmlHttp.responseText data into DOM when executing the html(value) method, and then uses the DOM Related operation methods to find out the scripts inside, and finally insert these scripts into the head. It’s hard to explain the specific principle. Let’s give the simplest example first, and then analyze the general idea. Let’s look at the example first: Copy the code The code is as follows: $.get('ajax.aspx ', function(data) { $('#div1').html(data); }); Now assume that the above ajax.aspx page returns an HTML fragment and contains one or more script blocks or even external script references. div1 is the ID of a DIV tag on the AJAX request initiating page. The result of the entire code is to load the HTML in ajax.aspx and fill it into a DIV tag with the ID div1.

In the anonymous callback function, you can find that data is still an original string through typeof(data), which is equivalent to xmlHttp.responseText. Through code execution tracking, it is found that the execution processing of the AJAX loading script fragment is not in jQuery's AJAX In the module code, it is the html(value) method, that is, when inserting an HTML string containing a script block into the DOM, it is responsible for extracting the script for call processing. The html(value) method actually calls the append(value) method... The whole process probably calls the following methods. The arrows represent the order in which these methods are called:

html -> append -> domManip -> clean -> evalScript -> globalEval

The clean method is particularly critical. This method is also an important method of jQuery, which also involves methods of repairing HTML errors (tags not ending, table structure adjustment, etc. ) processing script. The script is also extracted here. Take a look at the relevant source code (jQuery1.3.2): Copy the code The code is as follows: if (fragment) { for (var i = 0; ret[i]; i ) { if (jQuery.nodeName(ret[i], "script") && (!ret [i].type || ret[i].type.toLowerCase() === "text/javascript")) { scripts.push(ret[i].parentNode ? ret[i]. parentNode.removeChild(ret[i]) : ret[i]); } else { if (ret[i].nodeType === 1) ret.splice .apply(ret, [i 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script")))); fragment.appendChild(ret[i]); } } return scripts; } In addition, we also found the following code in the evalScript method. Here is the "synchronous" loading like An external script like this solves a flaw in the executeScript method: Copy code The code is as follows: if (elem.src) jQuery.ajax( { url: elem.src, async: false, dataType: "script" }); The following code was also found. This code deletes the script in xmlHttp.responseText, because in this method , jQuery is going to put the extracted script into the head area, so deleting it can avoid duplicate script blocks in the final HTML: Copy code The code is as follows: if (elem.parentNode) Finally, in the globalEval method, the head.removeChild(script); method is found, which is to put the script Immediately after inserting the head, remove the script tag. This also avoids generating duplicate script blocks in the head area due to repeated execution of the html(value) method. This removal will not affect script execution, nor will it clear the relevant variable values in the script block. Obviously, if you want to see the final execution result of html (data), such as what script block is inserted into the head after extraction, you can temporarily comment this line of code first.