Ajax를 사용하는 4단계

이번에는 Ajax 사용 4가지 단계를 알려드리겠습니다. Ajax 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

ajax란 무엇입니까?

ajax(asynchronousjavascript xml)는 전체 웹 페이지를 다시 로드하는 대신 부분적인 웹 페이지 데이터를 새로 고칠 수 있습니다.

ajax를 사용하는 방법?

첫 번째 단계, xmlhttprequest 객체를 만듭니다. var xmlhttp = new XMLHttpRequest(); XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

1단계 , xmlhttprequest 객체의 open() 및 send() 메서드를 사용하여 서버에 리소스 요청을 보냅니다.

xmlhttp.open(method, url, async) 메소드에는 get 및 post가 포함되며 url은 주로 파일 또는 리소스의 경로이며 async 매개변수는 true(비동기 표시) 또는 false(동기 표시)입니다.

xhttp.send (); use get 메소드는 서버에 요청을 보냅니다.

xhttp.send(string); 서버에 요청을 보내려면 post 메소드를 사용하세요.

게시물 요청은 언제 가능한가요?

(1) 파일이나 데이터베이스를 업데이트하는 경우.

(2) 포스트 요청에는 글자 수 제한이 없으므로 대량의 데이터를 서버에 보냅니다.

(3) 사용자가 입력한 암호화된 데이터를 보냅니다.

get 예:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();

post 예

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Post 양식 데이터를 사용하려면 xmlhttprequest 개체의 setRequestHeader 메서드를 사용하여 HTTP 헤더를 추가해야 합니다.

포스트 양식 예

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

async=true onreadystatechange 함수는 서버가 응답할 준비가 되면 실행됩니다.

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();

asyn=false, onreadystatechange 함수를 작성할 필요가 없으며 전송 후 바로 실행 코드를 작성하면 됩니다.

xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

단계 , xmlhttprequest 객체의 responseText 또는 responseXML 속성을 사용하여 서버의 응답을 얻습니다.

responseText 속성을 사용하여 서버 응답의 string 데이터를 가져오고, responseXML 속성을 사용하여 서버 응답의 XML 데이터를 가져옵니다.

예제는 다음과 같습니다.

document.getElementById("demo").innerHTML = xhttp.responseText;

서버에서 응답한 XML 데이터를 XML 개체를 사용하여 변환해야 합니다.

예:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;

4단계, onreadystatechange 함수. 서버에 요청을 보낼 때 서버가 응답하고 일부 기능을 수행하도록 하려면 xmlhttprequest의 ReadyState가 발생할 때마다 onreadystatechange 함수를 사용해야 합니다. 객체가 변경되면 onreadystatechange 기능이 트리거됩니다.

onreadystatechange 속성은 ReadyState가 변경될 때 자동으로 호출되는 함수를 저장합니다.

readyState 속성, XMLHttpRequest 객체의 상태는 0에서 4로 변경됩니다. 0은 요청이 초기화되지 않았음을 의미하고, 1은 서버 연결이 성공했음을 의미하고, 2는 서버에서 요청을 수신했으며, 3은 요청이 처리되었음을 의미합니다. 4 요청이 완료되고 응답이 준비되었습니다.
상태 속성, 200은 성공적인 응답을 의미하고, 404는 페이지가 존재하지 않음을 의미합니다.

onreadystatechange 이벤트에서 ReadyState==4 및 status==200이면 서버 응답이 준비된 것입니다.

예:

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 
//函数作为参数调用



Let AJAX change this text.
Change Content

<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById(&quot;demo&quot;).innerHTML = xhttp.responseText;
}
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Ajax+Struts2는 어떻게 사용자 입력 확인 코드 확인 기능을 구현하나요?

Ajax는 클릭 시 연결이 끊어지지 않고 데이터 로딩 목록을 어떻게 구현하나요?

위 내용은 Ajax를 사용하는 4단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!