Programing/javascript

간단한 ajax + php

Dongkkase 2010. 1. 4. 06:13
반응형
모든 파일은 utf-8로 작성되었습니다.

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/


반응형