這幾年JQuery寫多了，傳統的的javascript已經很久不寫了，不少東西都忘掉了，還有多少人記得javascript中實現ajax操作需要藉助XMLHttpRequest對象，其實jquery的ajax本質也是這個，好了，今天就花點時間演示一下如何用傳統javascript獲取文本內容並展示在頁面上，廢話不多少，直接上代碼，註釋寫的很詳細，大家應該能看懂：
複製代碼代碼如下:
<script type="text/javascript">
//(A)①獲取文本文件方法(傳統javascript實現AJAX寫法)
function LoadXMLDoc1()
{
var xmlhttp;
if(window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//onreadystatechange 存儲函數（或函數名），每當readyState 屬性改變時，就會調用該函數。
xmlhttp.onreadystatechange=function()
{
//readyState
//存有XMLHttpRequest 的狀態。從0 到4 發生變化。
//0: 請求未初始化
//1: 服務器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應已就緒
//status
//200: "OK"
//404: 未找到頁面
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","doc/test1.txt",true);
xmlhttp.send();
}
html頁面代碼：
複製代碼代碼如下:
<body>
<form id="form1" runat="server">
<%-- 獲取服務器上的文本文件並顯示--%>
<div id="myDiv1"><h2>通過ajax改變內容</h2></div>
<button id="btnChange1" type="button" onclick="LoadXMLDoc1()">通過AJAX 改變內容(獲取test1.txt上面的文本)</button>
</form>
</body>
演示效果：