아름이의 개발로그

[공부 기록] JavaScript - ajax

06 Apr 2020 |

1. Ajax란?

서버와 통신하기 위한 API 종류 중 하나. 서버와 통신하기 위한 다른 API인 <form> 태그와 비교를 해보고자 한다.
<form> 태그는 서버에 자원을 요청하고 응답이 왔을 때 자원을 표시하기 위해서 HTML을 사용하기 때문에 전체 페이지를 새로고침해서 그 자원을 표시한다. 이는 자그마한 부분의 내용을 고치기 위해서 전체 페이지를 새로 그려야하는 낭비가 생길 수 있다.
그래서 나온 것이 Ajax이다. Ajax는 전체 페이지의 일부만을 새로 고침하여 보여주는 기법이다. Ajax를 풀어서 말하면 Asynchronous JavaScrip and XML인데 이름에 JavaScript가 들어가는 이유도 이것을 가능하게 하는 것이 JavaScript이기 때문이다.
즉, Ajax는 비동기 자바스크립트와 XML인데 JavaScript로 비동기 통신을 하고 클라이언트와 서버간의 XML 데이터를 주고 받는 기술이라 할 수 있다.
여기서 비동기 통신(Async)이란 요청해두고 응답이 올 때까지 다른 일을 하면서 기다리겠다는 것이고 XML(Extensible Markup Language)이란 데이터 표현 형식의 일종이다.

1-1. Ajax의 장점

  1. 웹 페이지의 속도 향상
  2. 서버 처리가 완료될 때까지 기다리지 않고 작업을 수행할 수 있다. (Async)
  3. 서버에서 Data만 전송하면 되므로 전체적인 코드 양이 줄어든다.
  4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진 공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

1-2. Ajax의 단점

  1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)
  2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  3. XMLHttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 수 있는 가능성이 있다.

1-3. jQuery와의 시너지

Ajax하면 jQuery를 빼놓을 수 없다. JavaScript만으로 Ajax를 작성하게 되면 코드량이 많아지고 브라우저별로 구현 방법이 달라진다. jQuery를 사용하게 되면 더 적은 코드량과 동일한 코드로 여러 브라우저를 대응할 수 있게 된다.

1-4. XMLHttpRequest와 jQuery Ajax의 사용 비교

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

GET을 수행하는 XMLHttpRequest 방식. 웹 API로써 별도의 라이브러리가 필요 없다.

$.ajax({
  url: 'http://example.com',
  method: 'GET',
  dataType: 'json'
})
  .done(function(json) {
      console.log(json)
  })
  .fail(function(xhr, status, errorThrown) {
  
  })
  .always(function(xhr, status) {
      console.log('요청완료')
  });

GET을 수행하는 jQuery Ajax 방식.
jQuery 라이브러리를 받으면 사용할 수 있다.

1-5. fetch?

Ajax를 구현하는 여러 가지 기술 중 최신 기술. fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하게 된다. 또한 메소드 체이닝 방식으로 코드를 더 간략하고 알기 쉽게 기술할 수 있게 된다. 그리고 웹 API로써 별도의 라이브러리가 필요 없다.

fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

GET을 수행하는 fetch 방식.
fetch 함수의 매개변수로 연결할 서버나 파일을 적고 then 함수를 통해서 fetch로 가져온 것들을 진행한다. catch 함수로 에러가 발생했을 경우 처리를 할 수 있다.

1-6. jQuery Ajax와의 차이점

fetch()로 부터 반환되는 Promise 객체는 HTTP Statue Code가 404나 500을 반환하더라도 HTTP error 상태를 reject하지 않는다. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다. 보통 fetch는 쿠키를 보내거나 받지 않는다.
사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 한다.

출처
Codestates Immersive Course
https://wherethelightis.tistory.com/14
https://coding-factory.tistory.com/143
https://juunone.github.io/fetchAPI/

Related Posts

Comments