Ajax 비동기 통신과 JSON

Ajax (Asynchronous JavaScript and XML)

예전에는 서버에서 매번 새로운 페이지를 내려준 후에 클라이언트가 렌더링해서 보여주었습니다.

그러나 거의 10년 전부터는 데이터의 수신을 다 기다리지 않고, 필요한 부분의 데이터만 가져와 바로 다른 작업을 실행합니다.

이에 따라 불필요한 페이지의 로딩을 기다리지 않아 웹 속도를 빠르게 하여 UX 향상에 도움이 됩니다.

화면에 영향을 주지 않고(새로고침하지 않고) 데이터를 서버에서 가져오는, 즉 비동기적으로 가져오는 방법을 의미합니다.

 

JSON (Javascript Object Notation)

JSON은 데이터 구조 형식입니다. 자바스크립트의 오브젝트(객체)처럼 키와 밸류가 쌍으로 묶여져 있는 표기법입니다.

{
	blog: "minimal dev",
    category: "IT",
    language: ["html5","css","js","react"]
}

서버와 클라이언트가 데이터를 주고 받을 때 어떤 포맷의 데이터를 주고 받을 지 약속이 있어야 합니다. 데이터의 이름, 데이터가 여러 개일 땐 어떻게 할 지 등등에 관한 약속으로 포맷이 XML, Plaint Text, JSON이 있습니다. 예전에는 주로 XML을 사용했으나 사실상 요즘은 JSON이 대표적입니다. Ajax의 x가 XML을 의미하지만 이젠 사용하지 않기에 팥 없는 찐빵같은 느낌이 있습니다.

 

JSON과 XML 차이

• XML은 HTML기반의 마크업 언어로 시작태그,종료태그가 존재하나 JSON은 종료태그가 없다.
• JSON 문법은 더 짧고, 배열 사용이 가능하다.
• XML은 XML 파서로 파싱, JSON은 js 표준 함수인 eval()로 파싱된다.

// XML
<tistory>
	<blog>minimal-dev</blog>
    <category>IT</category>
</tistory>

// JSON
{
	"blog": "minimal-dev",
    "category": "IT"
}

 

XHR(XMLHttpRequest)

자바스크립트에서 Ajax 통신을 요청하기 위해 사용하는 사용하는 객체입니다.

var oReq = new XMLHttpRequest(); // ajxa 요청을 보낼 xhr 객체 생성 (이 객체는 window 아래에 위치)

oReq.addEventListener("load", function() {
  console.log(this.responseText); // responseText는 서버에 요청하여 받은 데이터를 문자열로 반환
});

oReq.open("GET", "./json.txt"); // 메소드와 주소 설정
oReq.send(); // 요청을 서버에 전송

 

실습하기

1. test.html을 생성하여 xhr 스크립트를 작성합니다.

test.html

2. json.txt 파일을 생성하여 테스트 데이터를 작성합니다.

json.txt

3. 브라우저에 띄워보면 콘솔에 CORS 에러가 나타납니다. 서버를 간단하게 연결해 보겠습니다.

 

4. vscode 기준으로 마켓플레이스에서 live on server을 다운받습니다. 

 

5. test.html 우클릭 > open with live server 하면 에러창이 나타나지 않고 데이터가 콘솔에 노출됩니다.

 

참고

부스트코스 - Ajax 통신의 이해

TCP school - JSON과 XML

MDN Web docs - Using XMLHttpRequest