Ajax 개념 및 코드 살펴보기

AJAX 란?

Ajax는 JavaScript의 일부분으로 Client가 서버에 요청을 보내고 서버가 응답을 받기 전까지 대기 후 전체 웹 페이지를 리로딩하는 Synchronous 통신 방식이 아닌, Client가 콘텐츠 일부분에 대해 서버에 요청을 보낸 후 데이터가 업데이트 되는 Asynchronous 통신으로 동작하는 기술이다.

XMLHttpRequest 객체를 통해 클라이언트와 서버간 데이터를 주고받는다.

AJAX 의 장점

클라이언트와 서버 사이에 교환되는 데이터량과 서버의 데이터 처리량이 줄어 응답성 향상
플러그인 없이 인터렉티브한 웹 페이지 구현 가능
서버의 응답을 기다리지 않고, 비동기 요청 가능 (필요한 부분만 가져올 수 있음)
자원과 시간 단축

AJAX 의 단점

지원되지 않는 브라우저가 존재
연속적으로 데이터 요청 시 서버에 부하 증가
디버깅 불가능
페이지의 이동이 없어 관리가 어려워 보안상 문제 발생 가능

AJAX 코드 살펴보기

프로토타입으로 정형화 되어 있지 않아 기본적인 코드에 대해 살펴보자.

Ajax를 사용하기 위해 XMLHttpRequest 객체를 생성한다.

var xhr = new XMLHttpRequest();

open() 메서드를 사용하여 서버로 보낼 형식을 설정한다.

xhr.open('GET', 'http://localhost:8080/api/testAjax', true)

onreadystatechange는 XMLHttpRequest의 상태정보가 변할 때 마다 발생하는 이벤트이다.
onreadystatechange 이벤트가 발생할 때, 정의한 함수를 실행한다.

xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE) {
    var status = xhr.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // 성공 시 실행할 코드
      console.log(xhr.responseText);
    } else {
      // 에러 처리
    }
  }
};

setRequestHeader 메서드를 통해 HTTP Header을 작성할 수 있다.

xhr.setRequestHeader('Content-Type', 'application/json');

send() 메서드를 통해 사용자의 요청을 서버로 전달한다. (인수를 가지지 않아도 됨)
JSON.stringify()는 객체나 값을 JSON 문자열로 반환한다.

xhr.send(JSON.stringify(data));

AJAX 란?

AJAX 의 장점

AJAX 의 단점

AJAX 코드 살펴보기

티스토리툴바