Ajax 데이터 요청의 4단계에 대한 심층적인 이해

프론트엔드 작업에서는 Ajax를 자주 사용합니다. 실제로 많은 사람들이 Ajax가 비동기식 요청이라는 것만 알고 어떻게 사용하는지 모릅니다. 다음으로 Ajax를 사용하는 주요 4단계를 설명하겠습니다. 도움이 필요한 친구는 그것을 참조할 수 있습니다.

ajax란 무엇인가요?

ajax(비동기 javascript 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( ); 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 양식 데이터는 HTTP 헤더를 추가하기 위해 xmlhttprequest 개체의 setRequestHeader 메서드를 사용해야 합니다.

포스트 양식 예

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 속성을 사용하고, 서버 응답의 XML 데이터를 얻으려면 responseXML 속성을 사용하세요.
예제는 다음과 같습니다.

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 함수. 서버에 요청을 보낼 때 서버가 응답하고 일부 기능을 수행하도록 하려면 onreadystatechange 함수를 사용해야 합니다. xmlhttprequest 객체의 ReadyState가 변경됩니다.

onreadystatechange 속성은 ReadyState가 변경될 때 자동으로 호출되는 함수를 저장합니다.
readyState 속성, XMLHttpRequest 객체의 상태는 0에서 4로 변경됩니다. 0은 요청이 초기화되지 않았음을 의미하고, 1은 서버 연결이 성공했음을 의미하고, 2는 서버에서 요청을 수신했으며, 3은 요청이 처리되었음을 의미합니다. 요청이 완료되고 응답이 준비되었습니다.
상태 속성, 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>

위는 Ajax를 사용하는 4단계입니다.

위 내용은 Ajax 데이터 요청의 4단계에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!