웹 기반의 비 동기적 통신
기술로, 웹 상에서 화면의 새로 고침(refresh)없이 빠르
게 화면 전환됨
웹 페이지 전체를 새로 읽지 않고, 소량
의 데이터만 전송함으로서 웹 페이지의 일부를 동적으
로 구현함이 가능하게 됨
웹 서버와 데이터를 주고받아 사용자가 페이지 이동 없
이 즉각적으로 원하는 기능을 수행할 수 있도록 하는 것
화면의변화없이 DB작업 요청과 처리 하는 것을보면 Ajax라고 생각하면됨
대표적인 적용 예
검색엔진이나 쇼핑몰의 자동완성 기능
구글맵
동기적 통신/비 동기적 통신
동기적 통신
-사용자가 어떤 행동을 취했을 경우(예:버튼 클릭) 그 요
청이 서버로 전달되어 처리되고 결과가 반환되어 오기
까지 다음 행동을 취하지 못하고 대기해야만 하는 것을
말함
-하나의 작업이 완료된 후에만 다음 작업을 진
행할 수 있는 구조
비 동기적 통신
-사용자가 버튼을 클릭한 뒤, 그 행동에 의한 결과를 기
다림 없이 다른 버튼을 클릭한다거나, 다른 입력 작업을
수행할 수 있다는 것
-사용자는 요청에 대한 응답이 돌아오지 않은 상태이더
라도, 기다림 없이 다른 작업을 진행할 수가 있음
-비 동기적 - 하나의 작업이 완료되지 않은 상태에서도
다른 작업을 얼마든지 시작할 수 있는 구조
Ajax 방식의 사이트 특징
사용자가 이벤트(버튼 클릭 등)를 발생시키면 자바스크립
트는 DOM을 사용해서 필요한 정보를 구한 뒤 XMLHttp 객
체를 통해서 웹 서버에 요청을 전달하게 됨
웹 서버는 XMLHttp로부터의 요청을 알맞게 처리한 뒤, 그
결과를 XML이나 단순 텍스트, JSON으로 생성해서
XMLHttp에 전송함
서버로부터 응답이 도착하면 XMLHttp는 자바 스크립트에
도착 사실을 알리게 되고, 자바 스크립트는 응답 데이터와
DOM을 조작해서 사용자 화면에 반영함
Ajax와 기존 방식과 차이점
웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 텍스트, JSON
서버와 클라이언트 입장
Ajax - 서버에서는 전체 HTML을 반환해주는 페이지가 아닌 특정
기능을 수행한 결과만을 텍스트나 JSON, XML로 반환하는 페이지
가 필요함
Ajax의 동작 방식은 딱 필요한 데이터만을 가져와 화면에
반영하므로, 네트워크의 트래픽을 감소
데이터 전송 형식
[1] CSV(Comma Separated Values) 형식
각 항목을 쉼표로 구분해 데이터를 표현하는 방법
CSV 형식은 가독성이 떨어짐
홍길동, hong, 20
김길동, kim, 25
이길동, lee, 29
[2] XML 형식
CSV 형식은 각각의 데이터가 무엇을 나타내는지 알기 힘들다
XML은 HTML 처럼 태그로 데이터를 표현함
각각의 데이터가 어떠한 것을 의미하는 지 알 수 있다
[3]JSON(Javascript Object Notation) 형식
CSV 형식과 XML 형식의 단점을 극복한 형식
자바스크립트에서 사용하는 객체 형태로 데이터를 표현하는 방법
Ajax를 사용할 때 거의 표준으로 사용되는 데이터 표현 방식
CSV 형식과 달리 데이터의 가독성이 좋고, XML 형식보다 적은 용량으로 데이터를 전달할 수 있다
단점 - 데이터의 양이 아주 많아지면 데이터 추출 속도가 현저하게 떨어짐
자바스크립트에서 사용할 수 있는 객체이나
제약사항이 있다
- JSON 에는 객체, 배열, 문자열, 숫자, boolean,
null 만 들어갈 수 있다
- 문자열은 무조건 큰 따옴표를 사용해야 함