Ajax란?
- Asynchronous JavaScript and XML의 약자
- JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식
- 데이터 형식은 XML 뿐만 아니라 Text, HTML, JSON, CSV등 다양한 형식 사용 가능
* 동기식 데이터 통신 *
- 클라이언트가 서버로 데이터를 요청하면 응답이 올 때 까지 다른 작업은 대기
* 비동기식 데이터 통신 *
- 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능.
추후 요청에 대한 응답이 오면 응답에 관련된 작업을 진행.
Ajax 특징
- 전체 페이지를 갱신하지 않고 일부분만 업데이트 가능
- 사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공 가능
- ActiveX나 플러그인 프로그램 설치 없이 이용 가능
- JavaScript 방식, jQuery 방식으로 구현 가능
Ajax 단점
- Ajax는 JavaScript 이므로 브라우저에 따른 크로스 브라우저 처리가 필요함
- 오픈 소스로 차별화가 어려움
- 연속적인 데이터 요청 시 서버 부하 증가하여 페이지가 느려짐
- 페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움
JavaScript 방식 Ajax
- Ajax는 브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함
1) 객체 생성 -> script문에 요청을 위한 XMLHttpRequest객체 생성
2) 서버 응답 처리 함수 생성 및 지정 -> onreadystatechange에 함수 지정
- 지정되는 함수에 포함될 내용
1) 응답 상태 확인 -> readyState(서버 응답 상태 확인), status(Http 응답 상태 코드 확인)
2) 응답 완료(서버 응답 데이터 접근) -> responseText / responseXML
3) 요청 방식, 대상(서버), 동기/비동기 지정 -> open( ) 메소드 호출
4) 대상(서버)에 전송 -> send( ) 메소드 호출
jQuery 방식 Ajax
- 장점
1) JavaScript 방식보다 구현 방법이 간단함 -> 코드 길이 감소
2) 직관적이며 다양한 방법의 코딩 가능
3) 크로스 브라우저 처리를 jQuery가 자동으로 해결
-> JavaScript 방식 XMLHttpRequest 객체 생성 시 브라우저 검사 생략 가능
- 구현 방법
$.ajax({
url : "요청이 전송되는 url이 포함된 문자열" // 필수 구현 속성
[,settings] // 선택 속성(다수 속성 선택 가능)
});
- jQuery 방식 Ajax 주요 속성
