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

 

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

 

 

 

 

 

XMLHttpRequest 객체 소개

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

 

 

 

 

 

XMLHttpRequest 객체 생성 및 초기화

var xhr = new XMLHttpRequest();

 

 

 

 

기본 메서드와 속성

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

 

 

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 요청을 만들어보았습니다.

 

 

 

 

 

- 이전 수업 목록