[3기 강남 백정의] Jquery를 활용한 ajax 활용 및 crossdomain

jQuery는 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었고 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인 되었습니다. (위키피디아 참조 : http://ko.wikipedia.org/wiki/JQuery)

이 중에서 jquery를 이용하여 ajax를 구현하고 사용하는 방법을 소개해봅니다.

기존 방식에서는 브라우저 마다 해당 객체를 생성하고 요청 된 상태를 체크(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete) 완료 되었을 경우 서버로부터의 HTTP 상태를 다시 체크하여 (예 200(Success), 404(NOT Found), 202(결과 값 없음) 등) 결과 값을 사용하는 방식 이었습니다.

기존 방식을 jquery를 이용하여

이와 같은 방식으로 쉽게 사용할 수 있습니다. 

type과 url을 지정하고 dataType을 지정합니다. data는 개발자의 편의에 맞게 만들고 cotentType은 설정하지 않아도 default 세팅이 되어 있습니다. 성공,에러,시작,완료로 나눠서 필요한 function을 지정해둡니다. 또한 전달 받은 XML같은 경우 Jquery를 활용하여 매우 쉽게 파싱할 수 있습니다.

이제 Form태그에 있는 데이터를 활용하는 방법을 보겠습니다.

다음과 같은 Form태그가 있을 경우

jquery에 serialize function을 활용하여 form태그 안 데이터를 쉽게 제어할 수 있습니다. 쉽게 submit할 수 있습니다. 하지만 위 form태그에는 file태그가 있는데 이 경우에는 plug-in이 javascript가 필요합니다.

jquery plug-in중에서 jquery.form 을 이용하여 다음과 같이 file에 있는 값도 쉽게 전송할 수 있습니다.

다음과 같이 data를 serialize function을 사용하지 않고 ajaxForm이라는 library function을 활용하여 바로 submit 할 수 있습니다.

이렇게 할 경우 form태그에 있는 값을 문제없이 전송할 수 있고 쉽게 ajax를 사용할 수 있지만 보통의 작업을 할 경우 crossdomain 문제가 발생합니다. script 상에서 여러 서버와 통신 하는 것이 보안상 바람직하진 않지만 매시업 서비스 등을 빠르게 개발할 수 있고 독립적인 작업이 가능하다는 장점이 있습니다.

이에 Flash를 활용하여 서버에 xml파일을 올려두고 Flash와 Javascript간에 통신을 활용하는 등의 여러 방법이있지만 jquery에서 JSONP를 통한 방법을 쉽게 활용할 수 있는데

이와 같이 dataType을 "JSONP"로 해두고 서버쪽에서 

예) jsonp1271738777234({"data1":"123","data2":"123"}) 

이러한 형식으로 데이터를 처리할 경우 crossdomain 문제 없이 개발 할 수 있습니다.

참조: www.jquery.com , http://malsup.com/jquery/form/