한 걸음씩 기록하며

[JSON & Ajax] 개념 간단 정리 본문

JavaScript & Node.js

[JSON & Ajax] 개념 간단 정리

Haksae 2022. 2. 6. 16:40

1. JSON

JSON이란 Javascript Object Notation의 약자이다. 직역하면 자바스크립트 객체 표기법이다. JSON은 실제로 객체 표기법을 위해 만들어졌지만, 지금은 경량화된 파일 형식으로 쓰이고 있다.
  • 복잡한 파일 형식은 파일 교환에 비효율적이기에, JSON은 파일 교환에 많이 사용된다.
  • Ajax와는 별도의 개념이지만, JSON은 Ajax라는 서버와의 교신 방식에 짝꿍처럼 같이 쓰이고 있다.

 

  • 일반적인 자바스크립트의 객체 형식은 다음과 같다.
let jsObj = {
	name: "haksae",
    age: 20
    nation: "korea"
}
  • 그러나 이를 JSON은 다음과 같은 형식으로 표기한다.
    • 이러한 경량화된 파일 형식은 데이터 통신에 이점을 가진다.
{"name": "haksae",
 "age": 20
 "nation": "korea"}

 

2. Ajax

Ajax는 Asynchronous Javascript and Xml의 약자이다. 번역하자면 비동기적 자바스크립트와 xml 이다.
  • 비동기적이라는 말은 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포한다고 할 수 있다.
  • Ajax는 대부분 서버에 요청을 하고 그에 대한 응답을 받게 되면 성공이나 실패 등에 따라서 함수가 실행되기에, 함수가 먼저 실행되는 것이 아니라 서버의 응답을 받은 후 실행되는 것이다.
  • 자바스크립트를 통해 Ajax를 사용하는데, 자바스크립트는 원래 브라우저에서 시작한 언어여서 서버와 교신하는 기능이 없었지만, 현재는 Ajax를 서버와 통신하는데에 사용하고 있다.
  • XML은 데이터 형식의 일종으로서, Ajax를 통해 주로 주고 받는 형태가 XML이나 JSON 형태의 파일이다.

 

  • 왜 Ajax를 사용할까?
    • html 프로토콜은 클라이언트에서 request를 보내고, 클라이언트가 서버의 response를 받으면 연결이 끊기게 설계되어있다. 즉 화면의 내용을 갱신하기 위해서는 위의 작업을 다시 거쳐야한다.
    • 그러나 페이지 내용의 일부만 업데이트 하려고 한다면, 위의 방법은 매우 비효율적이다.
    • 바로 Ajax가 이를 해결해준다. Ajax는 html 페이지 전체가 아니라, 필요한 부분만을 갱신할 수 있도록 XMLHttpRequest 객체를 통해 요청한다.
    • 이러한 요청에 따라 서버로부터 JSON이나 XML 형태로 최소한의 데이터만 받아서 갱신하게 됨으로서, 효율적인 서비스 구현을 가능하게 해준다.
Comments