나는 지난 몇 년 동안 JQuery에 대해 많은 글을 썼지만 오랫동안 전통적인 JavaScript를 작성하지 않았고 많은 것을 잊어버렸습니다. JavaScript에서 Ajax 작업을 구현하려면 사실 jquery의 ajax의 본질도 이것입니다. 좋아요, 오늘은 전통적인 자바스크립트를 사용하여 텍스트 콘텐츠를 얻고 이를 페이지에 표시하는 방법을 설명하겠습니다. . 댓글이 매우 자세해서 누구나 이해할 수 있을 것입니다. 코드 복사 코드는 다음과 같습니다. <br>//(A)① 텍스트 파일을 얻는 방법(AJAX 작성의 전통적인 자바스크립트 구현) <br>함수 LoadXMLDoc1() <br>{ <br>var xmlhttp; <br>if(window.XMLHttpRequest) <br>{ <br>// IE7, Firefox, Chrome, Opera, Safari용 코드 <br>xmlhttp=new XMLHttpRequest() <br>} 🎜>else <br>{ <br>// IE6, IE5용 코드 <br>xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") <br>} <br>//onreadystatechange는 함수(또는 함수 이름)를 저장합니다. ,readyState 속성이 변경될 때마다 호출됩니다. <br>xmlhttp.onreadystatechange=function() <br>{ <br>//readyState <br>//XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다. <br>//0: 요청이 초기화되지 않았습니다<br>//1: 서버 연결이 설정되었습니다<br>//2: 요청이 수신되었습니다<br>//3: 요청이 처리 중입니다<br>//4: 요청이 완료되었고 응답이 준비되었습니다<br>//status <br>//200: "OK" <br>//404: 페이지를 찾을 수 없음<br>if (xmlhttp.readyState= =4 && xmlhttp.status==200 ) <br>{ <br>document.getElementById("myDiv1").innerHTML=xmlhttp.responseText; <br>} <br>} <br>xmlhttp.open("GET" ,"doc/test1.txt", true); <br>xmlhttp.send(); <br>} <br><br> </div>html 페이지 코드: <br><br><div class="codetitle"><span> <a style="CURSOR: pointer" data="28324" class="copybut" id="copybut28324" onclick="doCopy('code28324')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code28324"><body><br><form id="form1" runat="server"> ; <BR><%-- 서버 텍스트 파일 가져오기 및 표시--%> <br><div id="myDiv1"><h2>ajax를 통해 콘텐츠 변경</h2></div> ; <BR><button id=" btnChange1" type="button" onclick="LoadXMLDoc1()">AJAX를 통해 콘텐츠 변경(test1.txt 위의 텍스트 가져오기)</button> form> <br></body> <br><br> <br>데모 효과: </div> <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
