Interection with Server

---

TIL List

• Ajax 의 뜻

• XHR, Jquery, Fetch

---

Ajax

AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 자바스크립트를 통해서 서버에 데이터를 요청하는 기술들을 통칭하는 것이다.

왜 Ajax 를 쓰는거지?

Ajax 는 위에서 기술했듯이 비동기 방식을 이용하는데 이는 데이터의 필요한 부분만 불러와 사용할 수 있다는 장점이 있다.

즉, 페이지를 새로고침 할 때 모든 데이터를 다시 불러오는 것이 아닌, 일부분의 데이터만 불러옴으로써 리소스 낭비를 줄일 수 있는 장점 때문에 사용한다.

초기 Ajax, XMLHttpRequest (XHR) 의 등장

// USE XHR

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain/service');

// request state change event
xhr.onreadystatechange = function() {

  // request completed?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful - show response
    console.log(xhr.responseText);
  }
  else {
    // request error
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();

XHR 은 기본적으로 event 기반이다. 응답을 받을 때 state 를 바꾸는 이벤트를 발생시키고, 이를 onreadystatechange 를 통해 감지하게 되는 모습이다.

XHR 의 단점

이러한 XHR 은 겉보기에는 별 문제가 없어보이지만 아래의 단점이 존재했다.

1. 초기 기획때부터 인터페이스를 제공하지 않아 브라우저간의 불일치가 발생함.

2. 구조가 복잡하여 코드 가독성이 떨어짐

---

이를 보완한 jQuery 의 등장!

전체적인 가독성과 구조화면에서 XHR 보다 낫다는 평가를 받았다.

하지만 기존에 비해 조금 나아졌을 뿐이지 월등히 깔끔해지지는 않았다.

---

fetch 를 사용해야 하는 이유

jQuery 와 전체적인 구조는 비슷하지만 코드는 훨씬 간결하기 때문이다.