HTML, JavaScript™ 기술, DHTML 및 DOM으로 구성된 Ajax는 번거로운 웹 인터페이스를 대화형 Ajax 애플리케이션으로 변환하는 훌륭한 방법입니다. Ajax 전문가가 작성한 이 기사에서는 일반적인 개요부터 자세한 논의에 이르기까지 이러한 기술이 어떻게 함께 작동하여 효율적인 웹 개발을 현실로 만드는지 보여줍니다. 그는 또한 XMLHttpRequest 객체를 포함한 핵심 Ajax 개념을 쉽게 설명합니다.
5년 전에는 XML을 몰랐다면 누구도 심각하게 받아들이지 않는 미운 오리새끼였습니다. 18개월 전, 루비는 주목의 중심이 되었고, 루비를 모르는 프로그래머들은 벤치에 앉아 있을 수밖에 없었습니다. 오늘날 최신 기술 유행을 따라가고 싶다면 목적지는 Ajax입니다.
그러나 Ajax는 단순한 유행이 아니라 완전히 새로운 언어를 배우는 것만큼 어렵지 않은 웹사이트를 구축할 수 있는 강력한 방법입니다.
그러나 Ajax가 무엇인지 자세히 알아보기 전에 Ajax가 수행하는 작업을 잠시 이해해 보겠습니다. 현재 응용 프로그램을 작성할 때 두 가지 기본 옵션이 있습니다.
· 데스크톱 응용 프로그램 · 웹 응용 프로그램
둘은 비슷합니다. 데스크톱 응용 프로그램은 일반적으로 CD로 제공되며(때때로 웹 사이트에서 다운로드 가능) 컴퓨터 상위에 완전히 설치됩니다. 데스크톱 응용 프로그램은 인터넷을 사용하여 업데이트를 다운로드할 수 있지만 이러한 응용 프로그램을 실행하는 코드는 데스크톱 컴퓨터에 있습니다. 웹 애플리케이션은 웹 서버 어딘가에서 실행됩니다. 당연히 이러한 애플리케이션은 웹 브라우저를 통해 액세스됩니다.
그러나 이러한 애플리케이션을 실행하는 코드가 배치되는 위치보다 더 중요한 것은 애플리케이션이 작동하고 상호 작용하는 방식입니다. 데스크톱 응용 프로그램은 일반적으로 속도가 빠르고(인터넷 연결을 기다리지 않고 컴퓨터에서 바로 실행) 아름다운 사용자 인터페이스(대개 운영 체제에 따라 다름)를 가지며 매우 동적입니다. 클릭하고, 선택하고, 입력하고, 메뉴와 하위 메뉴를 열고, 탐색할 수 있으며 기본적으로 기다릴 필요가 없습니다.
반면 웹 애플리케이션은 데스크톱에서는 불가능한 서비스(Amazon.com, eBay 등)를 제공하는 최신 트렌드입니다. 그러나 웹의 힘으로 인해 서버가 응답할 때까지 기다리고, 화면이 새로 고쳐질 때까지 기다리고, 요청이 반환될 때까지 기다렸다가 새 페이지를 생성해야 합니다.
분명히 이것은 지나치게 단순화된 것이지만 기본 개념은 이것이다. 짐작하셨겠지만, Ajax는 데스크탑 애플리케이션의 기능과 상호작용성을 끊임없이 진화하는 웹 애플리케이션과 연결하려고 시도합니다. 데스크톱 애플리케이션에서 볼 수 있는 것과 같은 동적 사용자 인터페이스와 아름다운 컨트롤을 웹 애플리케이션에서 사용할 수 있습니다.
당신은 무엇을 기다리고 있습니까? Ajax가 투박한 웹 인터페이스를 반응형 Ajax 애플리케이션으로 변환하는 방법을 살펴보겠습니다.
오래된 기술, 새로운 트릭
Ajax에 관해서는 실제로 다양한 기술이 포함되며 이를 유연하게 사용하려면 이러한 다양한 기술에 대한 깊은 이해가 필요합니다(이 시리즈의 처음 몇 기사에서는 이러한 각 기술을 별도로 논의합니다). 좋은 소식은 여러분이 이미 이러한 기술 대부분에 대해 매우 잘 알고 있을 것이며, 더 좋은 점은 이러한 기술이 배우기 쉽고 Java나 Ruby와 같은 완전한 프로그래밍 언어만큼 어렵지 않다는 것입니다.
다음은 Ajax 애플리케이션에 사용되는 기본 기술입니다.
·HTML은 웹 양식을 작성하고 애플리케이션의 다른 부분에서 사용되는 필드를 결정하는 데 사용됩니다.
· JavaScript 코드는 Ajax 애플리케이션을 실행하고 서버 애플리케이션과의 통신을 향상시키는 데 도움이 되는 핵심 코드입니다.
·양식을 동적으로 업데이트하기 위한 DHTML 또는 동적 HTML. div, 범위 및 기타 동적 HTML 요소를 사용하여 HTML을 마크업하겠습니다.
·문서 개체 모델 DOM은 (JavaScript 코드를 통해) HTML 구조와 (경우에 따라) 서버에서 반환된 XML을 처리하는 데 사용됩니다.
Ajax의 정의
Ajax는 Asynchronous JavaScript 및 XML(및 DHTML 등)의 약어입니다. 이 문구는 Adaptive Path(참고자료 참조)의 Jesse James Garrett이 만든 것이며 Jesse가 설명하듯이 이는 약어가 아닙니다.
이러한 기술의 책임을 더 자세히 분석해 보겠습니다. 향후 기사에서 이러한 기술에 대해 심도 있게 논의할 예정이지만 지금은 구성 요소와 기술에 대해서만 알아두시기 바랍니다. 이러한 코드에 더 익숙해질수록 이러한 기술에 대한 산만한 이해에서 이러한 기술에 대한 진정한 이해로 전환하는 것이 더 쉬워질 것입니다(이는 또한 웹 애플리케이션 개발의 문을 열어줍니다).
XMLHttpRequest 개체
이해해야 할 개체 중 하나는 XMLHttpRequest라는 가장 생소한 개체일 수도 있습니다. 이는 JavaScript 개체이며 목록 1에 표시된 것처럼 생성이 간단합니다.
목록 1. 새 XMLHttpRequest 객체 만들기
<script 언어="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
이 개체에 대해서는 다음 기사에서 자세히 설명하겠지만 지금은 이 개체가 모든 서버 통신을 처리하는 개체라는 점만 알아두시기 바랍니다. 계속 읽기 전에 잠시 멈춰서 이것에 대해 생각해 보십시오. JavaScript 기술은 XMLHttpRequest 개체를 통해 서버와 통신하는 기술입니다. 이는 일반적인 애플리케이션 흐름이 아니며, Ajax의 힘은 바로 여기에서 나옵니다.
일반적인 웹 애플리케이션에서 사용자는 양식 필드를 채우고 제출 버튼을 클릭합니다. 그런 다음 전체 양식이 서버로 전송되고 서버는 이를 양식을 처리하는 스크립트(보통 PHP 또는 Java, CGI 프로세스 등)로 전달한 다음 스크립트가 완료되면 새로운 페이지를 다시 보냅니다. 페이지는 일부 데이터가 이미 입력된 새 양식이 포함된 HTML일 수도 있고, 확인 페이지일 수도 있고, 원래 양식에 입력된 데이터를 기반으로 일부 옵션이 선택된 페이지일 수도 있습니다. 물론 사용자는 서버의 스크립트나 프로그램이 새 양식을 처리하고 반환하는 동안 기다려야 합니다. 화면이 공백으로 바뀌고 다시 그리기 전에 서버에서 데이터가 반환될 때까지 기다립니다. 이것이 바로 상호 작용성이 좋지 않고 사용자가 즉각적인 피드백을 받지 못하는 이유이며 데스크톱 응용 프로그램과 다른 느낌을 줍니다.
Ajax는 기본적으로 웹 양식과 서버 사이에 JavaScript 기술과 XMLHttpRequest 객체를 넣습니다. 사용자가 양식을 작성하면 데이터가 서버로 직접 전송되는 대신 일부 JavaScript 코드로 전송됩니다. 대신 JavaScript 코드는 양식 데이터를 캡처하고 서버에 요청을 보냅니다. 동시에 사용자 화면의 양식은 깜박이거나 사라지거나 지연되지 않습니다. 즉, JavaScript 코드는 사용자가 요청이 이루어지고 있다는 사실조차 알지 못한 채 뒤에서 요청을 보냅니다. 더 좋은 점은 요청이 비동기적으로 전송된다는 것입니다. 즉, JavaScript 코드(및 사용자)가 서버의 응답을 기다릴 필요가 없습니다. 따라서 사용자는 계속해서 데이터를 입력하고, 스크롤하고, 애플리케이션을 사용할 수 있습니다.
그런 다음 서버는 데이터를 어떻게 처리할지 결정하는 JavaScript 코드(여전히 웹 형식)로 데이터를 반환합니다. 양식 데이터를 빠르게 업데이트하여 양식을 제출하거나 새로 고치거나 사용자가 새 데이터를 얻지 않고도 애플리케이션이 즉시 완료되는 듯한 느낌을 줍니다. JavaScript 코드는 사용자 개입 없이 수신된 데이터에 대해 일부 계산을 수행하고 다른 요청을 보낼 수도 있습니다. 이것이 XMLHttpRequest의 힘입니다. 필요에 따라 자체적으로 서버와 상호 작용할 수 있으며 사용자는 뒤에서 무슨 일이 일어나고 있는지 전혀 인식하지 못할 수도 있습니다. 그 결과 데스크탑 애플리케이션과 유사하지만 인터넷의 모든 힘을 바탕으로 역동적이고 반응성이 뛰어나며 대화형 경험이 가능한 환경이 탄생했습니다.
XMLHttpRequest의 핸들을 얻기 위해
일부 JavaScript를 추가한
후 다른 JavaScript 코드는 매우 간단합니다.실제로 우리는 매우 기본적인 작업을 수행하기 위해 JavaScript 코드를 사용할 것입니다.
· 양식 데이터 가져오기: JavaScript 코드는 HTML 양식에서 데이터를 쉽게 추출하여 서버로 보낼 수 있습니다.
·양식의 데이터 수정: 필드 값 설정부터 빠른 이미지 교체까지 양식 업데이트도 쉽습니다.
·HTML 및 XML 구문 분석: JavaScript 코드를 사용하여 DOM(다음 섹션 참조)을 조작하고 HTML 양식 서버에서 반환된 XML 데이터의 구조를 처리합니다.
처음 두 가지 사항의 경우 목록 2에 표시된 대로 getElementById() 메서드에 매우 익숙해야 합니다.
목록 2. JavaScript 코드를 사용하여 필드 값 캡처 및 설정
// "phone" 필드의 값을 가져와서 Phone이라는 변수에 넣습니다.
var Phone = document.getElementById("phone").value;
// response라는 배열을 사용하여 양식에 일부 값을 설정합니다.
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];
여기에는 특별히 언급할 사항이 없습니다. 훌륭합니다! 여기에는 그다지 복잡한 것이 없다는 것을 깨달아야 합니다. XMLHttpRequest를 마스터하고 나면 Ajax 애플리케이션의 나머지 부분은 Listing 2에 표시된 것처럼 소량의 HTML과 혼합된 간단한 JavaScript 코드입니다. 동시에 약간의 DOM도 사용해야 하므로 살펴보겠습니다.
DOM으로 끝내기
마지막으로 문서 객체 모델(Document Object Model)인 DOM이 있습니다. DOM은 일부 독자들에게는 약간 위협적일 수 있습니다. HTML 디자이너는 DOM을 거의 사용하지 않으며 심지어 JavaScript 프로그래머도 고급 프로그래밍 작업을 완료하려는 경우가 아니면 거의 사용하지 않습니다. 복잡한 Java 및 C/C++ 프로그램은 DOM을 많이 사용하므로 DOM을 배우기 어렵다고 간주될 수 있습니다.
다행스럽게도 JavaScript 기술로 DOM을 사용하는 것은 쉽고 매우 직관적입니다. 이제 일반적으로 DOM 사용 방법을 설명하거나 최소한 몇 가지 예제 코드를 제공해야 하지만 그렇게 하면 오해를 불러일으킬 수도 있습니다. DOM을 무시하더라도 여전히 Ajax를 탐구할 수 있으며 이것이 제가 취할 접근 방식입니다. 향후 기사에서 DOM을 다시 다루겠지만 지금은 DOM이 필요할 수도 있다는 점만 알아두면 충분합니다. JavaScript 코드와 서버 간에 XML을 전달하고 HTML 양식을 변경해야 할 때 DOM에 대해 더 자세히 살펴보겠습니다. DOM 없이도 몇 가지 흥미로운 작업을 수행할 수 있으므로 지금은 DOM을 따로 보관해 두세요.
Request 객체 얻기
위의 기본 지식을 바탕으로 몇 가지 구체적인 예를 살펴보겠습니다. XMLHttpRequest는 Ajax 애플리케이션의 핵심이며 많은 독자들에게 생소할 수 있으므로 거기서 시작해 보겠습니다. Listing 1에서 볼 수 있듯이 이 객체를 생성하고 사용하는 것은 매우 간단합니다. 그렇지 않나요? 기다리다.
몇 년 전의 끔찍한 브라우저 전쟁을 기억하시나요? 다양한 브라우저에서 동일한 결과를 제공하는 것은 없습니다. 믿거나 말거나, 이러한 전쟁은 규모는 작지만 여전히 계속되고 있습니다. 그러나 이상하게도 XMLHttpRequest는 이 전쟁의 희생자 중 하나가 되었습니다. 따라서 XMLHttpRequest 객체를 얻으려면 다른 접근 방식이 필요할 수 있습니다. 아래에서 자세히 설명하겠습니다.
Microsoft 브라우저 사용
Microsoft 브라우저 Internet Explorer는 MSXML 구문 분석기를 사용하여 XML을 처리합니다(MSXML에 대한 자세한 내용은 참고자료에서 확인할 수 있습니다). 따라서 Internet Explorer와 상호 작용하는 Ajax 애플리케이션을 작성하는 경우 특별한 방법으로 객체를 생성해야 합니다.
그러나 그렇게 간단하지는 않습니다. 실제로 Internet Explorer에 설치된 JavaScript 기술의 버전에 따라 MSXML에는 두 가지 버전이 있으므로 각 경우에 대해 별도의 코드를 작성해야 합니다. Microsoft 브라우저에서 XMLHttpRequest를 생성하는 코드가 포함된 목록 3을 참조하세요.
목록 3. Microsoft 브라우저에서 XMLHttpRequest 객체 생성
var xmlHttp = false;
노력하다 {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} 잡기 (e) {
노력하다 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} 잡기 (e2) {
xmlHttp = 거짓;
}
}
아직 코드를 완전히 이해하지 못했을 수도 있지만 괜찮습니다. 이 기사 시리즈를 마치면 JavaScript 프로그래밍, 오류 처리, 조건부 컴파일 등에 대해 더 깊이 이해하게 될 것입니다.
이제xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
및
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
라는 두 줄의 코드만 기억하세요.
이 두 줄의 코드는 기본적으로 한 버전의 MSXML을 사용하여 개체를 생성하려고 시도하고, 실패할 경우 다른 버전을 사용하여 개체를 생성합니다. 나쁘지 않죠? 둘 다 성공하지 못하면 xmlHttp 변수가 false로 설정되어 코드에 문제가 있음을 알립니다. 이 문제가 발생하는 경우 다른 코드가 필요한 타사 브라우저가 설치되었기 때문일 수 있습니다.
Mozilla 및 Microsoft 이외의 브라우저 처리
Internet Explorer 이외의 브라우저를 선택하거나 Microsoft 이외의 브라우저용 코드를 작성하는 경우 다른 코드를 사용해야 합니다. 이는 실제로 목록 1에 표시된 간단한 코드 라인입니다.
var xmlHttp = new XMLHttpRequest object;.
이 훨씬 간단한 코드 줄은 Mozilla, Firefox, Safari, Opera 및 기본적으로 모든 형식이나 방식으로 Ajax를 지원하는 Microsoft 이외의 브라우저에서 XMLHttpRequest 객체를 생성합니다.
이를 결합하는
핵심은모든 브라우저를 지원하는 것입니다. Internet Explorer나 Microsoft 이외의 브라우저에서만 작동하는 응용 프로그램을 작성하고 싶은 사람이 누구입니까? 아니면 더 나쁜 것은 신청서를 두 번 작성하는 것입니까? 물론 그렇지 않습니다! 따라서 코드는 Internet Explorer와 Microsoft 이외의 브라우저를 모두 지원해야 합니다. Listing 4는 그러한 코드를 보여준다.
목록 4. 여러 브라우저를 지원하는 방식으로 XMLHttpRequest 객체 생성
/* 웹 서버와 통신하기 위해 새로운 XMLHttpRequest 객체를 생성합니다 */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
노력하다 {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} 잡기 (e) {
노력하다 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} 잡기 (e2) {
xmlHttp = 거짓;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != '정의되지 않음') {
xmlHttp = 새로운 XMLHttpRequest();
}
지금은 XMLHttpRequest에 대한 다음 기사에서 자세히 논의할 특별한 JavaScript 컴파일러 명령인 @cc_on과 같이 주석 처리된 이상한 기호를 무시하십시오. 이 코드의 핵심은 세 단계로 나뉩니다.
1. 생성할 XMLHttpRequest 객체를 참조하기 위해 xmlHttp 변수를 생성합니다.
2. Microsoft 브라우저에서 개체를 생성해 보십시오.
1) Msxml2.XMLHTTP 개체를 사용하여 생성해 봅니다.
2) 실패하면 Microsoft.XMLHTTP 개체를 다시 시도하십시오.
2. xmlHttp가 여전히 생성되지 않으면 Microsoft가 아닌 방식으로 개체를 생성합니다.
마지막으로 xmlHttp는 실행 중인 브라우저에 관계없이 유효한 XMLHttpRequest 객체를 참조해야 합니다.
보안에 관한 작은 참고 사항
은 어떻습니까? 이제 브라우저를 통해 사용자는 보안 수준을 높이고 JavaScript 기술을 끄고 브라우저의 모든 옵션을 비활성화할 수 있습니다. 이 경우 코드는 어쨌든 작동하지 않습니다. 이 시점에서는 문제를 적절하게 처리할 필요가 있으며, 이를 위해서는 나중에 별도의 기사가 필요합니다(이 시리즈는 충분히 길죠? 걱정하지 마십시오. 읽기를 마치기 전에 얻을 수 있습니다). 이제 견고하지만 완벽하지는 않지만 Ajax를 익히는 데 좋은 코드를 작성해 보겠습니다. 이에 대해서는 나중에 더 자세히 논의하겠습니다.
Ajax 세계의 요청/응답
이제 Ajax를 소개했으므로 XMLHttpRequest 객체와 이를 생성하는 방법에 대한 기본적인 이해를 갖추었습니다. 주의 깊게 읽어보셨다면 아마도 해당 애플리케이션에 직접 제출되는 HTML 양식이 아니라 서버의 웹 애플리케이션을 다루는 것이 JavaScript 기술이라는 것을 이미 알고 계실 것입니다.
무엇이 빠졌나요? XMLHttpRequest를 사용하는 정확한 방법. 이 코드는 작성하는 모든 Ajax 애플리케이션이 어떤 형식으로든 사용할 정도로 중요하므로 Ajax의 기본 요청/응답 모델이 어떤 것인지 살펴보는 것부터 시작하겠습니다.
요청 만들기
이제 완전히 새로운 XMLHttpRequest 객체가 생겼으니 몇 가지 작업을 수행해 보겠습니다. 먼저 웹 페이지에서 호출할 수 있는 JavaScript 메서드가 필요합니다(예: 사용자가 텍스트를 입력하거나 메뉴에서 항목을 선택할 때). 다음은 모든 Ajax 애플리케이션에서 기본적으로 동일한 프로세스입니다.
1. 웹 양식에서 필요한 데이터를 얻습니다.
2. 연결할 URL을 생성합니다.
3. 서버에 대한 연결을 엽니다.
4. 완료 후 서버에서 실행할 기능을 설정합니다.
5. 요청을 보냅니다.
Listing 5의 샘플 Ajax 메소드는 다음 순서로 구성됩니다.
Listing 5. Ajax 요청 만들기
함수 callServer() {
// 웹 양식에서 도시와 주를 가져옵니다.
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// 두 필드 모두에 값이 있는 경우에만 계속 진행합니다.
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// 연결할 URL을 작성합니다
.
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state)
// 서버에 대한 연결 열기
xmlHttp.open("GET", url, true);
// 완료되면 서버가 실행할 함수를 설정합니다.
xmlHttp.onreadystatechange = updatePage;
// 요청 보내기
xmlHttp.send(null);
}
대부분의 코드의 의미는 매우 명확합니다. 시작 부분의 코드는 기본 JavaScript 코드를 사용하여 여러 양식 필드의 값을 가져옵니다. 그런 다음 PHP 스크립트를 링크 대상으로 설정합니다. 스크립트 URL이 지정되는 방식에 유의하세요. 도시와 주(양식에서)는 간단한 GET 매개변수를 사용하여 URL에 추가됩니다.
그런 다음 연결이 열리는데, 이는 XMLHttpRequest가 사용되는 것을 처음으로 보는 것입니다. 접속 방식(GET)과 접속할 URL을 지정합니다. 마지막 매개변수가 true로 설정되면 비동기 연결을 요청합니다(이것이 Ajax의 기원입니다). false를 사용하면 코드는 요청한 후 서버의 응답을 기다립니다. true로 설정하면 서버가 백그라운드에서 요청을 처리하는 동안 사용자는 계속해서 양식을 사용할 수 있습니다(심지어 다른 JavaScript 메서드도 호출할 수 있습니다).
xmlHttp의 onreadystatechange 속성(이것은 XMLHttpRequest 객체 인스턴스라는 것을 기억하세요)은 실행이 완료된 후(5분 또는 5시간이 걸릴 수 있음) 서버에 무엇을 해야 하는지 알려줍니다. 코드는 서버를 기다리고 있지 않기 때문에 사용자가 응답할 수 있도록 무엇을 해야 하는지 서버에 알려야 합니다. 이 예에서는 서버가 요청 처리를 완료하면 updatePage()라는 특수 메서드가 트리거됩니다.
마지막으로 send()는 null 값으로 호출됩니다. 요청 URL에 서버로 전송할 데이터(시, 주)가 추가되어 있으므로 요청 시 데이터를 전송할 필요가 없습니다. 이렇게 하면 요청이 이루어지고 서버가 요청에 따라 작동합니다.
새로운 것을 찾지 못했다면 이것이 얼마나 간단하고 간단한지 감사해야 합니다! Ajax의 비동기적 특성을 염두에 두는 것 외에는 매우 간단합니다. Ajax를 사용하면 복잡한 HTTP 요청/응답 코드에 대해 걱정하는 대신 아름다운 애플리케이션과 인터페이스를 작성하는 데 집중할 수 있다는 점에 감사하세요.
Listing 5의 코드는 Ajax의 사용 용이성을 보여줍니다. 데이터는 간단한 텍스트이며 요청 URL의 일부로 사용될 수 있습니다. 더 복잡한 POST 대신 GET을 사용하여 요청을 보냅니다. 추가할 XML과 콘텐츠 헤더가 없으며 요청 본문에 보낼 데이터도 없습니다. 즉, 이것이 Ajax 유토피아입니다.
걱정하지 마세요. 이 일련의 기사가 전개되면서 상황은 더욱 복잡해질 것입니다. POST 요청을 보내는 방법, 요청 헤더 및 콘텐츠 유형을 설정하는 방법, 메시지에서 XML을 인코딩하는 방법, 요청 보안을 강화하는 방법 등 더 많은 작업을 수행할 수 있습니다. 지금은 이러한 어려움에 대해 걱정하지 말고 기본적인 사항만 익히면 곧 완전한 Ajax 도구 라이브러리 세트를 구축할 수 있습니다.
응답 처리
이제 서버의 응답이 옵니다. 지금 알아야 할 두 가지 사항은 다음과 같습니다.
· xmlHttp.readyState 속성 값이 4가 될 때까지 아무 작업도 수행하지 않습니다.
·서버는 xmlHttp.responseText 속성을 응답으로 채웁니다.
첫 번째 상태인 준비 상태에 대해서는 다음 기사에서 자세히 논의할 것이며, HTTP 요청 단계에 대해 생각했던 것보다 더 많이 배우게 될 것입니다. 지금은 특정 값(4)을 확인하는 것으로 충분합니다(다음 기사에서 더 많은 값을 다룰 예정입니다). 두 번째 요점은 xmlHttp.responseText 속성을 사용하여 서버의 응답을 얻는 것입니다. 매우 간단합니다. 목록 6의 예제 메소드는 목록 5에서 전송된 데이터를 기반으로 서버에서 호출할 수 있습니다.
목록 6. 서버 응답 함수 처리
updatePage() {
if (xmlHttp.readyState == 4) {
var 응답 = xmlHttp.responseText;
document.getElementById("zipCode").value = 응답;
}
}
코드도 어렵지도 복잡하지도 않습니다. 서버가 호출할 때까지 기다리고 준비가 되면 서버에서 반환된 값(여기서는 사용자가 입력한 도시 및 주의 우편번호)을 사용하여 다른 양식 필드의 값을 설정합니다. 그러면 사용자가 버튼을 누르지 않아도 갑자기 우편번호가 포함된 zipCode 필드가 나타납니다! 앞서 데스크톱 애플리케이션으로 언급한 내용입니다. 빠른 응답, 역동적인 느낌 등이 모두 작은 Ajax 코드 덕분입니다.
주의깊은 독자라면 zipCode가 일반 텍스트 필드라는 것을 알 수 있을 것입니다. 서버가 ZIP 인코딩을 반환하면 updatePage() 메서드는 사용자가 재정의할 수 있는 도시/주 ZIP 인코딩으로 해당 필드의 값을 설정합니다. 이는 두 가지 이유 때문에 수행됩니다. 예제를 단순하게 유지하고 때로는 사용자가 서버에서 반환된 데이터를 수정할 수 있기를 원할 수 있음을 설명하기 위한 것입니다. 이 두 가지 사항을 명심하십시오. 이는 좋은 사용자 인터페이스 디자인에 중요합니다.
웹 양식에 연결하기 위한
또 다른 방법은 무엇입니까
?사실 얼마 남지 않았습니다. 한 JavaScript 메서드는 사용자가 양식에 입력한 정보를 캡처하여 서버에 보내고, 다른 JavaScript 메서드는 응답을 수신하고 처리하며 응답이 돌아올 때 필드 값을 설정합니다. 이 모든 것은 실제로 전체 프로세스를 시작하는 첫 번째 JavaScript 메서드 호출에 의존합니다. 가장 확실한 해결책은 HTML 양식에 버튼을 추가하는 것입니다. 하지만 그때는 2001년입니다. 그렇지 않나요? Listing 7과 같은 JavaScript 기술을 사용해 보자.
목록 7. Ajax 프로세스 시작
<form>
<p>도시: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>상태: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>우편번호: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
이것이 상당히 일반적인 코드처럼 느껴진다면 맞습니다. 그렇습니다! 사용자가 도시 또는 주 필드에 새 값을 입력하면 callServer() 메서드가 트리거되고 Ajax가 실행되기 시작합니다. 무슨 일인지 조금 이해가 되시나요? 글쎄, 그게 다야!
결론
이제 첫 번째 Ajax 애플리케이션 작성을 시작할 준비가 되었으며 최소한 리소스에 있는 기사를 주의 깊게 읽고 싶습니까? 그러나 이러한 애플리케이션의 작동 방식에 대한 기본 아이디어와 XMLHttpRequest 개체에 대한 기본적인 이해부터 시작할 수 있습니다. 다음 회에서는 이 객체를 마스터하고 JavaScript와 서버 간의 통신을 처리하는 방법, HTML 양식을 사용하는 방법, DOM 핸들을 얻는 방법을 배우게 됩니다.
이제 Ajax 애플리케이션이 얼마나 강력한지 잠시 생각해 보십시오. 버튼을 클릭하거나, 필드를 입력하거나, 콤보 상자에서 옵션을 선택하거나, 화면에서 마우스를 끌 때 즉시 응답하는 웹 양식을 상상해 보십시오. 비동기가 실제로 무엇을 의미하는지 생각해 보세요. JavaScript 코드가 실행 중이고 서버가 요청에 응답할 때까지 기다리지 않는 것에 대해 생각해 보세요. 어떤 종류의 문제에 직면하게 될까요? 어떤 분야에 들어갈 것인가? 이 새로운 접근 방식을 고려할 때 프로그래밍할 때 양식의 디자인을 어떻게 변경해야 합니까?
이러한 문제에 약간의 시간을 투자하면 전혀 이해하지 못하는 애플리케이션에 일부 코드를 잘라내거나 붙여넣는 것 이상의 이점을 얻을 수 있습니다. 다음 기사에서는 이러한 개념을 실제로 적용하여 애플리케이션이 이러한 방식으로 작동하도록 만드는 데 필요한 코드를 자세히 설명하겠습니다. 따라서 지금은 Ajax가 제공하는 가능성을 즐겨보세요.