AJAX

AJAX는 Asynchronous JavaScript and XML의 약자로 비동기 방식으로 데이터를 주고 받기 위해 개발된 자바스크립트 기술입니다.
AJAX는 HTML, XML, JSON, 텍스트 파일 등의 다양한 데이터를 주고받을 수 있고 AJAX를 사용하기 위해 XMLHttpRequest 객체를 사용합니다.

---

AJAX 장점

• 웹 전체를 다시 로딩하지 않고 일부분만 갱신가능
• 웹 페이지가 로드된 후에 서버로 데이터 요청 가능
• 웹 페이지가 로드된 후에 서버로부터 데이터 수신 가능
• 백그라운드 영역에서 서버로 데이터 보내기 가능

---

AJAX 단점

• 클라이언트가 서버에 데이터를 요청한 클라이언트 풀링 방식을 사용하므로 서버 푸시 방식의 실시간 서비스는 제작 불가능
• 바이너리 데이터 송수신 불가능
• 클라이언트 PC로 요청 불가능

---

## AJAX 사용하기

소스코드

const ajax = new XMLHttpRequest();
cont url = 'https://jsonplaceholder.typicode.com/todos/1';

ajax.onload = function() {
  if(ajax.status >= 200 && ajax.status < 300) {
    successCallback(ajax.response);
  } else {
    errorCallback(new Error(ajax.statusText));
  }
};
ajax.onerror = errorCallback;
ajax.open('GET', url);
ajax.setRequestHeader('Accept', 'application/json');
ajax.send();

function successCallback(response) {
  console.log('response:' + response);
}

function errorCallback(err) {
  console.log('error:' err.message);
}

우선 전체적인 진행 과정은 다음과 같습니다.

1. XMLHttpRequest 객체 생성
2. Callback 함수 생성
3. open a request
4. send the request

위의 예제 소스코드를 활용하여 요청을 보내고 응답을 받아오는 것을 확인 할 수 있습니다.