JavaScript Ajax와 JSON

🗓2020년 03월 05일 ∙ 🖊TutorialPost ∙ ⏳5분

Ajax (Async Javascript And XML)는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부 만을 로드 하기 위한 기법입니다.

Ajax는 비동기 처리 모델 (또는 non-blocking 이라고도 함)을 사용하여 데이터를 처리합니다. 동기 처리 모델에서 브라우저는 자바스크립트 코드를 만나면 스크립트를 처리하기 전까지 다른 작업을 일시 중지하고, 자바스크립트 코드의 처리가 끝난 후 기존 작업을 진행합니다.

반면에 Ajax를 사용하면 브라우저는 서버에 데이터를 요청한 뒤 페이지의 나머지를 로드하고 페이지와 사용자의 상호작용을 처리합니다. 웹서버가 사용자에게 데이터를 전달하면 이벤트가 발생하게 되며, 데이터를 처리할 함수를 호출하게 됩니다. 이를 다시 정리하면 아래와 같습니다.

Ajax 동작방식

  1. 요청(request) - 브라우저가 서버에 정보를 요청한다.
  2. 서버의 동작 - 서버는 JSON, XML 등의 형식으로 데이터를 전달한다.
  3. 응답(response) - 브라우저에서 이벤트가 발생하여 콘텐츠를 처리한다.

데이터 타입

Ajax는 Async Javascript And XML의 약어로, 이름에 나와있는 것처럼 XML 형식으로 데이터를 주고 받을 수 있습니다. 하지만 최근에는 많은 경우 JSON (JavaScript Object Notation) 형식으로 데이터를 주고 받습니다.

JSON

JSON (JavaScript Object Notation)은 자바스크립트의 객체 표현식과 유사한 방식으로 데이터를 주고 받는 방법입니다. 자바스크립트 객체와 거의 유사하지만 몇가지 차이점이 존재합니다.

JSON은 객체를 정의하지는 않습니다. 즉, 자바스크립트 객체가 아니라 객체 표현식으로 데이터를 표현합니다. 따라서 다른 도메인에서도 요청을 보낼 수 있습니다.

JSON은 기존에 많이 사용하던 XML 문법보다 훨씬 간결한 문법을 가지고 있습니다. 다만, 문법에 예민한 편입니다.

JSON 사용 시 악의적인 콘텐츠를 통한 공격이 있을 수 있으므로 주의해야 합니다.

아래는 JSON의 기본적인 문법입니다. 코드를 손쉽게 이해할 수 있을겁니다.

{
  "key": "반드시 큰따옴표로 둘러싸야한다",
  "value": "값은 string, number, boolean, array, object, null이 올 수있다",
  "구분": "키와 값은 : 을 이용해 구분하고 키/값 쌍은 , 로 구분한다",
  "name": "Alice",
  "age": 10
}
{
  "users": [
    {"name": "Alice", "age": 10, "gender": "female"},
    {"name": "Bob", "age": 42, "gender": "male"},
    {"name": "Chris", "age": 21, "gender": "male"}
  ]
}

JSON 데이터 처리 - 직렬화, 역직렬화

JSON 데이터는 자바스크립트를 이용하여 데이터를 자바스크립트 객체로, 자바스크립트 객체는 JSON 데이터로 손쉽게 변환할 수 있습니다.

서버로 부터 JSON 데이터가 전송되면 이 데이터는 문자열입니다. 이 문자열을 자바스크립트 객체로 변환해야 하는데 이를 객체의 역직렬화 (deserializing) 라고 합니다. 역직렬화는 다른 말로 “문자열을 파싱한다” 라고도 합니다.

역직렬화는 JSON 내장 객체의 parse() 메서드를 이용하며 그 후, 객체의 데이터에 접근해 페이지에서 사용할 HTML을 생성할 수 있습니다.

자바스크립트 객체에 저장된 데이터를 서버로 전송하기 위해서는 객체를 JSON 형식의 문자열로 변경 해야 합니다. 이 과정을 객체의 직렬화 (serializing) 라고 합니다.

직렬화는 stringify() 메서드를 이용하게 됩니다.

  • JSON.stringify() 메서드 : JavaScript Object —> JSON 데이터
  • JSON.parse() 메서드 : JSON 데이터 —> JavaScript Object

XML

XML (eXtensible Markup Language)은 HTML과 유사한 구조를 가진 마크업 언어입니다. XML 은 모든 종류의 데이터 형식을 기술하기 위한 마크업 언어로써 개발되어졌습니다.

유연한 데이터 타입을 기술 할 수 있어서 복잡한 데이터 표현이 가능며, HTML과 동일한 방식의 DOM 메서드를 이용해 데이터의 처리가 가능합니다.

하지만 태그 형식으로 데이터를 저장하므로 실제 데이터 이외의 문자들이 사용되며 데이터가 많아질 경우 많은 양의 대역폭을 소비하게 되는 단점도 있습니다.

<?xml version="1.0" encoding="utf-8" ?>
<users>
  <user>
    <name>Alice</name>
    <age>10</age>
    <gender>female</gender>
  </user>
  <user>
    <name>Bob</name>
    <age>42</age>
    <gender>male</gender>
  </user>
  <user>
    <name>Chris</name>
    <age>21</age>
    <gender>male</gender>
  </user>
</users>

HTML

HTML 역시 Ajax를 이용하여 페이지에 추가할 수 있습니다. 동적으로 HTML코드를 추가 할 수 있으나, 보안상의 문제가 크므로 브라우저는 동일한 도메인에서 HTML을 로드하는 경우에만 올바르게 HTML 데이터를 추가할 수 있습니다.

Javascript Ajax

웹 브라우저는 자바스크립트의 XMLHttpRequest 객체를 이용해 Ajax 요청을 처리하합니다. 객체를 이용해 서버에 요청을 전달한 후, 서버로 부터 응답을 받으면 동일한 XMLHttpRequest 객체가 전달받은 데이터를 처리하게 됩니다.

Ajax 요청하기

// XMLHttpRequest 객체의 인스턴스를 생성합니다.
var xhr = new XMLHttpRequest();

// open() 메서드는 요청을 준비하는 메서드입니다. (http 메서드, 데이터를 받아올 URL 경로, 비동기 여부)
xhr.open("GET", "data/test.json", true);

// send() 메서드는 준비된 요청을 서버로 전송하는 메서드입니다. (서버에 전달될 정보)
xhr.send("search=alice");

Ajax 응답 처리하기 - onload 방식

브라우저가 서버로부터 AJAX 응답을 받으면 onload 이벤트가 발생합니다. XMLHttpRequest 객체는 이벤트에 등록된 함수를 호출하여 데이터를 처리하게 됩니다.

xhr.onload = function () {
  // xhr 객체의 status 값을 검사한다.
  if (xhr.status === 200) {
    // 서버로 부터 받은 데이터를 처리할 코드
  }
}

이때 서버의 상태 메시지에 따라 필요한 처리를 할 수 있습니다.

서버의 상태 코드는 아래와 같습니다.

  • 200 : 서버가 응답을 정상적으로 처리
  • 304 : 응답 내용이 이전 응답 내용과 동일함
  • 404 : 페이지를 찾을 수 없음
  • 500 : 서버 내부 오류

Ajax 응답 처리하기 - onreadyStateChange 방식

var btn = document.getElementById('loadData');

btn.addEventListener('click', loadData, false);

function loadData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadyStateChange = function () {
    if (this.readyState === 4 && this.status === 200) {
      document.getElementById('panel').innerHTML = this.responseText;
    }
  };

  xhr.open("GET", "data/test.txt", true);
  xhr.send();
}

Ajax로 데이터 로드하기

var xhr = new XMLHttpRequest();

xhr.onload = function() {
  if (xhr.status === 200) {
    document.getElementById("content").innerHTML = xhr.responseText;
  }
};

xhr.open("GET", "data/data.html", true);
xhr.send(null);

설명

  1. XMLHttpRequest 객체의 인스턴스를 생성하고 xhr 변수에 저장합니다.

  2. open() 메서드는 요청을 보낼 준비를 합니다. 이때 세 개의 파라미터를 사용하게 됩니다.

    1. “GET” : 요청을 보낼 방법. “GET” 혹은 “POST”
    2. 응답을 받아올 페이지의 경로
    3. 요청이 비동기로 진행될 것인지를 지정. true는 비동기
  3. send() 메서드는 요청을 전송합니다. 만약 서버에 전달할 데이터가 있다면 파리미터로 전달합니다.
  4. 서버로부터 응답을 받으면 onload 이벤트가 발생하게됩니다. 이 이벤트에 정의한 익명함수가 실행됩니다.
  5. 조건식을 이용하여 서버의 상태를 확인하고 적절한 처리를 합니다.
SHARE