1. ajax는 비동기식 JavaScript 및 XML입니다. 빠른 동적 웹 페이지를 만드는 데 사용되는 기술입니다. 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지를 비동기적으로 업데이트할 수 있어 웹 페이지를 다시 로드하지 않고도 부분 로딩을 수행할 수 있습니다.
둘. 객체 생성. XMLHttpRequest는 ajax의 기초입니다.
1. 생성 구문: new XMLHttpRequest();
2. 이전 버전 생성: new ActiveXObject("Microsoft.XMLHTTP").
셋. 서버 요청.
open(method,url,async).
메서드: 요청 유형을 나타냅니다: GET 또는 POST
url: 서버의 파일 위치.
async: true(비동기 요청) 또는 false(동기 요청).
send(string).
서버에 요청을 보냅니다.
문자열: POST 요청에만 사용됩니다. 전송되는 매개변수를
4개 나타냅니다. 서버의 응답입니다.
responseText(): 문자열 형식으로 응답 데이터를 가져옵니다. XML이 아닌 요청의 경우 responseText 속성을 사용하십시오.
responseXML(): 해당 데이터를 XML 형식으로 가져옵니다.
다섯. onreadystatechange 이벤트.
은 응답 기반 작업을 수행하는 데 사용됩니다.
onreadystatechange: 저장 함수, 이 함수는 ReadyState 속성이 변경될 때마다 호출됩니다.
readyState: XMLHttpRequest의 상태를 나타냅니다. 0에서 4로 변경됩니다.
0: 요청이 초기화되지 않았습니다
1: 서버 연결이 설정되었습니다
2: 요청이 수신되었습니다
~ > 4: 요청이 완료되고 응답이 준비되었습니다.
상태: 200: '확인' 404: 페이지를 찾을 수 없습니다.
예:
<html><!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","文件的地址",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
해당 콘텐츠를 얻으려면 파일의 주소를 추가해야 합니다.