Front: AJAX란, 비동기와 동기, 비동기 동작 순서, XMLHttpRequest, Promise

AJAX란?

• Asynchronous JavaScrpt and XML
  
  
• 비동기적인 방식으로 서버와 통신
  
  
• 새로고침을 하지 않아도 서버와 통신해 웹페이지를 갱신할 수 있다.
  
  
• 한번에 서버의 데이터를 모두 받아오기 때문에 처음엔 느리지만, 이후로는 빠르게 처리할 수 있음
  
  
• 서버 입장에서는 부하가 감소하는 효과
  
  
• 클라이언트 입장에서는 더 빠르게 느낌

 

AJAX의 동작 방식: 동기 vs 비동기

 

1. 동기 :
   
   - 요청을 보낸 이후 서버로부터 응답을 받아야 다음 작업을 진행.
   
   - 코드가 단순하고 직관적이기에 개발자 입장에서는 더 용이할 수 있음
   
   - 하지만 한 가지 요청이 막히면, 다음 요청까지 막혀 멈춰버리는 현상 발생
   
   
   
   
   
2. 비동기 :
   
   - 페이지를 처음 불러들일 때, 대부분의 데이터를 모두 받아둠.
   
   - 어떠한 요청이 막혀도, 바로 다음 작업을 진행할 수 있기 때문에 빠른 반응속도 유도할 수 있음
   
   - 코드가 복잡해져 개발 시 어려울 수 있음

AJAX는 비동기 방식!

 

 

비동기 처리 순서

AJAX의 비동기적 처리는 XMLHttpRequest 객체를 이용하거나 Promise 방식을 사용해 진행된다.

1. XMLHttpRequest 객체를 생성하고, 요청을 초기화한다.

 

2. 요청을 서버로 비동기적으로 전송한다.

 

3. 서버로부터 응답 대기. 그동안 사용자는 페이지 다른 부분을 사용할 수 있다.

 

4. 응답이 도착하면 지정해둔 콜백 함수가 실행돼 응답 처리.

 

 

 

XMLHttpRequest 방식

XMLHttpRequest는 서버와 HTTP 통신을 가능하게 하는 객체이다.

 

var xhr = new XMLHttpRequest();	// 객체 생성

xhr.open("GET", "data.json", true); // 메서드와 URL 설정(초기화)

// 요청 성공 시 발생할 콜백함수를 지정
xhr.onload = function () {
	// 서버 응답 결과를 처리할 콜백함수
    if (xhr.status === 200) {
        console.log("Received: " + xhr.responseText);
    }
};
// 요청 전송
xhr.send();

 

 

 

 

Promise 방식

Promise는 비동기 작업을 더 쉽게 처리하도록 하는 객체.

동기 코드처럼 읽고 쓸수 있어 가독성도 상승함.

 

 

function fetchData() {
	// resolve : 요청 성공 시 호출할 함수
    // reject : 요청 실패 시 호출할 함수
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "data.json");
        xhr.onload = function () {
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject("Failed to fetch data");
            }
        };
        xhr.onerror = function () {
            reject("Network error");
        };
        xhr.send();
    });
}

fetchData().then(data => console.log(data)).catch(err => console.error(err));