1. 준비사항
- HTML 파일을 편집할 수 있는 텍스트 에디터 (예: Visual Studio Code)
- 기본 HTML, CSS, JavaScript 지식
- 테스트할 수 있는 로컬 서버(선택 사항, 온라인 API가 있으면 필요 없음)
2. 코드 (주석 포함)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax GET 요청 예제</title>
</head>
<body>
<h2>간단한 Ajax GET 요청 예제</h2>
<button onclick="fetchData()">데이터 가져오기</button>
<div id="result">
<p>결과가 여기에 표시됩니다.</p>
</div>
<script>
// 데이터 가져오기 함수 정의
function fetchData() {
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// GET 요청 초기화 (테스트 API URL 사용)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청이 성공적으로 완료된 경우 실행할 콜백 함수
xhr.onload = function () {
if (xhr.status === 200) {
// JSON 데이터 파싱 후 HTML 요소에 표시
const data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `<h3>${data.title}</h3><p>${data.body}</p>`;
} else {
// 오류 메시지 표시
document.getElementById('result').innerHTML = `<p>오류가 발생했습니다: ${xhr.status}</p>`;
}
};
// 요청 오류 발생 시 실행할 콜백 함수
xhr.onerror = function () {
document.getElementById('result').innerHTML = `<p>네트워크 오류가 발생했습니다.</p>`;
};
// 요청 전송
xhr.send();
}
</script>
</body>
</html>
3. 주요 기능 설명 및 흐름
- fetchData() 함수: 버튼을 클릭하면 fetchData() 함수가 호출됩니다. 이 함수는 XMLHttpRequest 객체를 통해 Ajax GET 요청을 생성합니다.
- xhr.open(): XMLHttpRequest 객체의 open 메서드를 사용하여 GET 요청을 초기화하며, 요청 URL은 https://jsonplaceholder.typicode.com/posts/1을 사용합니다. 이 URL은 무료 테스트 API이며, id 사용을 배제한 간단한 GET 요청으로만 작성했습니다.
- xhr.onload: 요청이 성공적으로 완료되면 상태 코드가 200인지 확인하고, JSON 데이터를 JavaScript 객체로 변환 후 제목과 본문을 HTML 요소에 표시합니다.
- xhr.onerror: 요청 중 네트워크 오류가 발생하면 오류 메시지를 HTML에 표시합니다.
4. 결과 미리보기
실제 결과는 브라우저에서 다음과 같이 표시됩니다.
- 사용자가 "데이터 가져오기" 버튼을 클릭하면, fetchData() 함수가 실행됩니다.
- 결과적으로 JSON 데이터의 제목과 본문이 <div id="result"> 요소에 표시됩니다.
- 오류 발생 시에는 오류 메시지가 <div id="result">에 표시됩니다.
간단한 Ajax GET 요청 예제
sunt aut facere repellat provident occaecati excepturi optio reprehenderit
quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto
5. 추가 팁 및 주의사항
- API 호출 제한: 일부 API는 초당 호출 횟수가 제한될 수 있습니다. 반복적인 호출이 필요할 경우, 이에 맞추어 요청 간격을 조정하거나 캐싱을 고려하세요.
- XHR 대체: 최신 코드 작성 시 Fetch API를 사용하면 코드가 더 간결해질 수 있습니다.
- 보안 문제: 크로스 도메인 정책(CORS) 관련 오류가 발생할 수 있으니, 외부 API 요청 시 서버 설정을 확인해야 합니다.
'HTML 예제' 카테고리의 다른 글
| Ajax POST 요청 테스트 - 사용자 데이터 전송 (0) | 2024.11.07 |
|---|---|
| 버튼 누르면 팝업창 뜨기 (0) | 2023.12.08 |
| 미션 클리어 카운터 (0) | 2023.12.08 |
| 실시간 주식 시세 (0) | 2023.12.08 |
| 웹사이트 소개 페이지 (0) | 2023.12.08 |
