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ì)也是這個，好了，今天就花點(diǎn)時間演示一下如何用傳統(tǒng)javascript獲取文本內(nèi)容并展示在頁面上，廢話不多少，直接上代碼，注釋寫的很詳細(xì)，大家應(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ù)名），每當(dāng) 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>
演示效果：
復(fù)制代碼 代碼如下:
<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ù)名），每當(dāng) 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頁面代碼：
復(fù)制代碼 代碼如下:
<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)文章
JS按位非(~)運(yùn)算符與~~運(yùn)算符的理解分析
按位非運(yùn)算符，簡單的理解就是改變運(yùn)算數(shù)的符號并減去1，當(dāng)然，這是只是簡單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)2011-07-07
一文帶你了解微信小程序數(shù)據(jù)綁定、事件綁定以及事件傳參、數(shù)據(jù)同步
在微信小程序日常開發(fā)中,特定場景下我們需要事件攜帶參數(shù)到要執(zhí)行的函數(shù)中,下面這篇文章主要給大家介紹了關(guān)于微信小程序數(shù)據(jù)綁定、事件綁定以及事件傳參、數(shù)據(jù)同步的相關(guān)資料,需要的朋友可以參考下2022-11-11
前端開發(fā)之JS生成32位隨機(jī)數(shù)的方法舉例
最近有個需求,是需要生成32位長度的隨機(jī)數(shù),下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)之JS生成32位隨機(jī)數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章介紹了去掉gridPanel表頭全選框的小例子，有需要的朋友可以參考一下2013-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)本地圖片文件拖拽效果，拖拽文件到指定位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript中各種時間轉(zhuǎn)換問題詳解(YYYY-MM-DD、時間戳、中國標(biāo)準(zhǔn)時間)
在某些場景下,需要將時間轉(zhuǎn)換為字符串進(jìn)行展示或傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript中各種時間轉(zhuǎn)換問題(YYYY-MM-DD、時間戳、中國標(biāo)準(zhǔn)時間)的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了一道關(guān)于JavaScript變量作用域的面試題，如何解決這道面試題，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了JS時間戳與日期格式的轉(zhuǎn)換小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}，非常具有實用價值，需要的朋友可以參考下2018-10-10
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉查找樹的定義與表示方法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉查找樹的定義與表示方法,簡單講述了二叉查找樹的概念、特點(diǎn)及javascript針對二叉查找樹的創(chuàng)建、插入、遍歷等操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04