모던 자바스크립트 Deep Dive - 43장 Ajax

Ajax란?

• Asynchronous JavaScript and XML의 약자
• 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• 이전에는 html 태그로 시작해서 html 태그로 끝나는 완전한 html을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했기에 화면이 전환되면 서버로부터 새로운 html을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다.
• 이러한 방식때문에 화면 전환이 일어나면 화면이 깜빡이는 현상이 발생했다.
• Ajax의 등장으로 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.
• XML뿐만 아니라 JSON, HTML, 텍스트 등의 다양한 형식으로 데이터를 주고받을 수 있다.

JSON

• JavaScript Object Notation의 약자
• 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷

JSON 표기 방식

"name": "Kim",
"age": 28,
"alive":true,
"hobby":["football", "tennis"]

• JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트다.

JSON.stringify

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

JSON.parse

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