JavaScript調(diào)用ajax獲取文本文件內(nèi)容實現(xiàn)代碼
更新時間：2014年03月28日 14:45:47 作者：
這篇文章主要介紹了JavaScript調(diào)用ajax獲取文本文件內(nèi)容的方法,需要的朋友可以參考下
這幾年JQuery寫多了，傳統(tǒng)的的javascript已經(jīng)很久不寫了，不少東西都忘掉了，還有多少人記得javascript中實現(xiàn)ajax操作需要借助XMLHttpRequest對象，其實jquery的ajax本質(zhì)也是這個，好了，今天就花點時間演示一下如何用傳統(tǒng)javascript獲取文本內(nèi)容并展示在頁面上，廢話不多少，直接上代碼，注釋寫的很詳細，大家應(yīng)該能看懂：
<script type="text/javascript">
//(A)①獲取文本文件方法(傳統(tǒng)javascript實現(xiàn)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 存儲函數(shù)（或函數(shù)名），每當 readyState 屬性改變時，就會調(diào)用該函數(shù)。
xmlhttp.onreadystatechange=function()
{
//readyState
//存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
//0: 請求未初始化
//1: 服務(wù)器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應(yīng)已就緒
//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">
<%-- 獲取服務(wù)器上的文本文件并顯示--%>
<div id="myDiv1"><h2>通過ajax改變內(nèi)容</h2></div>
<button id="btnChange1" type="button" onclick="LoadXMLDoc1()">通過 AJAX 改變內(nèi)容(獲取test1.txt上面的文本)</button>
</form>
</body>
演示效果：
復制代碼 代碼如下:
<script type="text/javascript">
//(A)①獲取文本文件方法(傳統(tǒng)javascript實現(xiàn)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 存儲函數(shù)（或函數(shù)名），每當 readyState 屬性改變時，就會調(diào)用該函數(shù)。
xmlhttp.onreadystatechange=function()
{
//readyState
//存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
//0: 請求未初始化
//1: 服務(wù)器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應(yīng)已就緒
//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">
<%-- 獲取服務(wù)器上的文本文件并顯示--%>
<div id="myDiv1"><h2>通過ajax改變內(nèi)容</h2></div>
<button id="btnChange1" type="button" onclick="LoadXMLDoc1()">通過 AJAX 改變內(nèi)容(獲取test1.txt上面的文本)</button>
</form>
</body>
演示效果：
相關(guān)文章
Javascript自定義函數(shù)判斷網(wǎng)站訪問類型是PC還是移動終端
如果，能夠判斷出訪問Web網(wǎng)頁的類型(PC還是移動終端)。就可以解決許多絢麗多彩的 Flash效果出不來的問題2014-01-01
Javascript在IE和FireFox中的不同表現(xiàn)簡析
本文將詳細介紹Javascript在IE和FireFox中的不同表現(xiàn)，本人整理了一下，需要的朋友可以參考下2012-12-12
文件上傳是 Web 開發(fā)肯定會碰到的問題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點續(xù)傳的相關(guān)資料,需要的朋友可以參考下2021-08-08
微信小程序下面商品左右滑動上面tab也跟隨變動功能實現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動上面tab也跟隨變動功能,也就是點擊tab切換下面的商品信息，滑動下面的商品信息tab也進行切換，本文給大家分享實現(xiàn)代碼，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05
fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下
2017-03-03 
JS獲取鍵盤按鍵的鍵碼event.keyCode，記錄-方便查找。需要的朋友參考下本教程吧
2017-01-01 
JavaScript?中的引用類型Date?和RegExp的詳細介紹
這篇文章主要介紹了JavaScript中的引用類型Date和RegExp的詳細介紹,引用值(或者對象)是某個特定引用類型的實例,下文相關(guān)介紹，需要的小伙伴可以參考一下
2022-07-07