HS LOG의 100번째 포스트입니다.
100개의 포스트를 작성한다는게 어렵지 않을 것이라고 생각했었는데
꽤 많은 시간이 걸렸던 것 같습니다.

100번째임을 가볍게 축하하며 포스팅을 시작합니다.
이번 포스트의 주제는 자바스크립트 프레임웍인
jQuery와 prototype을 이용한 AJAX(Asynchronous JavaScript and XML) 입니다.

AJAX에 대한 설명은 위키피디아의 링크로 대신하겠습니다.
//ko.wikipedia.org/wiki/Ajax

AJAX를 프레임웍 없이 순수한 자바스크립트를 이용해서 만들 경우,
프로그래머는 복잡한 코드에 의해 부담을 가질 수 있게 됩니다.

물론 직접 AJAX를 함수화, 클래스화 하여 구현할 수 있으나
jQuery 나 prototype 와 같이 많은 전문가들이 참여한 널리 알려진 프레임웍을 사용하게 되면
웹 표준을 생각하지 않고, AJAX를 쉽게 구현할 수 있을 뿐만 아니라
프레임웍의 여러가지 확장기능, 확장 플러그인을 사용하여
웹 사이트를 보다 진보적으로 만들 수 있게 됩니다.

포스팅의 목적은 jQuery와 prototype, EXT, dojo, YUI, Jindo 등의 js프레임웍을
사용해보자 라는 정도입니다.

프레임웍 없는 상태에서의 AJAX 구현 방식과
prototype, jQuery를 이용한 AJAX 구현방식을 살펴보겠습니다.
prototype과 jQuery를 이용한 AJAX 구현은 로우 레벨 스타일로 하나씩만 다뤄보겠습니다.

1. 프레임웍 없는 자바스크립트에서의 AJAX

<script type="text/javascript">
 var xmlHttp = false;
 function ajax() {
 var h_query;
 var url = ''; // URL
 var pars = ''; 
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5)
 try {
 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e2) {
 xmlhttp = false;
 }
 }
 @end @*/
 if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
 {
 xmlhttp = new XMLHttpRequest();
 }
 xmlhttp.onreadystatechange = ajax_result;
 var url = url + "?" + pars;
 xmlhttp.open('GET', url, true);
 xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
 xmlhttp.send(null);
 }
 function ajax_result() {
 if(xmlHttp.readyState == 4)
 {
 alert(xmlHttp.responseText);
 }
 }
 </script>

보통 순수자바스크립트로는 대략적으로 위와 같은 방법으로 AJAX를 구현하게 됩니다.

브라우저의 상태에 따른 xmlHttp의 생성에 대한 부분과 값을 날리는 부분까지가
ajax() 함수의 역할이 되겠고, ajax_result() 함수에
xmlhttp.readyState의 값은 다음을 의미합니다.

0 : xmlhttp 생성
1 : xmlhttp 열기
2 : 요청 시작
3 : 수신 중
4 : 수신완료

아래 두 포스트의 예제가 위와 같은 방법으로 구성되었습니다.
‘잊지말자’ 차원에서의 순수자바스크립트 코딩이었습니다.
[OPEN API]DAUM 지도 API 테스트
[OPEN API]DAUM 주소-좌표 API + GOOGLE MAP API

2. prototype과 함께 하는 자바스크립트에서의 AJAX

<script type="text/javascript">
function ajax() {
 var url = ""; // URL
 var pars = ""; 
 var httpObj = new Ajax.Request(
 url,
 {
 method: "get",
 parameters: pars, 
 onComplete: function(msg) {
 alert(msg);
 } 
 });
}
</script>

prototype의 AJAX 관련 방식 중
Ajax.Request 쪽만 다루어봤습니다.

post 방식으로 값을 넘길 경우,
Form.serialize(폼ID) 로 Form값을 을 전달할 수 있습니다.
( 예) Form.serialize($(‘formid’)) )

예전에 Form.serialize 를 알아내는데 한참 고생한 기억이 있네요.
아래의 주소에서 더 자세한 예제와 함께 protype을 사용한
다양한 AJAX 방식을 볼 수 있습니다.

//www.prototypejs.org/api/ajax

3. jQuery와 함께 하는 자바스크립트에서의 AJAX

<script type="text/javascript">
function ajax() {
 var url = ""; // URL
 var pars = "";
 $.ajax({
 type : "get",
 url : url,
 data : pars,
 success :  function(msg) {
 alert(msg);
 }
 });
}
</script>

jQuery의 AJAX 관련 방식 중
$.ajax를 사용한 Low Level의 코딩이었습니다.

아래의 주소에서 더 자세한 예제와 함께 jQuery를 사용한
$.get, $.post와 함께 다양한 AJAX 방식을 볼 수 있습니다.
//api.jquery.com/category/ajax/

post 방식으로 값을 넘길 경우,
$(폼ID).seriallize() 로 Form값을 을 전달할 수 있습니다.
( 예) $(‘#formid’).serialize())

prototype의 Form.serialize 만큼은 아니었지만,
알아내는데 조금 고생한 기억이 있네요.

이렇게 순수자바스크립트, prototype, jQuery 에서의
AJAX 구현 방식을 다루어보았습니다.

대체적으로 로우레벨의 코딩을 알아 보았고, API를 공부하여 익힌다면,
더 쉽게 AJAX를 구현할 수 있을 것입니다.

AJAX를 포함하여 프레임웍의 다양한 기능들은
각 사이트의 API 관련 문서들을 참조해주세요.
jQuery : //jquery.com/
prototype : //www.prototypejs.org/
dojo : //dojotoolkit.org/
jindo : //dev.naver.com/projects/jindo/
YUI : //developer.yahoo.com/yui/
EXT : //www.extjs.com/

서태지 심포니의 틱탁을 들으며 마치겠습니다.
좋은 시간 되십시오.
감사합니다.

매우 오래된 영상(object 방식) : 원본이 삭제된 경우, 지원되지 않을 가능성이 높습니다.