JavaScript調用ajax獲取文本文件內容實現代碼

2019-11-20 20:53:35

字體：大中小

來源：轉載

供稿：網友

這幾年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> 

演示效果：