원문 : AJAX Tutorial
AJAX는 보다 인터랙티브한 응용프로그램을 만드는데 쓰일 수 있다.
다음의 AJAX 예제는 사용자가 HTML 폼에 데이터를 입력하는 동안 어떻게 웹 페이지가 웹 서버와 통신하는지를 보여준다.
위 데모 폼은 아래 소스와 같이 구성되어 있다.
"txt1" 이라는 입력 필드를 가진 단순한 HTML 폼이다.
입력 필드를 위한 이벤트 속성은 onkeyup 이벤트일 때 동작하는 함수를 정의하고 있다.
폼 밑의 문단에서는 "txtHint"라는 span을 포함하고 있다. 이 span은 서버로부터 데이터를 받아 보여주는 역할을 한다.
사용자가 데이터를 입력했을 때 "showHint()"라는 함수가 실행된다. 이 함수는 "onkeyup" 이벤트가 발생할 때 실행하게 된다. 다른 말로 하자면, 사용자가 입력 필드 안에서 손가락을 키보드에서 뗄 때마다 showHint라는 함수를 호출한다.
예제 설명 - showHint() 함수
showHint() 함수는 매우 간단한 자바스크립트 함수로 HTML 페이지의 <head> 부분 사이에 위치한다.
위의 함수는 문자가 입력 필드 안에 입력될 때마다 실행된다.
만약 입력 필드 안에 입력이 있다면(str.length > 0), showHint() 함수가 다음을 수행한다.
만약 입력 필드가 비어있다면, 함수는 txtHint 위치의 내용을 비워버린다.
앞서 showHint() 함수는 GetXmlHttpObject() 라는 함수를 호출한다.
GetXmlHttpObject() 함수의 목적은 서로 다른 브라우저들에 맞게 다른 XMLHTTP 객체를 생성할 수 있도록 한다.
stateChanged() 함수의 소스는 다음과 같다.
stateChanged() 함수는 XMLHTTP 객체의 상태가 바뀔 때마다 실행된다.
상태가 4("완료")이면, txtHint 자리의 내용은 서버에서 돌아온 내용으로 채워진다.
AJAX는 보다 인터랙티브한 응용프로그램을 만드는데 쓰일 수 있다.
AJAX 제시어 예제
다음의 AJAX 예제는 사용자가 HTML 폼에 데이터를 입력하는 동안 어떻게 웹 페이지가 웹 서버와 통신하는지를 보여준다.
예제 설명 - HTML 폼
위 데모 폼은 아래 소스와 같이 구성되어 있다.
<form>
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
"txt1" 이라는 입력 필드를 가진 단순한 HTML 폼이다.
입력 필드를 위한 이벤트 속성은 onkeyup 이벤트일 때 동작하는 함수를 정의하고 있다.
폼 밑의 문단에서는 "txtHint"라는 span을 포함하고 있다. 이 span은 서버로부터 데이터를 받아 보여주는 역할을 한다.
사용자가 데이터를 입력했을 때 "showHint()"라는 함수가 실행된다. 이 함수는 "onkeyup" 이벤트가 발생할 때 실행하게 된다. 다른 말로 하자면, 사용자가 입력 필드 안에서 손가락을 키보드에서 뗄 때마다 showHint라는 함수를 호출한다.
예제 설명 - showHint() 함수
showHint() 함수는 매우 간단한 자바스크립트 함수로 HTML 페이지의 <head> 부분 사이에 위치한다.
var xmlhttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
위의 함수는 문자가 입력 필드 안에 입력될 때마다 실행된다.
만약 입력 필드 안에 입력이 있다면(str.length > 0), showHint() 함수가 다음을 수행한다.
- 서버로 보낼 URL(파일명)을 정의한다.
- 입력 필드의 내용과 함께 파라미터 (q)를 URL에 붙인다.
- 서버로부터 캐시 파일이 사용되는 것을 막기 위해 임의의 수를 붙인다.
- XMLHTTP 객체를 생성하고 변경사항이 있을 때 그 객체에 stateChanged라는 함수를 실행할 것을 명령한다.
- 앞서의 URL과 함께 XMLHTTP 객체를 연다.
- 서버에 HTTP 요청을 보낸다.
만약 입력 필드가 비어있다면, 함수는 txtHint 위치의 내용을 비워버린다.
예제 설명 - GetXmlHttpObject() 함수
앞서 showHint() 함수는 GetXmlHttpObject() 라는 함수를 호출한다.
GetXmlHttpObject() 함수의 목적은 서로 다른 브라우저들에 맞게 다른 XMLHTTP 객체를 생성할 수 있도록 한다.
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
예제 설명 - stateChanged() 함수
stateChanged() 함수의 소스는 다음과 같다.
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
stateChanged() 함수는 XMLHTTP 객체의 상태가 바뀔 때마다 실행된다.
상태가 4("완료")이면, txtHint 자리의 내용은 서버에서 돌아온 내용으로 채워진다.
'jQuery' 카테고리의 다른 글
| [고급] AJAX 데이터베이스 예제 (1) | 2009.08.04 |
|---|---|
| [고급] AJAX 제시어 소스코드 (0) | 2009.08.03 |
| [기초] AJAX - 서버 측 스크립트 (0) | 2009.07.28 |
| [기초] AJAX - 서버에 요청하기 (0) | 2009.07.28 |
| [기초] AJAX - XMLHttpRequest 객체 (0) | 2009.07.28 |
