AJAX

AJAX (Asynchronous JavaScript And XML HttpRequest)

 : JavaScript, DOM, Fetch, XML HttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법

- 가장 큰 특징은 웹 페이지의 필요한 부분만 비동기적으로 받아와 화면에 그려낼 수 있다는 것 

- ex. 페이스북 메시지나 네이버 포털사이트의 뉴스 탭 처럼 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링하는 것

 

1. AJAX의 두가지 핵심 기술
 1.1 Fetch 예제
 1.2 XML HttpRequest 예제
2. AJAX의 장점 
3. AJAX의 단점 

---

1. AJAX의 두 가지 핵심 기술

- JavaScript 와 DOM 그리고 Fetch임

- 전통적인 웹 애플리케이션에서는 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했음

- 그러나 Fetch를 사용하면, 페이지를 이동하지 않아도 서버로 부터 필요한 데이터를 받아 올 수 있음

- Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신 할 수 있도록 함 

- 즉 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때 까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용함

- 또한 JavaScript 에서 DOM을 사용해 조작할 수 있기 때문에 Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용 시켜서 새로운 페이지로 이동하지 않고 기존 페이에서 필요한 부분만 변경할 수 있음

 

1.1 Fetch 예제

- Fetch 이전에는 XHR(XML HttpRequest)를 사용

- Fetch는 XHR의 단점을 보안한 새로운 Web API이며 XML보다 가볍고 JavaScript와 호환되는 JSON을 사용

// Fetch를 사용
fetch('http://..생략..:3000/messages')
	.then(function(response){
      return response.json();
    })
    .then(function(json){
       ...
    });

- 표준화된 XML을 사용했었으나 Crosss-Site 이슈등의 불편함이 있었고 그에 비해 Fetch는 pomise 지원등 장점을 가지고 있어 이제 많은 사람들이 Fetch를 사용함 

 

1.2 XML HttpRequest 예제

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

xhr.onreadystatechange = function(){
  if(xhr.readyState !== 4) return;
  // readyState 4 : 완료
  
  if(xhr.status === 200){
    //status 200: 성공
     console.log(xhr.responseText); //서버로 부터 온 응답
  } else {
     console.log('에러:' + xhr.status); //요청 도중 에러 발생
  }
}

xhr.send(); //요청 전송

---

2. AJAX의 장점

 

- 서버에서 HTML을 완성하여 보내주지 않아도 웹 페이지를 만들 수 있음

  : 이전에는 서버에서 HTML을 완성해서 보내줘야 화면에 렌더링 할수 있었음. AJAX를 사용하면 서버에서 완성된 HTML을 보내 주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면 일부만 업데이터하여 렌더링 할 수 있음 

 

- 표준화된 방법

 : 예전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서 부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었음

 

- 유저 중심 애플리케이션 개발 

 : AJAX를 사용하면 필요한 부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있음 

 

- 더 작은 대역폭

 : 이전에는 서버로부터 완성된 HTML을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸음. 그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작음

 

 * 대역폭 : 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기 

---

4. AJAX의 단점 

 

- Search Engine Optimization(SEO)에 불리

 : HTML이 비어 있기 때문에 사이트 정보를 긁어가기 어려움

 

- 뒤로가기 버튼 문제

 : 일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 것이라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않음. 

따라서 뒤로가기 기능을 구현하기 위해서는 별도로 History API를 사용해 함