<!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="width:400px;" />
<br />
測試:<input type="button" id="btn" value="測試" onclick="ajaxCall();" style="width:400px;" />
<br />
結果: <textarea id="txtResult" style="width:400px;"></textarea>
</form>
</body>
</html>