index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='quickstart.js'></script>
<title>Ajax with PHP: Quickstart</title>
</head>
<body>
Server wants to know your name:<input type='text' id='myName' value='' onchange='process()'>
<div id='message'></div>
Server wants to know your fullName<input type='text' id='myFullName' value=''>
</body>
</html>
quickstart.js:
//初始化xmlHttpRequest对象
var xmlHttpRequest = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
//声明对象用来存储将要试用的xmlHttpRequest对象
var xmlHttp;
//如果是在ie下
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e)
{
xmlHttp = false;
}
}
//如果是Mozilla或者其他浏览器
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
//返回xmlHttpRequest对象或者错误信息
if(!xmlHttp)
{
alert('Error creating the xmlHttpRequest object.');
}
else
{
return xmlHttp;
}
}
//使用xmlHttpRequest发送异步请求
function process()
{
//在xmlHttpRequest对象不忙时进行处理
if(xmlHttpRequest.readyState == 4 || xmlHttpRequest.readyState == 0)
{
//获得表单中输入的用户名字
name = encodeURIComponent(document.getElementById('myName').value);
//在服务器端执行quickstart.php
xmlHttpRequest.open('GET','quickstart.php?name=' + name,true);
//定义处理服务器端返回相应的函数
xmlHttpRequest.onreadystatechange = handleServerResponse;
//向服务器发送请求
xmlHttpRequest.send(null);
}
else
{
//如果服务器繁忙，1秒钟后重试
setTimeout('process()',1000);
}
}
//当收到服务器端的相应的时候自动执行
function handleServerResponse()
{
//在处理结束时进入下一步
if(xmlHttpRequest.readyState == 4)
{
//状态为200表示处理成功结束
if(xmlHttpRequest.status == 200)
{
//获得服务器端发出的xml请求
xmlResponse = xmlHttpRequest.responseXML;
//获得XML中的文档对象
xmlDocumentElement = xmlResponse.documentElement;
//获得第一个文档对象的文本信息，第一个孩子节点
helloMessage = xmlDocumentElement.firstChild.data;
//使用从服务器端发送的消息更新客户端显示的内容
document.getElementById('message').innerHTML = '<i>' + helloMessage + '</i>';
//1秒钟后重新开始
//setTimeout('process()',1000);
}
//如果HTTP的状态不是200表示出错
else
{
alert('There was a problem accessing the server: ' + xmlHttpRequest.statusText);
}
}
}
quickstart.php:
<?php
//创建一个XML格式的输出
header('Content-Type: text/xml');
//创建XML头
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
//创建<response>元素
echo '<response>';
//获取姓名
$name = $_GET['name'];
//根据从客户端获取的用户名创建输出
$userNames = array('JASHON','BOM','MICROSOFT','AMD','SUN','INTEL');
if(in_array(strtoupper($name),$userNames))
echo 'Hello,master '.htmlentities($name).'!';
else if(trim($name == ''))
echo 'Stranger,please tell me your name!';
else
echo htmlentities($name).', I don//'t know you!';
//关闭response标签
echo '</response>';
?>