[AJAX 수업] 2강 - 첫 번째 AJAX 요청 만들기

AJAX 수업 2강 - 첫 번째 AJAX 요청 만들기

안녕하세요! 그레이해커 월횽입니다. AJAX 수업의 두 번째 강의 내용을 소개합니다. 이번 강의에서는 AJAX의 핵심인 XMLHttpRequest 객체를 소개하고, 첫 번째 AJAX 요청을 만들어보겠습니다.

728x90

XMLHttpRequest 객체 소개

XMLHttpRequest 객체는 웹 브라우저와 서버 간의 데이터 교환을 가능하게 하는 핵심 객체입니다. 이 객체를 사용하여 비동기적으로 데이터를 요청하고 응답을 처리할 수 있습니다.

반응형

XMLHttpRequest 객체 생성 및 초기화

var xhr = new XMLHttpRequest();

기본 메서드와 속성

• open(method, url, async): 요청을 초기화합니다.
• send(data): 요청을 서버로 보냅니다.
• onreadystatechange: 상태 변화를 감지하는 이벤트 핸들러입니다.

SMALL

GET 요청 예제

이제 간단한 GET 요청을 만들어보겠습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('요청에 실패했습니다.');
    }
  }
};
xhr.send();

위 예제에서는 GET 메서드를 사용하여 https://api.example.com/data에 데이터를 요청하고, 응답을 콘솔에 출력합니다. readyState와 status 코드를 사용하여 요청 상태를 확인합니다.

JSON 데이터 처리

이번에는 JSON 데이터를 요청하고 처리하는 방법을 알아보겠습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/jsondata', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var jsonData = JSON.parse(xhr.responseText);
      console.log(jsonData);
    } else {
      console.error('요청에 실패했습니다.');
    }
  }
};
xhr.send();

서버로부터 받은 JSON 데이터를 JSON.parse()를 통해 자바스크립트 객체로 변환하여 활용합니다.

이렇게 XMLHttpRequest 객체를 사용하여 첫 번째 AJAX 요청을 성공적으로 만들어보았습니다. 다음 강의에서는 POST 요청과 데이터 전송 방법에 대해 다뤄보겠습니다.

이전 강의 보기: [AJAX 수업] AJAX 소개, 웹 개발의 핵심 기술
다음 강의 보기: [AJAX 수업] 3강 - POST 요청과 데이터 전송