웹프로그램 연구(VI) Ajax를 위한 준비

먼저 서적을 보고 Ajax 의 기본을 공부하였다. Ajax의 개념은 어려운 것이 아니었다. 간단히 말하면 XMLHttpRequest를 써서 새로운 접속을 열고 받은 데이터를 처리해주는 것이다. 이것은 FTP의 2중 접속과도 비슷한 방식이다. 역사적으로는 IE5.5 가 처음으로 XMLHttpRequest를 개발하였다고 한다. 그 후 XMLHttpRequest의 기동 방식을 개량하다 보니 여러 종류가 나와서 브라우저의 차분이 생기게 되고 Framework가 탄생하게 된다. 초기에 나와서 유명한 것이 prototype.js 이고, 그후에 나와서 맹렬한 추격과 인기를 얻고 있는 것이 jquery.js이다.

얼핏 보기에 prototype.js는 인스턴스를 생성하듯 new Ajax로 사용하고 jquery.js는 jQuery.ajax( settings )처럼 사용한다. 아무튼 나는 후자인 jquery.js를 사용하기로 했다. jQuery는 도큐멘트 페이지를 자주 본 기억이 있기 때문에 이미 익숙하다.
jQuery의 도큐멘트 사이트 http://docs.jquery.com/Main_Page

(벚꽃: 이 꽃이 지기 전에 웹프로그램을 완성하고 싶다.)
전체 개괄에서도 언급했듯이 이번 웹프로그램의 연구는 Ajax의 동작을 알아 보는 것이다. 테이블 목록에서 입력을 수행할 때마다 백그라운드 실행으로 데이터 베이스를 갱신하고 전체 화면은 갱신하지 않고 화면 갱신량을 줄여서 실행시간을 절약한다. 그러기 위해서는 신규로 입력했을 때 데이터 베이스에 추가하고 ID를 돌려 주어야 한다. 그 ID를 <input type="text" id="returned_ID">로 저장해 놓으면 된다.

browser	Javascript	<-- -->	ASP
1) Add table <tr>	2) Add <tr> 3) Request [SQL.Insert] 6) Update input.id	----> <----	4) Execute(Insert) 5) return ID

위 사이트(http://api.jquery.com/jQuery.ajax/)에 나와 있듯이

 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

형태로 통신을 할 수 있었다. 테스트는 우선 PC상에서 Opera 브라우저를 사용하였다. 서적에 의하면 PC상에서 Ajax는 오페라(Opera) 나 FireFox에서만 돌아간다고 되어있다.

실제 테스트한 소스는

 $.ajax({
   url: "page.xml",
   processData: false,
   dataType: "xml",
   success: function(data) {debugMsg(data);
    var result = data.getElementsByTagName("xxxx");
    debugMsg(result);
   }
 });

의 형태다.