AJAX - 서버에 요청 보내기
서버에 뒷단에서 요청을 보내기 위해서는 open()과 send() 메소드를 사용한다.
open() 메소드는 3개의 인수를 가진다. 첫 번째는 어떤 방식으로.(GET 또는 POST) 요청을 보낼 것인지에 대한 정의이다. 두 번째는 서버측 스크립트의 URL을 지정한다. 세 번째 인수는 비동기적으로 다뤄져야 하는지를 정한다.
send() 메소드는 서버에 요청을 보낸다. 만약 HTML과 PHP 파일이 같은 디렉토리에 있다고 한다면 코드는 아래와 같다.
xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);
xmlhttp.send(null);
이제 언제 AJAX 함수를 실행할지 정해야 한다.
우리는 이 함수를 사용자가 "이름" 필드에 무언가 입력했을 때 뒷단에서 실행하게 할 것이다.
<form name="myForm">
이름: <input type="text" name="username" onkeyup="ajaxFunction();" />
시간: <input type="text" name="time" />
</form>
이름: <input type="text" name="username" onkeyup="ajaxFunction();" />
시간: <input type="text" name="time" />
</form>
"testAjax.htm" 파일은 아래와 같이 바뀌었다.
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);
}
</script>
<form name="myForm">
이름: <input type="text" name="username" onkeyup="ajaxFunction();" />
시간: <input type="text" name="time" />
</form>
</body>
</html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);
}
</script>
<form name="myForm">
이름: <input type="text" name="username" onkeyup="ajaxFunction();" />
시간: <input type="text" name="time" />
</form>
</body>
</html>
다음 장에서는 AJAX 응용프로그램을 완성할 "time.php" 스크립트를 만들어 보자.
'jQuery' 카테고리의 다른 글
| [고급] AJAX 제시어 예제 (0) | 2009.08.03 |
|---|---|
| [기초] AJAX - 서버 측 스크립트 (0) | 2009.07.28 |
| [기초] AJAX - XMLHttpRequest 객체 (0) | 2009.07.28 |
| [기초] AJAX 브라우저 지원 (0) | 2009.07.28 |
| [기초] AJAX 예제 (0) | 2009.07.28 |
