[스터디] Ajax 마스터하기, Part 2: JavaScript와 Ajax를 이용한 비동기식 요청

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

Part2는 Part1과 상당부분 중복되나, 좀더 자세한 내용임.

XMLHttpRequest

open(): 새로운 요청을 서버에 설정함.
send(): 요청을 서버에 전송함.
abort(): 현 요청에서 벗어남.
readyState: 현 HTML 준비상태를 제공함.
responseText: 요청에 응답하기 위해 서버에서 재전송하는 텍스트.

에러 처리기능으로 XMLHttpRequest 객체 생성

<script language="javascript" type="text/javascript"> var request = false; try {   request = new XMLHttpRequest(); // 생성 시도. IE이외의 브라우저라면 생성됨. } catch (trymicrosoft) {   try {     request = new ActiveXObject("Msxml2.XMLHTTP");   } catch (othermicrosoft) {     try {       request = new ActiveXObject("Microsoft.XMLHTTP");     } catch (failed) {       request = false;     }   } } if (!request)   alert("Error initializing XMLHttpRequest!"); </script>

생성 로직을 별도의 함수로 만들어서 사용하면(위와 같이 정적 자바스크립트가 아닌), 생성 시 문제 발생에 대한 에러 통지기능을 지연시키므로 대부분의 Ajax 프로그래머들은 위의 방법을 활용하지 않는다.
10/15 필드가 있는 복잡한 형태에 선택상자 등등이 있다고 상상해보자. 사용자가 필드 14에 있는 텍스트를 형식에 나온 대로 기입할 때 몇 가지 Ajax 코드를 전송한다고 하면, 이 시점에서 생성 함수를 실행해 XMLHttpRequest 객체를 생성하려 했지만 실패한다. 그러면 사용자에게 이 애플리케이션을 사용할 수 없다는 것을 경고로 알리게 된다 (많은 경우). 하지만 사용자는 이미 형식 상에서 데이터를 기입하느라 시간을 보냈다. 아마도 상당히 짜증을 내게 되면서 사용자는 결국엔 사이트로 관심을 기울이지 않게될 것이다.

XMLHttpRequest로 요청 전송하기

샌드박스
Ajax는 샌드박스 보안 모델이 포함되어 있다. 그 결과 Ajax 코드(특히 XMLHttpRequest 객체)는 실행 중인 동일한 도메인에만 요청을 생성한다.

서버 URL 설정
우선 결정할 것은 연결할 서버의 URL이다. URL은 Ajax에서만 있는 것은 아니다. 분명URL을 구성하는 방법에 대해 알아야 한다. 하지만 URL은 연결 설정 시 여전히 필수적인 것이다. 대부분의 애플리케이션에서 사용자가 다루는 형식에서 나온 데이터와 정적 데이터 세트를 결합해 URL을 구성한다.

function getCustomerInfo() {    var phone = document.getElementById("phone").value;    var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);    request.open("GET", url, true);    request.onreadystatechange = updatePage;    request.send(null); }

escape() 메소드는 정확히 명백한 텍스트로 전송될 수 없는 문자를 변환하는데 사용된다. 예를 들어, 전화번호에서의 임의의 공간은 %20 문자로 바뀌며 이로 인해 URL과 같이 문자를 전송할 수 있게 된다.

요청 열기
XMLHttpRequest 객체 상의 open() 메소드를 사용해 요청을 구성한다.
request-type: 전송 요청 형태. GET/POST가 일반적인 값이고 HEAD 요청도 전송함.
url: 연결된 URL.
asynch: 비동기 요청을 설정할 경우 true값, 동기식 요청인 경우에는 false임. 이 매개변수는 옵션이고 기본값이 true값임.
username: 사용인증을 요구할 경우 사용자이름을 지정한다. 옵션 매개변수고 기본값이 없다
password: 사용인증을 요구할 경우 암호를 지정한다, 옵션 매개변수고 기본값이 없다.

비동기성에 대한 문제
동기식은 다시 말하면 클라이언트는 서버로부터의 응답이 올 때까지 대기한다. 버튼을 누르면 트리거된 요청이 응답되기 전까지는 애플리케이션을 사용할 수 없다.
비동기식 요청은 서버가 응답할 때까지 대기하지 않는다. 요청을 전송한 다음에는 애플리케이션을 계속 실행한다.

요청 전송
send() 메소드는 단 하나의 매개변수인 전송 컨텐트만 있으면 된다. 그 메소드에 대해 너무 깊게 생각하기 이전에 이미 URL 자체를 통해 데이터를 전송했음을 기억하라.

콜백 메소드 지정
비동기 식 XMLHttpRequest의 경우, 자바 메소드(예에 나온 getCustomerInfo())는 서버 상에서 대기하지 않는다. 따라서 서버에 XXMLHttpRequest객체에 의해 전송된 요청에 관한 처리과정을 완료할 경우 서버는 몇 가지 형태의 명령어를 포함해야 한다. 없다면 브라우저는 서버가 요청을 처리했는지 안했는지 어떤 상태인지 알 수 없다. 이런 상황에서 바로 onreadystatechange 속성이 작용한다. 이 속성으로 콜백 메소드를 지정한다. 웹 페이지 자체에서 벌어지는 현상에 관계없이 웹 페이지로 다시 호출할 때 서버에서 개시하기 때문에 콜백이라 부르는 것이다. 예를 들어, 사용자가 의자에 앉아 키보드를 사용하지 않는 동안 콜백 메소드를 호출하기도 한다. 하지만 사용자가 입력하고 마우스를 움직이고, 화면 이동시키고 버튼을 클릭하는 동안에도 콜백 메소드를 호출하기도 한다. 사용자가 하는 업무는 그다지 중요하지 않다. 이런 상황에서 비동시성이 작용한다.
특 히 onreadystatechange 속성이 결정된 코드 위치에 주의를 기울인다. 그 위치는 바로 send()가 호출되기 전의 위치다. 요청을 전송하기 전 onreadystatechange 속성을 설정해야 한다. 그래야만, 서버에서 요청 응답을 종료할 때 onreadystatechange 속성을 탐지하게 된다.

서버 응답 처리
요청을 만들면 사용자는 웹 형식에서 여유롭게 작업하며 (서버에서 요청을 처리하는 동안에는) 서버는 요청 처리과정을 완료한다. 서버는 onreadystatechange 속성에서 나타나며 호출방법을 결정한다.

function updatePage() {   alert("Server is done!"); }

이렇게 하면 간단한 경고가 울리면서 서버가 종료될 때를 알려준다. 하지만 확인을 클릭한 경우에도 경고는 팝업을 연속한다. 브라우저에 ‘따라 웹 형식에서 경고 팝업을 중지할 때까지 경고가 두 번, 세 번, 심지어는 네 번까지 울린다.
그러면 무슨 일이 벌어지고 있는 것인가? 요청/응답 사이클의 중요 구성요소인 HTTP 준비상태에 대해 고려하지 않았다.

HTTP 준비 상태
서버에서 요청이 종료되면 XMLHttpRequest의 onreadystatechange 속성에서 호출되는 메소드를 탐지한다고 했으나 사실, HTTP 준비 상태가 변할 때마다 서버에서는 방금 전에 언급한 메소드를 호출한다.

HTTP 준비상태는 요청의 상태를 나타내며 주로 요청을 시작했는지, 요청에 응답했는지, 요청/응답 모델을 완성했는지 여부를 결정하는 데 활용된다. HTTP 준비상태는 서버에서 공급되는 모든 응답 텍스트/데이터를 읽어 들이는 데 안전한지 여부를 결정하는 데 도움이 되기도 한다. 여기서 Ajax 애플리케이션에서의 5가지 준비상태에 관해 알아야 한다.
0: 요청이 개시되지 않음.(open()을 호출하기 전)
1: 요청을 설정했지만 전송되지는 않았음.(send()를 호출하기 전)
2: 요청을 설정한 다음 처리 중(이 시점에서 일반적으로 응답에서 나온 컨텐트 헤더를 얻는다.)
3: 요청 처리 중; 종종 응답에서 부분적인 데이터를 사용할 수 있다. 하지만 서버는 자체 응답이 완료되지 않았다.
4: 응답 완료. 서버 응답을 얻은 다음 이를 활용한다.

거의 모든 크로스-브라우저 이슈에서도 그렇듯 예상치 못한 방식으로 이와 같은 준비 상태를 이용한다. 준비상태는 항상 0~1, 2, 3, 4로 단계적으로 이동한다고 예상할지도 모른다. 하지만 실지로는 그렇지 않다. 0/1상태를 보고하지 않고 곧바로 2로 건너뛰어 3,4까지 가는 브라우저도 있고 모든 상태를 보고하는 브라우저도 있다.

Ajax 프로그래밍의 경우, 직접 다뤄야 할 상태는 오로지 상태 4다. 이는 서버 응답이 완료되었고 응답 데이터를 점검, 사용하는 데 안전하다는 것을 의미한다.

function updatePage() {   if (request.readyState == 4)     alert("Server is done!"); }

이런 변환으로 서버가 정말로 그 과정을 종료했는지 확인한다. Ajax 코드의 이 버전을 실행한다. 그러면 한 번에 경고 메시지만을 얻어야 한다.

HTTP 상태 코드
하지만 여전히 문제는 상존한다. 그러면 서버가 요청에 응답하고 요청 처리과정을 완료했지만 에러를 보고한 경우는 어찌 되는가? Ajax, JSP, 정규 HTML 형식 또는 기타 형태의 코드로 서버측 코드를 호출 중인 경우에 서버측 코드를 관찰해야 한다는 점을 주목한다. 웹 세계에서는 HTTP 코드로 요청에서 발생할지도 모르는 여러 가지 상황을 다룬다.

예를 들어, URL에 관한 요청을 입력했지만, URL을 부정확하게 입력해 404 에러코드가 나와 페이지가 없어졌다고 해보자. 이 코드는 HTTP 요청을 상태로 수신하는 여러 상태 코드 가운데 하나에 지나지 않는다. 403, 401 코드는 둘 다 안전하거나 금지된 데이터 처리를 의미하는 것으로 역시 공통적이다. 각 경우에 있어 이런 코드들은 완전 응답에서 나오는 코드들이다. 즉, 서버는 요청을 수행하지만(HTTP 준비상태는 4임), 클라이언트가 예상한 데이터가 나오지 않을 수도 있다.

여기서 준비 상태에 덧붙여, HTTP 상태를 점검할 필요가 있다. 단순히 확인을 의미하는 상태코드 200을 탐색하는 중에 있다. 준비상태 4와 상태코드 200인 상태에서 서버 데이터를 처리할 준비가 되어 있고 그 데이터는 반드시 요청된 형태여야 한다.

function updatePage() {   if (request.readyState == 4)     if (request.status == 200)       alert("Server is done!"); }

복잡성을 줄이고 더 강력한 에러 처리기능을 추가하려면 기타 상태코드에 관한 점검기능/두 가지 기능을 추가할지도 모른다.

function updatePage() {   if (request.readyState == 4)     if (request.status == 200)       alert("Server is done!");     else if (request.status == 404)       alert("Request URL does not exist");     else       alert("Error: status code is " + request.status); }

응답 텍스트 읽기
이제 요청을 준비상태를 통해 완전히 처리하고, 서버로 정상적인 확인 응답을 상태 코드를 통해 받았으므로 서버에서 재전송되는 데이터를 최종적으로 처리한다. 이 데이터는 XMLHttpRequest객체의 responseText 속성에 저장된다.

포맷/길이에 의한 responseText 속성의 텍스트 모양에 관한 상세사항은 이 장에서는 논하지 않기로 한다. 이렇게 되면 서버는 이 텍스트를 실지로 임의로 설정한다. 예를 들어, 한 스크립트로 콤마-분리 값 및 파이프-분리 값이 나오고 또 다른 파이프-분리 값은 텍스트의 긴 문자열로 나올 수도 있다. 이런 현상은 서버에 따라 다르게 된다.

이 글에서 사용된 예의 경우, 서버는 파이프 기호로 분리된 고객의 마지막 순서 및 주소가 나오게 된다.

function updatePage() {   if (request.readyState == 4) {     if (request.status == 200) {       var response = request.responseText.split("|");       document.getElementById("order").value = response[0];       document.getElementById("address").innerHTML = response[1].replace(/\n/g, "<br>");     } else       alert("status is " + request.status);   } }

XMLHttpRequest 객체의 중요한 속성 중 하나인 responseXML 속성에 대해 언급한다. 이 속성은 서버가 XML과의 응답을 선택한 경우, XML 응답을 포함한다. XML 응답 처리는 평범한 텍스트 처리과정과 상당히 다르며, 문장분석 및 문서 객체 모델(DOM)을 포함한다. 많은 단순 Ajax 애플리케이션의 경우, responseText만 있으면 된다.