<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>纯AJAX例子：读取数据</title>
</head>
<body>
<script type="text/javascript">
function ajaxCall()
{
var xmlHttp;
try{// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();//实例化XMLHttpRequest对象
}
catch (e)
{
// Internet Explorer 5+
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("浏览器不支持AJAX！");
return false;
}
}
}
//绑定数据处理函数。
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if (xmlHttp.status == 200)
{
document.getElementById('txtResult').innerHTML = document.getElementById('txtUsername').value + xmlHttp.responseText;
} else
{
alert('请求出错.');
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
}
}
xmlHttp.open("GET","data.txt",true);//异步请求数据
xmlHttp.send(null);
}
</script>
<form style="text-align:left">
姓名: <input type="text" id="txtUsername" style="400px;" />
<br />
测试:<input type="button" id="btn" value="测试" onclick="ajaxCall();" style="400px;" />
<br />
结果: <textarea id="txtResult" style="400px;"></textarea>
</form>
</body>
</html>