HTML 세 션 의 JavaScript 스 크 립 트 를 AJAX 로 되 돌려 줍 니 다.

이것 은 AJAX 개발 에서 흔히 볼 수 있 는 문제 입 니 다. 만약 당신 이 계속 자 바스 크 립 트 프레임 워 크 로 개발 하지 않 았 다 면, 당신 은 이미 이 문 제 를 발 견 했 을 것 이 라 고 믿 습 니 다.본 고 는 두 가지 해결 방법 을 분 석 했 는데 그 중 하 나 는 jQuery 구조의 실현 을 설명 하 는 것 이다.
문제 설명
다음은 간단 한 예 를 들 어 문제 의 소 재 를 보 여 준다.다음 예 에서 변수 responseText 는 AJAX 가 불 러 온 HTML 세 션 데이터 라 고 가정 합 니 다. 스 크 립 트 팝 업 메 시 지 를 포함 하고 innerHTML 방법 으로 ajax Data 라 는 DIV 에 삽입 하면 팝 업 메시지 상 자 를 보고 싶 을 수도 있 습 니 다. 그 결과 없 음 을 발 견 했 습 니 다. 문 제 는 이 렇 습 니 다.

 
  
 
  
 
  <br>var responseText = '<p>      </p><script>alert("  AJAX         ")'; 
  
document.getElementById('ajaxData').innerHTML = responseText; 
  
 
  
 
 

二、两种解决办法
1、 利用JavaScript的eval方法执行脚本。

本方法的具体实现思路是把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可。下面提供一个封装好的函数：

 
  
function executeScript(html) 
  
{ 
  
var reg = /]*>([^\x00]+)$/i; 
  <br>//   HTML   <\/script>   
  <br>var htmlBlock = html.split("<\/script>"); 
  <br>for (var i in htmlBlock) 
  <br>{ 
  <br>var blocks;//            ，blocks[1]           ，    reg                
  <br>if (blocks = htmlBlock[i].match(reg)) 
  <br>{ 
  <br>//           ，      -->      ，eval        
  <br>var code = blocks[1].replace(/<!--/, ''); 
  <br>try 
  <br>{ 
  <br>eval(code) //     
  <br>} 
  <br>catch (e) 
  <br>{ 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br> 
 </div> 
 <br>        ， HTML innerHTML     DOM，     executeScript       ： 
 <br> 
 <div class="codetitle"> 
  <span><u></u></span>     : 
 </div> 
 <div class="codebody" id="code59085"> 
  <br>document.getElementById("div1").innerHTML = xmlHttp.responseText; 
  <br>executeScript(xmlHttp.responseText); 
  <br> 
 </div> 
 <br>             ，  xmlHttp.responseText            ： 
 <br><script type="text/javascript" src="/js/common.js">，executeScript                  。 
 
 
 
2、      jQuery      
 
 
 
jQuery  AJAX  HTML，      html(value)      xmlHttp.responseText     DOM，    DOM              ，           head 。        ，         ，           。    ： 
 
 
   
 
 
  
$.get('ajax.aspx', function(data) 
  
{ 
  
$('#div1').html(data); 
  
}); 
  
 
 
 
 
      ajax.aspx      HTML  ，            ，        。div1 AJAX        DIV   ID，            ajax.aspx  HTML     ID div1 DIV   。 
 
 
 
          typeof(data)    data        ，    xmlHttp.responseText，          ， AJAX             jQuery AJAX     ，   html(value)  ，          HTML     DOM ，              。 html(value)         append(value)  ……，             ，               ： 
 
 
 
html -> append -> domManip -> clean -> evalScript -> globalEval 
 
 
 
  clean      ，      jQuery       ，       HTML  （      ，         ）    。              。       (jQuery1.3.2)： 
 
 
   
 
 
  
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; 
  
} 
  
 
 
 
 
  ， evalScript            ，   “ ”           ，  executeScript         ： 
 
 
   
 
 
  
if (elem.src) 
  
jQuery.ajax( 
  
{ 
  
url: elem.src, 
  
async: false, 
  
dataType: "script" 
  
}); 
  
 
 
 
 
         ，      xmlHttp.responseText      ，        ，jQuery           head ，           HTML        ： 
 
 
   
 
 
  
if (elem.parentNode) 
  
 
 
 
 
  ， globalEval   ，  head.removeChild( script );  ，       head          ，           html(value)   head         。             ，                  。  ，      html(data)       ，        head       ，             。