AJAX

AJAX 등장 배경

• 초창기의 웹은 일부분만 바뀌면 되는 경우에도 매번 새 페이지가 로드되는 방식이어서 효율적이지 않고 사용자에게도 좋지 않은 경험을 줬다.
• 그래서 2000년대 초부터는 웹의 이런 단점을 극복하기 위해서 AJAX라는 기술이 도입되었다.

AJAX란?

• Asynchronous JavaScript And XML
• 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것
• JSON, XML, HTML 및 텍스트 파일을 포함한 다양한 형식으로 정보를 주고받을 수 있다
• 페이지를 다시 로드하지 않고 비동기적으로 서버와 통신하고, 데이터를 교환하고, 페이지를 업데이트할 수 있다

XMLHttpRequest란?

• 페이지를 다시 로드하지 않고도 URL에서 데이터를 검색하고 서버와 상호 작용하는 데 사용되는 객체
• XML 뿐만 아니라 모든 유형의 데이터를 검색하는 데 사용할 수 있다

fetch, axios를 쓰지 않고 AJAX 사용하기

1. HTTP request를 만들고 onreadystatechange 속성을 설정하여 응답을 처리할 JavaScript 함수를 XMLHttpRequest 객체에 알려줘야 한다

   const httpRequest = new XMLHttpRequest();

   function handler() {
     // Process the server response here.
   }
   
   httpRequest.onreadystatechange = handler;

   • 익명 함수를 사용하여 응답을 처리할 작업을 작성할 수도 있다

   httpRequest.onreadystatechange = () => {
     // Process the server response here.
   };

   • HTTP 리퀘스트 객체의 open(), send() 메소드를 호출하여 작업을 실행한다

   httpRequest.open("GET", "http://www.example.org/some.file", true);
   httpRequest.send();

   • send() 메소드에 대한 매개 변수로 POST request에 서버로 보낼 데이터를 담을 수 있다. 양식은 JSON, XML, 쿼리 문자열과 같이 서버가 구문 분석할 수 있는 형식이어야 한다
   • 데이터를 POST할 때 리퀘스트의 MIME type을 설정해야 할 수 있다

   httpRequest.setRequestHeader(
     "Content-Type",
     "application/x-www-form-urlencoded"
   );

2. 서버 응답을 처리한다

   httpRequest.onreadystatechange = nameOfTheFunction;

   • 먼저, 리퀘스트 상태를 확인해야 한다
     • 0 (uninitialized)
     • 1 (loading)
     • 2 (loaded)
     • 3 (interactive)
     • 4 (complete)
     • 상태의 값이 XMLHttpRequest.DONE(4)인 경우 전체 서버 응답이 수신되었으며 계속 처리해도 된다는 뜻이다

   if (httpRequest.readyState === XMLHttpRequest.DONE) {
     // Everything is good, the response was received.
   } else {
     // Not ready yet.
   }

   • 그런 다음 HTTP 응답 상태 코드를 확인해야 한다

   if (httpRequest.status === 200) {
     // Perfect!
   } else {
     // There was a problem with the request.
     // For example, the response may have a 404 (Not Found)
     // or 500 (Internal Server Error) response code.
   }

   • 요청 상태와 응답 상태 코드를 확인한 후 서버가 보낸 데이터로 원하는 작업을 수행할 수 있다
     • httpRequest.responseText: 서버 응답을 텍스트 문자열로 리턴한다
     • httpRequest.responseXML: JavaScript DOM 함수로 이동할 수 있는 XML 문서 객체를 리턴한다

3. XML response, data를 다룬다

참고

• Ajax - Developer guides | MDN
• Getting started - Developer guides | MDN
• XMLHttpRequest - Web APIs | MDN
• 코드잇 제공 자료