index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="head"> hello, guest!</div>
<input type="text" id="name" value="" onkeyup="change()"/>
</body>
</html>
example.js
//XmlHttpRequest 객체 생성
if (typeof ActiveXObject != 'undefined')
{
XMLHttpRequest = function ()
{
return new ActiveXObject(navigator.userAgent.indexOf('MSIE 5') >-1 ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}
var xhr = new XMLHttpRequest();
// 객체 생성하고 함수 생성
function change()
{
var name = document.getElementById("name").value;
var url = "exam.php?name="+name;
xhr.open("Get",url,true);
xhr.onreadystatechange = callback;
xhr.send();
}
function callback()
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
var txt = xhr.responseText;
document.getElementById('head').innerHTML = txt;
}
}
}
exam.php :
<?php
header("Content-Type: text/html; charset=UTF-8");
$name = $_REQUEST["name"];
echo "welcome ".$name."!!";
?>
[이미지 출처 : http://compstat.chonbuk.ac.kr/JavaScript/]
참고사이트 http://compstat.chonbuk.ac.kr/JavaScript/
댓글 없음:
댓글 쓰기