TIL - AJAX란 무엇인가?

오늘은 AJAX에 대해 알아보겠습니다.

 

 

 

 

 

 AJAX (Asynchronous Javascript And XML) 

• 직역하면 비동기 자바스크립트와 XML
• 자바스크립트를 통해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기법 또는 방식을 의미합니다.
• 자바스크립트에서는 axios, fetch 함수를 생각하면 쉽습니다.
• Javascript를 이용해서 XML(또는 JSON, text 기타 등등)을 비동기 통신하면 그게 AJAX라고 볼 수 있습니다.

자 그럼 단어 하나하나의 의미를 먼저 알아봅시다.

 

 

 

---

 

 

 비동기 (Asynchronous, 동시에 일어나지 않는) 

비동기는 요청과 결과가 동시에 일어나지 않을 것이라는 약속입니다.

이미지 출처 : https://velog.io/@matisse/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0

 

이러한 방식은 페이지 리로드가 일어나지 않고 데이터를 불러올 수 있으며,

AJAX를 통해 서버에 요청을 한 후에 멈춰있는 것이 아닌 계속 다른 작업이 실행될 수 있습니다.

 

이미지, 스크립트, 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만

비동기 방식을 이용하게 되면 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

 

 

 

---

 

 

 

 XML (Extensible Markup Language) 

W3C에서 개발된, 다목적 마크업 언어입니다.

많은 종류의 데이터를 기술하는 데 사용할 수 있습니다.

 

---

선언은

<?xml version="1.0" encoding="UTF-8" ?>

로 시작하고 다음과 같은 특징을 갖습니다.

 

XML의 특징

• 모든 요소는 종료 태그를 가져야 합니다. (생략시 오류 발생)
• 대소문자를 구분합니다. (다르면 다르게 인식)
• 띄어쓰기를 인식합니다.

---

XML 예시

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<note>
  <date>
    <day>07</day>
    <month>01</month>
    <year>2021</year>
  </date>
  <tistory>
    <title>XML은 무엇인가</title>
    <writer>annajang</writer>
  </tistory>
  <remark>
    <![CDATA[  CDATA부분에는 < > & " 등과 같은 문자를 그대로 표현할 수 있다  ]]>
  </remark>
 </note>

 

 

 

 

---

 

 

 AJAX 방식 

 

네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받는 방식입니다.

이를 사용하는 이유는 필요한 데이터만 요청하고 페이지 전체를 새로고침하지 않기 위해서 입니다.

---

기본적으로 HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 연결이 끊어집니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 Request하고 Response하여 페이지를 갱신하게 되는데, 이렇게 될 경우 엄청난 오버헤드가 발생합니다.

---

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청하고 JSON이나 XML 형태로 필요한 데이터만 받아서 갱신하게 됩니다.

(XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다)

 

 

간단한 예시를 들어보겠습니다.

 

이미지 출처 : https://velog.io/@corone_hi/Ajax-JSON-XMLHttpRequest

변경될 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생합니다.

즉, 변경할 필요가 없는 부분까지 처음부터 다시 렌더링되죠. 이로 인해 화면 전환이 일어나고 순간적으로 깜박이는 현상이 발생해서 UX적으로도 좋지 않죠.

클라이언트와 서버와의 통신이 동기 방식이기 때문에 서버로부터 응답이 있을 때까지 클라이언트는 블로킹 됩니다.

 

---

추억의 옛 웹페이지 예시...

 

이미지 출처 : https://m.ppomppu.co.kr/new/bbs_view.php?id=freeboard&no=6611420

 

 

---

 

오늘날 웹페이지

 

 

---

 

 

AJAX의 장점

 

• 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않습니다.
• 변경할 필요가 없는 부분은 렌더링하지 않기 때문에 깜빡임 현상이 발생하지 않습니다.
• 또한 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않습니다.

 

실제로는 XML은 AJAX에서 잘 쓰이지 않게 되었는데 그 이유는 데이터 전송 흐름의 트렌드가 XML에서 JSON으로 넘어왔기 때문입니다. (요즘은 잘 안 쓰이는 정도가 아니라 쓰지 않는...)

 

 

 

 

---

 

 

 XMLHttpRequest ? 

위에서 봐서 알 수 있듯이 AJAX는 굉장히 넓은 개념임을 알 수 있습니다.

그래서 여러 서브파티 라이브러리도 존재하구요.

그러나 이 모든 서브파티 라이브러리도 깊게 들어가면 딱 한 가지 방식을 사용하는데,

그 태초적인 방식이 바로 XMLHttpRequest입니다.

---

간단한 예시 코드

const xhr = new XMLHttpRequest();
const formData = {'age': 29, 'lang': 'JS', 'name': 'sungheon'};
xhr.onreadystatechange = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200 || xhr.status === 201) {
            console.log(xhr.responseText);
        } else {
            console.error(xhr.responseText);
        }
    }
};
xhr.open('POST', 'http://localhost:3000/single-json');
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(formData));

• XMLHttpRequest.onreadystatechange 
  • Response가 클라이언트에 도달하여 발생된 이벤트를 감지하고 콜백 함수를 실행하여 줍니다.
• XMLHttpRequest.open 
  • 서버로의 요청을 준비합니다.
• XMLHttpRequest.setRequestHeader
  • HTTP Request Header의 값을 설정합니다.
• XMLHttpRequest.send
  • XMLHttpRequest.send 메소드로 준비된 요청을 서버에 전달합니다.

 

 

---

 

 

 

 JSON (JavaScript Object Notation) 

• 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
• 자바스크립트에 종속되지 않습니다. (대부분의 프로그래밍 언어에서 사용 가능)

---

표기 방식

자바스크립트 객체 리터럴과 유사하게 키-값으로 구성된 순수한 텍스트입니다.

키는 반드시 큰 따옴표로 묶어야 합니다.

{
    "age": 27,
    "lang": "JS",
    "name": "woongil"
 }

---

JSON.stringify

 

• 객체를 JSON 포맷의 문자열로 변환하는 메서드입니다.
• 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 합니다.

const obj = {
    "age": 27,
    "lang": "JS",
    "name": "woongil"
 };

const json = JSON.stringify(obj);

//결과값
'{"age":27,"lang":"JS","name":"woongil"}'

 

• 객체 뿐만아니라 배열도 JSON 포맷의 문자열로 변환하여 줍니다.

const gods = [
  { id: 1, age: 27, lang: "JS", name: "woongil"},
  { id: 1, age: 29, lang: "Java", name: "sungheon"}
]

const json = JSON.stringify(gods);

//결과값
'[{"id":1,"age":27,"lang":"JS","name":"woongil"},{"id":1,"age":29,"lang":"Java","name":"sungheon"}]'

---

JSON.parse

 

• JSON 포맷의 문자열을 객체로 변환하는 메서드입니다.
• 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이기 때문에 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(deserializing)라 합니다.

const objStr = '{"age":27,"lang":"JS","name":"woongil"}'

const parsed = JSON.parse(objStr);

//결과값
 {
    age: 27,
    lang: "JS",
    name: "woongil"
 };

 

 

---

 

 

 

 

Q. AJAX 통신을 위해 서버가 해야하는 역할은 무엇일까요?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ko.wikipedia.org/wiki/XML

XML - 위키백과, 우리 모두의 백과사전

www.tcpschool.com/xml/xml_intro_basic

코딩교육 티씨피스쿨

https://kamang-it.tistory.com/entry/RESTfulajaxajax%EB%9E%80-XMLHttpRequest%EC%82%AC%EC%9A%A9%EB%B2%95-1

[RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1)

https://velog.io/@corone_hi/Ajax-JSON-XMLHttpRequest

Ajax, JSON, XMLHttpRequest