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 , 。

좋은 웹페이지 즐겨찾기