Ajax 이해하기 part 1

Ajax 이해하기

 

일반적인 서버와의 통신이해

Tomcat서버 설치하고 실습을 진행

 

JSP를 이용하여 소스코드 작성

 

 

실행

 

텍스트박스에 값을 입력하고 전송으로 누르면 서버로 데이터가 전송되며

Tread.sleep(3000) 3초간 서버가 슬립(요청을 처리하는 시간을 가정)

그리고 페이지 전체가 새로고침되며 응답 내용이 브라우저에 출력된다.

 

서버의 처리결과를 기다리는 중(3초)

다른 작업을 할 수 없음.

 

처리결과 표현됨(페이지 전체가 Refrash)

 

 

위와 비교하여 Ajax를 이용하여 비동기 통신을 구현했을 때 동작을 확인한다.

필요한 요소는 다음과 같다.

- 클라이언트에서 동작하는 파일(HTML) 요청과 응답에 사용될 HTML페이지

- 서버에서 동작되는 파일(이 예제는 JSP 페이지)

 

클라이언트의 브라우저 소스코드 작성(HTML)

 

소스코드 간단 설명:

1. 전송 버튼을 눌리면(onclick 이벤트 발생) asyncSend() 함수 호출

 

2. asyncSend()함수는 getXHR()함수를 호출하여XMLHttpRequest객체 생성

open(METHOD, URL [, 동기여부 [, 사용자명 [, 패스워드]]]

 

3. 생성된 객체에 Ajax를 사용할 때 필요한 정보를 세팅

onreadydstatechange( 콜백함수 )

open('메소드', '요청URL 및 데이터', 동기여부(true:비동기, false:동기) )

send()요청(두 가지 방식)

send(null) : GET방식일 때 open에서 요청경로와 데이터를 지정

send(요청경로) : POST방식일 때 open으로 요청 URL만 지정하고

setRequestHeader('content-type', '요청형태 및 문자셋')을 지정한다.

그리고 send(매핑 값, encodeURIComponent(값))을 지정

 

위 요청 부분 코드를 POST방식으로 바꾼다면 다음과 같음

req.open('POST, 'helloAjax.jsp', true);

req.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=utf-8');

req.send('name=' + encodeURIComponent(document.fm.name.value);

 

 

 

open함수가 요청할 서버의 페이지 작성(JSP)

 

페이지 실행

 

값을 입력하고 전송을 누르면

통신 중...이라는 문자열이 표시되고 서버는 처리를 진행(Thread.sleep(3000))

처리되는 동안 페이지가 그대로 보여짐(다른 작업이 가능)

 

 

서버의 처리가 끝나면 응답 결과가 페이지에서 지정된 부분에 표현됨.

(부분적 Refrash)

 

처음 예제의 동작과 두 번째 Ajax를 이용한 동작의 차이를 이해하도록 한다.

 

주의!

일반적으로 보안상의 이유때문에 XMLHttpRequest.open메서드는 다른 도메인의 자원을 지정할 수 없음(크로스도메인 지정 불가)

사용하는 브라우저에 따라 도메인을 명시하더라도 처리가 안될 수 있으므로 주의

open함수의 URL은 반드시 상대경로로 지정할 것

 

Ajax 이점

1. 조작성 개선

- 페이지 깜빡임 해소

- 서버가 처리중에도 클라이언트는 다른 작업이 가능(비동기)

 

2. 퍼포먼스 향상

- 페이지의 필요한 정보만을 받아서 갱신(통신량 감소)

- 서버의 처리가 종료될 때까지 클라이언트가 기다릴 필요 없음

 

3. 개발 생산성/운용성 향상

- 고품질의 사용자 인터페이스를 표준 기술만으로 구축이 가능

- 별도의 플러그인이 필요 없음

 

현재 티스토리의 자동저장 기능도 Ajax를 활용하는 개념

 

XMLHttpRequest에서 사용가능한 멤버

(*은 읽기 전용, **은 send메서드 결과 성공 시 유효)

분류	멤버	설명
프로퍼티	onreadystatechange	통신상태가 변경 시 호출 이벤트 핸들러
	*readyState	HTTP 통신 상태 취득
	*status	HTTP 상태 코드 취득
	*statusText	HTTP 상태 상세 메시지 취득
	*responseText	응답 본체를 평문으로 취득
	*responseXML	응답 본체를(XML)형식으로 취득
메서드	abort()	현재 비동기 통신 중단
	**getAllResponseHeaders()	수신한 모든 HTTP응답 헤더 취득
	**getResponseHeader(header)	지정한 HTTP응답 헤더 취득
	open(...)	HTTP 리퀘스트 초기화
	setRequestHeader(header, value)	리퀘스트 전송 시 헤더 추가
	send(body)	HTTP 리퀘스트 전송

 

readyState값

반환 값	설명
0	미초기화(open 호출 전)
1	로드 중(open 호출 후. send호출 전)
2	로드 완료(send 호출 후, 응답 상태(status) 및 헤더는 얻기 전)
3	일부 응답 얻음(응답 상태(status) 및 헤더만 얻음. 본체(body 얻기 전)
4	모든 응답 데이터(body까지) 얻음

 

status값

반환 값	설명
200	OK(성공)
401	Unauthorized(인증 필요)
403	Forbidden(엑세스 거부)
404	Not Found(페이지 찾을 수 없음)
500	Internal Server Error(서버 내부 에러)
503	Service Unavailable(서버 사용 불가)