Ajax

개념

• Asynchronous JavaScript and XML의 약어
• 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 기법
• 브라우저의 Web API 중 하나인 XMLHttpRequest 객체를 기반으로 동작

역사

• 1999년 마이크로소프트가 XMLHttpRequest를 개발
• 큰 주목을 받지 못하다가 2005년 구글 맵스에서 자바스크립트와 Ajax의 가능성 확인
  * 웹 브라우저에서 데스크톱 애플리케이션 못지않은 퍼포먼스와 부드러운 화면 전환을 보여줌

이전과 비교

이전 웹 페이지는 화면이 전환되면 전체 HTML을 서버로부터 전송받아 웹 페이지 전체를 다시 렌더링했다.

이전 방식의 단점

• 변경될 필요가 없는 부분도 매번 다시 요청 => 불필요한 데이터 통신 발생
• 전체 페이지를 매번 다시 렌더링 => 화면 전환 시 순간적인 화면 깜박임 현상 발생
• 동기적 방식으로 요청 => 클라이언트의 요청 후 서버에서 응답이 올 때까지 다른 작업 블로킹

Ajax의 등장 이후에는 이러한 단점들이 획기적으로 개선되었다.

Ajax의 방식

• 서버에서 필요한 데이터만 전송받아 변경이 필요한 부분만 변경
• 전체 페이지를 매번 전부 받을 필요가 없고 화면 깜박임 현상도 사라짐
• 비동기 방식으로 요청하여 Http 통신이 진행되는 와중에도 다른 작업이 블로킹되지 않음

Ajax를 통해 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 퍼포먼스와 부드러운 화면 전환이 가능해졌다.

JSON

개념

• JavaScript Object Notation의 약어
• 클라이언트와 서버 간 HTTP 통신을 위한 텍스트 데이터 포맷
• 이름과 달리 자바스크립트에 종속되지 않고 대부분의 프로그래밍 언어에서 사용 가능

표기 방식

• 키(key)와 값(value)으로 구성
• 키는 반드시 큰따옴표("")로 묶어야 함
• 값은 모든 자료형이 올 수 있으나 문자열은 큰따옴표("")로 묶어야 함

직렬화 & 역직렬화

JSON.stringify

• 클라이언트가 서버로 객체를 전송하려면 객체를 문자열로 바꿔야 함 (= 직렬화)
• 객체를 JSON 형태의 문자열로 변환하는 메서드 (객체에 배열도 포함)

JSON.parse

• 서버로부터 클라이언트에 전송된 JSON 형태의 문자열 데이터를 자바스크립트에서 객체로 사용하려면 문자열을 객체로 바꿔야 함 (= 역직렬화)
• JSON 형태의 문자열을 객체로 변환하는 메서드