form, XHR, AJAX, jQuery.ajax, Fetch

XHR이 나오기 이전의 서버와의 통신

XHR, AJAX, jQuery.ajax(), Fetch를 보기 전에 XHR이 나오기 전에는 어떻게 서버와 통신했는지를 알아보자.

form

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다.

위키백과-Ajax

• GET request

<form action="/name-get" method="get">
  <!-- 데이터들은 querystring으로 넘어간다 -->
  first name: <input type="text" name="firstname" /><br />
  last name: <input type="text" name="lastname" /><br />
  <input type="submit" />
</form>

• POST request

<form action="/name-post" method="post">
  first name: <input type="text" name="firstname" /><br />
  last name: <input type="text" name="lastname" /><br />
  <input type="submit" />
</form>

• server code

app.post("/name-post", function(request, response) {
  const { firstname, lastname } = request.body;
  response.send(`[POST] Hi ${firstname} ${lastname}`);
});

app.get("/name-get", function(request, response) {
  const { firstname, lastname } = request.query;
  response.send(`[GET] Hi ${firstname} ${lastname}`);
});

서버는 send 로 단순히 값을 보내주기만 했는데도, 클라이언트는 새로운 페이지 를 받는다.

위 클라이언트 코드와 서버 코드를 실행 해보면 아래의 결과가 나온다.

 

get의 내용을 채워서 보내면 아래의 사진과 같은 결과가 온다.

 

post의 내용을 채워서 보내면 아래의 사진과 같은 결과가 온다.

 

정리하자면...

form 태그를 이용해서 서버와 데이터를 주고받는 것이 가능했었다. 하지만 서버는 무조건 새로운 페이지 를 보내줬다.

XHR와 AJAX

XHR

그러다가 1999년에 비동기적으로 데이터를 가져오는 XMLHttpRequest(이하 XHR) 라는 것이 등장한다.

이는 이전의 방식과 달리 클라이언트가 서버에게 필요한 부분만 요청 하고, 서버는 해당하는 내용만 보내주는 것 이 가능했다.

이로써 필요한 데이터만 요청하기 때문에 대역폭의 낭비를 줄일 수 있었으며, 요청한 부분에 대해서만 업데이트가 일어났기 때문에 사용자와 상호작용 을 할 수 있게 되었다.

AJAX

그러다 2006년, 구글에서 XHR을 사용하여 비동기처리를 하는 기술에 AJAX(Asynchronous Javascript And XML) 이라는 새로운 이름을 붙였다. (이전까지는 별다른 이름이 없었다고 한다)

이것은 이미 존재하던 기술이었지만 2000년도 중반 이후로 인기를 끌기 시작했다. 구글은 2004년에 G메일, 2005년에 구글 지도 등의 웹 애플리케이션을 만들기 위해 비동기식 통신을 사용했다.

Ajax라는 용어는 공식적으로 AJAX: A new approach for a new application[2] 기사에서 구글이 Google pages 에서 사용한 기술에 기반하여 등장했다.

위키백과-Ajax

쓰기 쉬운 jQuery.ajax

AJAX는 (=== XHR을 이용한 비동기 처리는) 굉장히 복잡했다.

AJAX

• AJAX POST request

const xhr = new XMLHttpRequest();

xhr.open("post", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};

• AJAX GET request

const xhr = new XMLHttpRequest();

xhr.open("get", `${url}?${querystring}`);
xhr.send();

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};

jQuery.ajax()

(아래 코드는 아마 틀렸을겁니다. 가독성과 구조화의 느낌만 참고해주세요.)

이에 jQuery에서 이를 보다 쓰기 쉽게하는 함수 ajax를 만들었다.

• jQuery.ajax() GET request

$.ajax({
  url,
  method: "GET",
  dataType: "json"
})
  .done(json => {
    console.log(json);
  })
  .fail((xhr, status, errorThrown) => {})
  .always((xhr, status) => {
    console.log(xhr.responseText);
  });

• jQuery.ajax() POST request

$.ajax({
  url,
  method: 'POST',
  data: {
    firstname: 'sang-a',
    lastname: 'lee'
  }
  dataType: 'json'
})
.done((json)=>{
  console.log(json)
})
.fail((xhr, status, errorThrown) => {})
.always((xhr, status) => {
  console.log(xhr.responseText);
})

 

종합해보면...

전체적인 가독성과 구조화면에서 jQuery의 ajax()함수가 보다 좋다는 것을 알 수 있다.

그럼에도 마냥 깔끔하지는 않고, 만약 ajax() 함수를 쓰려한다면 jQuery를 꼭 이용해야 했다.

이에 ES6(ES2015)에서 fetch가 등장하게 된다.

 

Fetch

• Fetch GET request

fetch(`${url}?${querystring}`)
  .then(result => result.json())
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.log(err);
  });

• Fetch POST request

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
  .then(result => result.json())
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.log(err);
  });

jQuery.ajax() 와 전체적인 구조는 비슷하지만 코드는 훨씬 간결하다.

그리고 jQuery를 사용하지 않고도 사용할 수 있다.

 

Fetch는 XHR보다 무엇을 더 할 수 있는가?

Here

You can use the Cache API with the request and response objects;

• response와 request 객체에서 Cache API를 사용할 수 있다.

You can perform no-cors requests, getting a response from a server that doesn't implement CORS. You can't access the response body directly from JavaScript, but you can use it with other APIs (e.g. the Cache API);

• CORS를 구현하지 않는 서버에서 응답을 받아 no-cors 요청을 수행 할 수 있다. JavaScript에서 직접 response body 에 액세스 할 수 없지만 다른 API (예 : Cache API)와 함께 사용할 수 있다.

Streaming responses (with XHR the entire response is buffered in memory, with fetch you will be able to access the low-level stream). This isn't available yet in all browsers, but will be soon.

• 스트리밍 응답 (XHR을 사용하면 전체 응답이 메모리에 버퍼링되며 가져 오기를 사용하면 하위 레벨 스트림에 액세스 할 수 있음). 아직 모든 브라우저에서 사용할 수는 없지만 곧 제공 될 예정이다.

 

참고 자료

• Dev.White님의 블로그
• 위키백과-Ajax
• js-fe-study/js와 ES6, JS의 역사
• Fetch는 XHR보다 무엇을 더 할 수 있는가?