09.14(Ajax)

Ajax

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법으로 비동기식 요청을 보내는데 필요한 기술을 말함

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음

 

 

동기식

동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이함
만약 서버에서 호출된 결과까지의 시간이 지연이 생길 경우 웹에서는 아무런 작동 없이 기다려야함 
새로운 콘텐츠를 추가, 불러오기 위해서는 페이지를 리로드 하거나 이동해야함

설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 함

 

 

비동기식

페이지 리로딩 없이, 동기식의 서버요청 사이사이 추가적인 요청과 처리가 가능

동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있음

 

 

Ajax의 장점

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음

2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음

3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있음

 

 

Ajax의 한계

1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없음

2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없음

3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없음

4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없음

 

 

Ajax처리 절차

1. script문에 요청을 위한 XMLHttpRequest 객체 생성
2. 서버에 응답을 처리할 함수 생성 및 지정
* onreadystatechange에 함수 지정
3. open메소드로 요청할 방법 및 요청할 대상(Server) 선정
* 요청메소드, 요청주소, 동기/비동기 설정, 아이디, 패스워드 설정
4. send메소드로 대상(Server)에 전송
* post일때 파라미터 값 설정 / get 일때는 매개변수 없음 
5. 응답상태에 따라 상태 확인
* readyState(데이터응답) / status(처리결과) 값을 이용
6. 응답완료 responseText / responseXML 이용 응답처리

 

 

주요 속성

속성	설명
accept	파라미터의 타입을 설정(사용자 특화 된 파라미터 타입 설정 가능)
async	서버와의 비동기 처리 방식 설정 여부(기본값 true)
beforeSend	ajax 요청을 하기 전 실행 되는 이벤트 callback 함수(데이터 가공 및 header 관련 설정)
cache	요청 및 결과값을 scope에서 갖고 있지 않도록 하는것(기본값 true)
complete	요청 완료 후 실행되는 메소드(성공, 에러 이 후에 무조건 실행)
contents	jquery 에서 response의 데이터를 파싱하는 방식 정의
contentType	request의 데이터 인코딩 방식 정의,(보내는 측의 데이터 인코딩)
context	ajax 메소드 내 모든 영역에서 사용 가능한 값
converters	object가 포함되었을때 파싱 방식 정의
crossDomain	타 도메인 호출 가능 여부 설정 (기본값 false)
data	요청 parameter 설정
dataFilter	response를 받았을때 정상적인 값을 return 할수 있도록 데이터와 데이터 타입 설정
dataType	서버에서 response 오는 데이터의 데이터 형 설정, 값이 없다면 스마트하게 판단함 xml - 트리 형태의 데이터 구조 json - 맵 형식의 데이터 구조(일반적인 데이터 구조) script - javascript 및 일반 string 형태 데이터  html - html태그 자체를 return 하는 방식 text - string 데이터
error	ajax통신에 실패했을 때 호출될 이벤트 핸들러
global	기본 이벤트 사용 여부(ajaxStart, ajaxStop)(버퍼링 같이 시작과 끝을 나타낼때, 선처리 작업)
method	서버 요청 방식(GET, POST, PUT) 기본값 GET
password	서버에 접속 권한(비밀번호)가 필요한 경우
processData	서버로 보내는 값에 대한 형태 설정 여부(기본데이터를 원하는 경우 false 설정)
success	ajax통신에 성공했을 때 호출될 이벤트 핸들러
timeout	서버 요청 시 응답 대기 시간(milisecond)
url	요청 할 server의 url