AJAX 비동기 통신

Dongkyu·2025년 7월 15일

목록 보기

5/5

AJAX란?

"Asynchronus JavaScript and XML"의 줄임말로 직역하면 "비동기 자바스크립트 XML"이다.

이 비동기 자바스크립트란 무엇일까?

우리가 브라우저를 이용할 수 있다는 것은 서버에서 브라우저에게 우리가 필요로한 데이터를 전달해주기 때문이다.
이때 사용자가 홈페이지에 들어가는 행위는 서버에게 데이터 요청을 하는 행위기 된다. 서버는 요청을 받고 필요로한 HTML, CSS, JavaScript 파일을 전달한다. 이를 브라우저가 해석하면 우리가 매일 사용하고 있는 웹 페이지의 하나가 되는 것이다.

여기서 우리는 웹에서 많은 페이지와 링크를 통해 진입하는 등의 다양한 행위를 할 수 있다. 그런데 이러한 하나하나의 요청에 서버가 데이터를 전달해주고, 그 데이터를 브라우저가 읽는다면 매번 웹페이지를 갱신해야하는 번거로움이 생길 것이다.

그래서 AJAX는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 제공한다.

서버로부터 웹페이지가 반환되면 화면 전체를 갱신하지 않고 필요한 부분만 갱신하여 사용자의 웹페이지 사용에 편의성을 높혀줄 수 있게 된다.

XMLHttpRequest

XMLHttpRequest 객체는 데이터를 주고받을때 사용했던 방식이다.

서버에 데이터를 요청하는 것을 request라고 한다.
서버에로부터 응답을 받는 것을 response라고 한다.
이러한 요청과 응답하는 과정을 fetch라고 부른다.

XMLHttpRequst 객체 생성

const request = new XMLHttpRequest()

new 생성자를 통해 XMLHttpRequest() 객체를 생성해준다.

이벤트 수신

request.addEventListener('load', e => {
	//...
})

생성된 XMLHttpRequest() 객체는 서버로부터 받는 요청을 이벤트 리스너로 응답(Response)받을 수 있다.

이때 load이벤트를 통해 받을 수 있다.

Request

request.open(METHOD, URL)

요청 방법을 지정한다.
요청할 방법과, 요청할 주소를 인수로 받는다.
이때 Method에는 다음과 같은 요청을 보낼 수 있다.

GET : 정보를 가져올 경우의 요청
POST : 새로운 정보를 만들 때의 요청
PUT : 정보를 교체할 때의 요청
PATCH : 데이터의 일부를 수정할 경우의 요청
DELETE : 데이터 삭제 요청

이후 request.send()를 통해 서버에 요청을 보낸다.

const request = new XMLHttpRequest()
request.addEventListener('load', ({ target }) => {
	console.log(JSON.parse(target.response))
})

request.open('GET', 'https://dummyjson.com/products')
request.send()

콘솔을 통해 전달받은 데이터를 볼 수 있다.

응답 및 처리

서버는 우리의 요청을 "수락" 또는 "거절" 할 수 있다.
이때 load로 이벤트를 받은 대상은 XMLHttpRequest() 객체가 된다.

request.addEventListener('load), (e) => {
	// e -> 대상인 request는 
	// XMLHttpRequest의 객체가 되므로, 
	// 서버로부터 받은 응답 데이터를 포함하게 된다.                         
})

따라서 e.target.response는 전달받은 데이터를 가진 문자열이다.

JSON

서버로부터 전달받은 데이터는 일반적인 객체가 아니다. 이러한 데이터 포멧을 JSON이라고 한다.

JSON : JavaScirpt Object Notation

우리는 서버로부터 받은 데이터를 가공하여 원하는 값들을 웹브라우저를 통해 사용자에게 전달해야하는데, 이러한 문자열을 가공하기란 불가능에 가깝다.

JSON의 사용 이유

이러한 JSON 형식을 사용하는 이유가 뭘까?

사람이 읽고 쓰기 쉬운 형태이다.
JSON은 KEY - Value의 한 쌍으로 구성되어 JavaScript의 객체와 비슷한 구조를 가지고 있다.
가볍고 효율적이다.
XML과 같은 다른 포맷보다 구조가 간단해 용량이 적어 네트워크 전송시 효율적이기 때문이다.
JavaScript와의 호완성
JSON은 JavaScript의 객체 문법에서 파생된 형식이기 때문에 웹 브라우저에서 바로 사용하기 용이하다.
독립적
JSON은 Java, Python, Go, PHP 등 거의 모든 언어에 지원 되고있다.

JSON 변환

우리가 원하는 객체형 데이터로 JSON을 변환할 수 있다.

const data = {
  name: "홍길동",
  age: 20,
  Birthday: "1월 1일",
  favolit: ["codding", "game", "watching movie"],
};
// 객체 -> json
console.log(JSON.stringify(data));
// {"name":"홍길동","age":20,"Birthday":"1월 1일","favolit":["codding","game","watching movie"]}


const jsonData =
  '{"name":"홍길동","age":20,"Birthday":"1월 1일","favolit":["codding","game","watching movie"]}';

// json -> 객체
console.log(JSON.parse(jsonData));
// {name: '홍길동', age: 20, Birthday: '1월 1일', favolit: Array(3)}

JSON.parse() : 인수의 값을 객체로 변환한다.
JSON.stringify() : 인수를 JSON 형식으로 변환한다.

이러한 방법을 통해 서버와 웹은 데이터를 주고 받는다.

데이터 가공

//HTML ul 요소
const productList = document.querySelector(".product-list");

// XMLHttpRequset 객체 생성
const request = new XMLHttpRequest();

// load 이벤트리스너
request.addEventListener("load", ({ target }) => {
  // JSON -> 객체 변환
  const { products } = JSON.parse(target.response);
  
  // 데이터 가공
  const filterProducts = products.reduce((HTML, { title, description }) => {
    HTML += `
      <li>
        <p>상품명 : ${title}</p>
        <p>설명 : ${description}</p>
      </li>
    `;
    return HTML;
  }, "");

  // HTML 삽입
  productList.insertAdjacentHTML("beforeend", filterProducts);
});

request.open("GET", "https://dummyjson.com/products");
request.send();