ajax를 사용하여 스크립트 파일을 로드하는 사용 예에 ​​대한 자세한 설명

ajax를 사용하여 스크립트 파일 코드를 백그라운드에서 포그라운드로 로드한 후 로드된 콘텐츠에 대해 eval()을 통해 코드를 실행합니다. 두 번째는 스크립트 태그를 동적으로 생성하고 src 속성을 설정한 다음 스크립트 태그를 페이지 헤드에 삽입하여 js를 로드하는 것입니다. 이는 cf63513d015db02810a3e91eb1a177969429d6e1efad07153846e528605c447e에 있지만 이 스크립트 태그는 js를 사용하여 동적으로 생성됩니다.
예를 들어, callbakc.js를 동적으로 로드하려면 다음과 같은 스크립트 태그가 필요합니다.

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

다음 코드는 이를 생성하는 방법입니다. js를 통한 태그(그리고 헤드에 추가됨):

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

call.js가 로드되면 그 안의 메소드를 호출해야 합니다. 그러나 header.appendChild(script) 바로 뒤에는 js를 호출할 수 없습니다. 브라우저는 이 js를 비동기적으로 로드하기 때문에 언제 로드가 완료되었는지 알 수 없습니다. 그러나 이벤트를 수신하여 helper.js가 로드되었는지 확인할 수 있습니다. (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);

ie에서 onreadystatechange가 사용되고, gecko, webkit 브라우저, Opera 모두 onload를 지원하므로 2개의 이벤트 수신 기능을 설정합니다. 실제로 this.readyState == 'complete'는 잘 작동하지 않습니다. 이론적으로 상태 변경은 다음과 같습니다.

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

그러나 일부 상태는 건너뜁니다. 경험에 따르면 IE7에서는 로드됨과 완료됨 중 하나만 얻을 수 있지만 둘 다 얻을 수는 없습니다. 그 이유는 상태 변경이 캐시 읽기에 영향을 미치는지 여부에 영향을 주기 때문일 수도 있고 다른 이유일 수도 있습니다. 판단 조건을 this.readyState == 'loaded' || this.readyState == 'complete'로 변경하는 것이 가장 좋습니다.
jQuery 구현을 참고하면, 최종적으로 다음과 같이 구현했습니다.

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);

또 다른 간단한 상황은 다음과 같습니다. put help()는 helper.js의 마지막에 작성되므로 help()가 helper.js가 로드된 후 자동으로 호출될 수 있음을 보장할 수 있습니다. 물론 최종적으로도 확인할 수 있어야 합니다. 이는 귀하의 응용 분야에 적합합니다.

또한 다음 사항에 유의하세요.

1. 스크립트 태그의 src는 도메인 전체의 리소스에 액세스할 수 있으므로 이 방법을 사용하면 Ajax를 시뮬레이션하고 Ajax 도메인 간 액세스 문제를 해결할 수 있습니다.
2. ajax가 반환한 html 코드에 스크립트가 포함된 경우 innerHTML을 dom에 직접 삽입하면 html의 스크립트가 작동하지 않습니다. jQuery().html(html)의 원본 코드를 대략적으로 살펴본 후 jQuery는 먼저 들어오는 매개 변수를 구문 분석하고 스크립트 코드를 제거한 다음 동적으로 스크립트 태그를 생성합니다. dom에 스크립트가 포함되어 있으면 실행 가능합니다. 예:

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

위 내용은 ajax를 사용하여 스크립트 파일을 로드하는 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!