이 기사의 예에는 js를 동적으로 로드하는 방법이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다. 방법 1: 직접 document.write(비동기) 코드 복사 코드는 다음과 같습니다. Document.write("<script src='res/extwidget/echarts/xx.js'>"); 이 방법은 비동기 로딩이므로 document.write가 인터페이스를 다시 작성하므로 이는 분명히 실용적이지 않습니다 방법 2: 기존 스크립트의 src 속성을 동적으로 변경(비동기) 코드 복사 코드는 다음과 같습니다.< ;/스크립트> ; <스크립트 언어="javascript"> xx.src="test.js" <div class="codebody" id="code74217"> <br><br> <br>이 방법은 인터페이스 요소를 변경하거나 인터페이스 요소를 다시 작성하지 않지만 비동기식으로 로드됩니다</div> 방법 3: 스크립트 요소를 동적으로 생성(비동기) <p><br><br></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="52191" class="copybut" id="copybut52191" onclick="doCopy('code52191')"><u> 코드는 다음과 같습니다.</u></a><script></span> var body= document.getElementsByTagName('BODY').[0] </div> var script= document.createElement("script") <div class="codebody" id="code52191"> Script.type = "텍스트/자바스크립트" <br> Script.src="xx.js" <br> body.appendChild(oScript) <br> <br><br> <br>두 번째 방법에 비해 이 방법의 장점은 처음에 인터페이스에 스크립트 태그를 작성할 필요가 없다는 점입니다. 단점은 비동기 로딩입니다</div> 방법 4: XMLHttpRequest/ActiveXObject 로드(비동기)<p> </p> <p><br></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="91712" class="copybut" id="copybut91712" onclick="doCopy('code91712')"><u> 코드는 다음과 같습니다.</u><div class="codebody" id="code91712">/**<br> * js 스크립트를 비동기식으로 로드 <br> * @param id 설정해야 하는 <script> 태그의 ID <br> * @param url js 파일의 상대 경로 또는 절대 경로 <br>*/ <br> loadJs:function(id,url){ <br> <br> var xmlHttp = null <br> if(window.ActiveXObject){//IE <br> {<br>을 시도해 보세요. //IE6 이상 버전에서 사용 가능 <br> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") <br> } 잡기 (e) { <br> //IE5.5 이상 버전 사용 가능<br> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") <br> } <br> }else if(window.XMLHttpRequest){ <br> //파이어폭스, 오페라 8.0, 사파리, 크롬 <br> xmlHttp = 새로운 XMLHttpRequest() <br> } <br> //동기 로딩 채택 <br> xmlHttp.open("GET",url,false) <br> //동기 요청 보내기, <br> //브라우저가 Chrome이나 Opera인 경우 실행하기 전에 릴리스해야 합니다. 그렇지 않으면 오류가 보고됩니다 <br> xmlHttp.send(널) <br> xmlHttp.onreadystatechange = function(){ <br> //4는 데이터가 전송되었음을 의미합니다. <br> if(xmlHttp.readyState == 4){ <br> //0은 접속 중인 로컬 영역, 200~300은 서버 접속 성공을 나타냅니다. <br> //304는 수정 없이 캐시에 액세스했음을 의미합니다. <br> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br> var myBody = document.getElementsByTagName("BODY")[0] <br> var myScript = document.createElement( "script" ); myScript.언어 = "자바스크립트" <br> myScript.type = "텍스트/자바스크립트" <br> myScript.id = 아이디 <br> 시도해 보세요{ <br> //IE8 이하는 이 방식을 지원하지 않으므로 text 속성으로 설정해야 합니다. <br> myScript.appendChild(document.createTextNode(xmlHttp.responseText)) <br> }잡다(예){ <br> myScript.text = xmlHttp.responseText <br> } <br> myBody.appendChild(myScript) <br> } <br> } <br> } <br> //비동기 로딩 사용 <br> xmlHttp.open("GET",url,true) <br> xmlHttp.send(널) <br> }<br> </div> open에서 false로 설정하면 동기 로딩에 onreadystatechange 이벤트 설정이 필요하지 않습니다.<p> </p>이 네 가지 방법은 모두 비동기식으로 실행됩니다. 즉, 이러한 스크립트를 로드하는 동안 기본 페이지의 스크립트가 계속 실행됩니다. <p> </p>방법 5: XMLHttpRequest/ActiveXObject 로딩(동기화)<p> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="73149" class="copybut" id="copybut73149" onclick="doCopy('code73149')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span><div class="codebody" id="code73149">/**<br> * js 스크립트를 동기적으로 로드 <br> * @param id 설정해야 하는 <script> 태그의 ID <br> * @param url js 파일의 상대 경로 또는 절대 경로 <br> * @return {Boolean} 로딩 성공 여부를 반환합니다. true는 성공, false는 실패를 나타냅니다. <br>*/ <br> loadJs:function(id,url){ <br> <br> var xmlHttp = null <br> if(window.ActiveXObject){//IE <br> {<br>을 시도해 보세요. //IE6 이상 버전에서 사용 가능 <br> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") <br> } 잡기 (e) { <br> //IE5.5 이상 버전 사용 가능<br> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") <br> } <br> }else if(window.XMLHttpRequest){ <br> //파이어폭스, 오페라 8.0, 사파리, 크롬 <br> xmlHttp = 새로운 XMLHttpRequest() <br> } <br> //동기 로딩 사용 <br> xmlHttp.open("GET",url,false) <br> //동기 요청을 보냅니다. 브라우저가 Chrome 또는 Opera인 경우 실행하기 전에 게시해야 합니다. 그렇지 않으면 오류가 보고됩니다. <br> xmlHttp.send(널) <br> //4는 데이터가 전송되었음을 의미합니다. <br> if(xmlHttp.readyState == 4){ <br> //0은 로컬 액세스, 200~300은 서버 액세스 성공, 304는 수정 없이 캐시 액세스 <br> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br> var myBody = document.getElementsByTagName("BODY")[0] <br> var myScript = document.createElement( "script" ); myScript.언어 = "자바스크립트" <br> myScript.type = "텍스트/자바스크립트" <br> myScript.id = 아이디 <br> 시도해 보세요{ <br> //IE8 이하는 이 방식을 지원하지 않으므로 text 속성으로 설정해야 합니다. <br> myScript.appendChild(document.createTextNode(xmlHttp.responseText)) <br> }잡다(예){ <br> myScript.text = xmlHttp.responseText <br> } <br> myBody.appendChild(myScript) <br> true를 반환합니다. <br> }그밖에{ <br> 거짓 반환 <br> } <br> }그밖에{ <br> 거짓 반환 <br> } <br> }<br> </div> 이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다. <p></p> </div></a></span> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
