브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 브라우저에 화면 갱신이 발생한다. 이것은 브라우저와 서버 사이의 통신에 의한 것이다.
전통적인 방식:
서버는 요청받은 페이지(HTML)를 반환하는데, 이때 HTML에서 로드하는 CSS나 JS파일들도 같이 반환된다. 클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다.
어쨌든 중요한 것은 서버로부터 웹페이지가 반환되고 클라이언트(브라우저)측에서는 이를 렌더링하여 화면에 표시한다는 것이다.
Ajax 방식:
**Ajax(Asynchronous JavaScript and XML)**는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있도록 한 통신 방식을 의미한다.
기존의 방식과는 다르게 페이지 전체를 로드하여 렌더링 하는 것이 아니라, 갱신이 필요한 일부만 로드하여 동일한 효과를 볼 수 있도록 하는 것이 Ajax이다. 따라서 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.
페이지를 리로드 하는 대신 DOM Manipulation을 하는 것을 주목
JSON(JavaScript Object Notation)은 클라이언트와 서버 간 데이터 교환을 위한 포맷으로, 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능하며 XML 포맷보다는 가볍고 간편하며 가독성이 좋다.
JSON의 생김새는 JS객체 리터럴의 모습과 매우 흡사하지만, JSON은 순수한 텍스트로 구성되는 규칙이 있다는 차이점을 가지는 데이터 구조이다.
{
"name": "Lee",
"gender": "male",
"age": 20,
"alive": true
}
또한 JSON의 key는 반드시 큰따옴표(작은따옴표 x)로 둘러싸야 한다.
JSON.stringify 메소드는 JS 객체(object)를 JSON형식의 문자열로 변환하여 반환하는 메소드이다.
JSON.stringify와 반대로, JSON 데이터를 가진 문자열을 JS 객체로 변환하여 반환하는 메소드이다.
stringify와 parse는 둘다 JSON형식의 문자열로 변환되어 있는 배열도 변환할 수 있다는 특징이 있다.
브라우저는 XMLHttpRequest객체를 이용하여 Ajax요청을 생성하고 전송한다.
서버가 브라우저의 요청에 대해 반환하는 응답 역시 같은 XMLHttpRequest객체가 처리한다고 한다.