[Html 코드]
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="result"></div>
<script>
function loadData() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 서버 응답 처리를 위한 이벤트 핸들러 등록
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 요청 완료
if (xhr.status === 200) { // HTTP 상태 코드가 200인 경우 (성공)
var response = xhr.responseText; // 서버에서 받은 응답 데이터
// 응답 데이터를 웹 페이지에 삽입
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = response;
} else {
console.log("Error: " + xhr.status); // 에러 메시지를 콘솔에 출력
}
}
};
// GET 방식으로 서버 요청 보내기
xhr.open("GET", "example.php", true);
xhr.send();
}
</script>
</body>
</html>
위의 예제에서는 "Load Data"라는 버튼을 클릭하면 loadData() 함수가 호출됩니다. 이 함수에서는 XMLHttpRequest 객체를 생성하여 Ajax 요청을 보냅니다.
xhr.onreadystatechange 이벤트 핸들러를 등록하여 서버 응답을 처리합니다. readyState 속성이 4인 경우 요청이 완료되었음을 의미하며, 이때 status 속성을 통해 HTTP 상태 코드를 확인할 수 있습니다.
성공적인 응답을 받은 경우 responseText 속성을 통해 서버에서 받은 응답 데이터를 가져올 수 있습니다. 이 데이터를 웹 페이지에 삽입하여 화면에 표시합니다.
요청이 실패한 경우 status 속성을 통해 에러 상태 코드를 확인하고, 콘솔에 에러 메시지를 출력합니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| React, Node.js 간단 설명 (0) | 2023.05.31 |
|---|---|
| Java https 소켓통신 방법 (0) | 2023.05.30 |
| Java 암호화 복호화 간단 코드(feat. AES) (0) | 2023.05.24 |
| Java Xss 대처 방안 (0) | 2023.05.23 |
| AES 256 암호화, 복호화 방법 (0) | 2023.05.22 |