위로
아래
이론
Ajax (Asynchronous JavaScript and XML)
- 비동기식 자바스크립트와 xml
- 자바스크립트를 이용하여 비동기 식으로 서버와 통신한다.
- 동적 웹페이지를 만들기 위한 개발 기법
- 웹 페이지 전체를 다시 로딩하지 않고, 웹페이지의 일부분만을 갱신.
- 서버와 JSON, XML, HTML, 텍스트 파일등을 주고 받는다.
- xml은 무거워서 잘 안 쓴다.
- json은 키-밸류 형태로 텍스트로만 정보를 주고 받아서 가볍다.
- 클라이언트 풀링 방식을 사용.
- 클라이언트 풀링(client pooling) : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
- 서버 푸시(server push) : 사용자가 요청하지 않아도 서버가 자동으로 정보를 제공하는 방식
비동기 통신
- 동기 통신 : 버튼 누르면 신호가 가는 것
- 비동기 통신 : 우리가 모르는 사이에 기계 안에서 신호가 오가는 것
- 자동완성처럼, 검색을 누르지도 않았는데 글자만 조금 치면 추천 검색어 막 보여주는 게 비동기통신. 버튼을 누르지 않아도 데이터베이스에 계속 왔다갔다 하면서 정보를 주는 것이다.
- 새로고침 안 하고 정보를 가져온다.
프레임워크
- Prototype
- script.aculo.us
- dojo
- jQuery
Ajax 구성
- HTML, CSS : 웹페이지 표현
- DOM 모델 : 데이터 접근, 화면 동적 조작
- JSON or XML : 데이터 교환
- XMLHttpRequest 객체 : 웹 서버와 비동기식 통신
Ajax 동작 원리
- 사용자 : 요청 발생
- 이벤트 핸들러 : 자바스크립트 호출
- 자바스크립트 : XMLHttpRequest 객체를 사용해 서버로 요청 보냄
- 서버 : 전달 받은 XMLHttpRequest 객체를 가지고 Ajax로 요청을 처리
- 서버 : 처리한 결과를 HTML or XML or JSON 데이터의 형태로 웹브라우저에 전달
- 자바스크립트 : 서버로부터 전달받은 데이터를 가지고 웹페이지의 일부분만을 갱신
- 사용자 : 새로고침 없이 웹페이지의 일부분만 요청 처리로 표시
XMLHttpRequest 객체
특징
- Ajax에서 웹 브라우저가 서버와 데이터를 교환할 때 사용
- 대부분의 웹 브라우저는 XMLHttpRequest 객체를 내장하고 있다.