목차
728x90
0.XMLHttpRequest
AJAX 통신의 핵심 객체로, 브라우저와 서버 간에 데이터를 주고받을 수 있도록 해주는 JavaScript 객체
이 객체를 사용하여 웹 페이지를 새로 고침하지 않고도 서버에 데이터를 요청하고, 서버로부터 받은 데이터를 처리할 수 있습니다.
1.XMLHttpRequest 사용
1-1.XMLHttpRequest 객체 생성
var 변수이름 = new XMLHttpRequest(); 형식으로 XMLHttpRequest객체를 생성합니다.
var xhr = new XMLHttpRequest();
1-2.서버로 보낼 요청 설정 open()
open() 메서드를 사용해 요청을 설정합니다. 이때 요청 메서드(GET, POST)와 서버의 URL, 비동기 여부를 지정할 수 있습니다.
xhr.open('GET', 'https://example.com/data', true);
1-3.서버에 요청 전송
send() 메서드를 사용해 설정된 요청을 서버에 전송합니다.
xhr.send();
1-4.응답 처리
서버에서 응답이 오면, 이를 처리하기 위한 콜백 함수를 작성할 수 있습니다. onreadystatechange 이벤트 핸들러를 사용해 서버 응답을 처리합니다.
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // 서버 응답 출력
}
};
2.사용 예시
2-1.HTML
버튼을 누르면 loadDate()가 불러온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 간단 예제</title>
<script src="./main.js" defer></script>
</head>
<body>
<h1>AJAX 간단 예제</h1>
<button onclick="loadData()">데이터 불러오기</button>
<div id="result" style="margin-top: 20px;"></div>
</body>
</html>
2-2.main.js
샘플 데이터를 제공하는 무료 온라인 REST API 서비스인 JSONPlaceholder 에게서 https://jsonplaceholder.typicode.com/posts/1에 비동기적으로 GET요청을 보낸다.
onreadystatechange를 통해 서버의 응답을 받으면 서버에서 받은 응답 데이터를 Dom요소를 변환시켜 출력해준다.
function loadData() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 서버로 보낼 요청 설정 (GET 요청, 비동기)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청 상태가 변할 때 실행되는 콜백 함수
xhr.onreadystatechange = function() {
// 요청 완료(readyState가 4)되고, 성공(status가 200)한 경우
if (xhr.readyState === 4 && xhr.status === 200) {
// 서버에서 받은 응답 데이터 출력
var response = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML =
'<h3>' + response.title + '</h3><p>' + response.body + '</p>';
}
};
// 서버에 요청 전송
xhr.send();
}
728x90
'FrontEnd > JavaScript' 카테고리의 다른 글
| [AJAX] 헤더 (0) | 2024.09.30 |
|---|---|
| [AJAX] AJAX(Asynchronous JavaScript and XML) 란? (0) | 2024.09.29 |
| [JavaScript] Symbol (0) | 2024.07.28 |
728x90
0.XMLHttpRequest
AJAX 통신의 핵심 객체로, 브라우저와 서버 간에 데이터를 주고받을 수 있도록 해주는 JavaScript 객체
이 객체를 사용하여 웹 페이지를 새로 고침하지 않고도 서버에 데이터를 요청하고, 서버로부터 받은 데이터를 처리할 수 있습니다.
1.XMLHttpRequest 사용
1-1.XMLHttpRequest 객체 생성
var 변수이름 = new XMLHttpRequest(); 형식으로 XMLHttpRequest객체를 생성합니다.
var xhr = new XMLHttpRequest();
1-2.서버로 보낼 요청 설정 open()
open() 메서드를 사용해 요청을 설정합니다. 이때 요청 메서드(GET, POST)와 서버의 URL, 비동기 여부를 지정할 수 있습니다.
xhr.open('GET', 'https://example.com/data', true);
1-3.서버에 요청 전송
send() 메서드를 사용해 설정된 요청을 서버에 전송합니다.
xhr.send();
1-4.응답 처리
서버에서 응답이 오면, 이를 처리하기 위한 콜백 함수를 작성할 수 있습니다. onreadystatechange 이벤트 핸들러를 사용해 서버 응답을 처리합니다.
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // 서버 응답 출력
}
};
2.사용 예시
2-1.HTML
버튼을 누르면 loadDate()가 불러온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 간단 예제</title>
<script src="./main.js" defer></script>
</head>
<body>
<h1>AJAX 간단 예제</h1>
<button onclick="loadData()">데이터 불러오기</button>
<div id="result" style="margin-top: 20px;"></div>
</body>
</html>
2-2.main.js
샘플 데이터를 제공하는 무료 온라인 REST API 서비스인 JSONPlaceholder 에게서 https://jsonplaceholder.typicode.com/posts/1에 비동기적으로 GET요청을 보낸다.
onreadystatechange를 통해 서버의 응답을 받으면 서버에서 받은 응답 데이터를 Dom요소를 변환시켜 출력해준다.
function loadData() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 서버로 보낼 요청 설정 (GET 요청, 비동기)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청 상태가 변할 때 실행되는 콜백 함수
xhr.onreadystatechange = function() {
// 요청 완료(readyState가 4)되고, 성공(status가 200)한 경우
if (xhr.readyState === 4 && xhr.status === 200) {
// 서버에서 받은 응답 데이터 출력
var response = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML =
'<h3>' + response.title + '</h3><p>' + response.body + '</p>';
}
};
// 서버에 요청 전송
xhr.send();
}
728x90
'FrontEnd > JavaScript' 카테고리의 다른 글
| [AJAX] 헤더 (0) | 2024.09.30 |
|---|---|
| [AJAX] AJAX(Asynchronous JavaScript and XML) 란? (0) | 2024.09.29 |
| [JavaScript] Symbol (0) | 2024.07.28 |
