[스터디] Ajax 마스터하기 Part 1: Ajax 소개

출처 : http://www.ibm.com/developerworks/kr/series/web/index.html
아래 내용은 위 출처의 기사의 일부를 복사 후 편집/수정한 것입니다.
단순히 개인적으로 알고자하는 내용만을 남긴 것이니, 자세한 정보는 위의 출처를 참조하세요.

XMLHttpRequest 객체

Ajax는 근본적으로 자바 스크립트 기술 및 웹 양식 및 서버 간의 XMLHttpRequest 객체를 결합한다. 사용자가 웹 양식을 기입할 때 데이터는 직접 서버 스크립트에 전송되지 않고 자바 스크립트 코드에 전달된다. 대신 자바 스크립트 코드는 양식 데이터를 포착해 Request를 서버에 전송한다. 이 과정이 일어나는 동안, 사용자 스크린 상의 양식은 순식간에 나타나거나 깜빡이거나 사라지거나 정지하지 않는다. 즉 자바 스크립트 코드는 몰래 Request를 전송하며 사용자는 Request가 만들어졌는지도 알지 못한다. 게다가 Request를 비동기적으로 전송하기 때문에 더 좋은 상황이 된다. 이는 자바 스크립트에서 서버 응답을 그냥 대기하지 않는다는 것을 의미한다. 따라서, 사용자는 데이터를 계속 기입하고 화면이동하고 애플리케이션을 사용한다. 그런 다음 서버는 자바 스크립트 코드(웹 양식에 대해 아직도 대기 중임)에 데이터를 다시 전송한다. 자바 스크립트 코드에서는 데이터와의 상호기능을 결정하며 연속적으로 양식 필드를 업데이트 하면서 애플리케이션에 즉각적인 응답을 준다. 결국 사용자는 양식을 제출/재생하는 작업 없이 새로운 데이터를 얻게 된다. 자바 스크립트 코드는 데이터를 얻고 계산도 수행하며 또 다른 Request를 전송하며 이런 모든 과정은 사용자 개입 없이도 된다! 이것이 바로 XMLHttpRequest 객체의 장점이다. XMLHttpRequest 객체는 서버와 같이 커뮤니케이션을 주고받고 사용자는 그 과정에서 벌어지는 과정을 알지 못한다.

일련의 수행 순서

1. 자바 스크립트 코드로 HTML 양식에서 데이터를 꺼내 이를 XMLHttpRequest 객체를 이용해서 서버에 전송
2. 서버에서 연산을 거친 결과값을 역시 XMLHttpRequest 객체를 이용해서 받아옴(XML/JSON 등으로)
3. 받아온 결과값을 필드 값 설정이나 연속적인 이미지 교체작업 등의 업데이트 작업을 수행

위의 모든 건 자바 스크립트에서 가능. 데이타는 DOM 등으로 처리.

XMLHttpRequest 객체 생성

다중 브라우저 방식으로 XMLHttpRequest 객체 생성하기

/* Create a new XMLHttpRequest object to talk to the Web server */ var xmlHttp = false; /*@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(); }

1.  변수 xmlHttp를 생성해 앞으로 생성할 XMLHttpRequest 객체를 참조한다.
2. Microsoft 브라우저에서의 객체를 시도, 생성한다.
     * Msxml2.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
     * 과정이 실패할 경우, Microsoft.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
3. xmlHttp가 아직도 설정되지 않은 경우 비-Microsoft 방식으로 XMLHttpRequest 객체를 생성한다.

Ajax가 포함된 Request 만들기 & 서버 응답 취급하기

function callServer() {   // Get the city and state from the web form   // 자바스크립트로 폼에서 데이터를 가져온다   var city = document.getElementById("city").value;   var state = document.getElementById("state").value;   // Only go on if there are values for both fields   if ((city == null) || (city == "")) return;   if ((state == null) || (state == "")) return;   // Build the URL to connect to   // 데이터를 보낼 주소를 설정   var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);   // Open a connection to the server   // 서버로의 connection 열기 - 데이터 넘기는 방식(GET/POST), 주소, 연결방식(true:비동기/false:동기)   // 비동기 연결이기 때문에 사용자는 서버의 응답을 기다리지 않고 다른 작업이 가능   xmlHttp.open("GET", url, true);   // Setup a function for the server to run when it's done   // XMLHttpRequest 객체의 상태변경 시마다 호출할 함수. 즉 서버로부터의 응답이 있을 때마다 호출할 함수   xmlHttp.onreadystatechange = updatePage;   // Send the request   // null - request에 추가해 보낼 것이 없다.   xmlHttp.send(null); } // xmlHttp.onreadystatechange = updatePage;에서 설정한 상태변경 시마다 호출되는 함수 // 상태가 바뀔 때마다 호출되지만, 상태에 대한 조건문을 이용해서 전부 OK일 경우에만 결과에 대해 처리한다. function updatePage() {   if (xmlHttp.readyState == 4) { // Loaded //    if(xmlHttp.status == 200) { // OK     var response = xmlHttp.responseText;     document.getElementById("zipCode").value = response; //    }   } }

웹 페이지에서 Ajax 프로세스 시작

<form>  <p>City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /></p>  <p>State: <input type="text" name="state" id="state" size="25" onChange="callServer();" /></p>  <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p> </form>