快捷導(dǎo)航

JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁(yè)上動(dòng)態(tài)顯示文件內(nèi)容

更新時(shí)間：2015年03月25日 09:17:35 作者：feiwen

這篇文章主要介紹了JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁(yè)上動(dòng)態(tài)顯示文件內(nèi)容,可實(shí)現(xiàn)實(shí)時(shí)顯示服務(wù)器上txt文件內(nèi)容的功能,是Ajax基本應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁(yè)上動(dòng)態(tài)顯示文件內(nèi)容的方法。分享給大家供大家參考。具體如下：

下面的JS代碼是一個(gè)最基礎(chǔ)的JS的ajax實(shí)現(xiàn)，可以動(dòng)態(tài)顯示服務(wù)器上的文件ajax_info.txt文件的內(nèi)容

<!DOCTYPE html>
<html>
<head>
<title>sharejs.com</title>
<script>
function loadXMLDoc()
{
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");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

希望本文所述對(duì)大家的Ajax程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)
這篇文章主要介紹了Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2016-08-08
關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例
下面小編就為大家?guī)?lái)一篇關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
甩掉ashx和asmx使用jQuery.ajaxWebService請(qǐng)求WebMethod簡(jiǎn)練處理Ajax
這篇文章主要介紹了甩掉ashx和asmx使用jQuery.ajaxWebService請(qǐng)求WebMethod簡(jiǎn)練處理Ajax的相關(guān)資料,需要的朋友可以參考下
2016-08-08
Ajax in action 英文版配書(shū)源碼下載
Ajax in action 英文版配書(shū)源碼下載...
2007-05-05
Ajax 接收服務(wù)器返回的json響應(yīng)方法
今天小編就為大家分享一篇Ajax 接收服務(wù)器返回的json響應(yīng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Ajax獲得站點(diǎn)文件內(nèi)容實(shí)例不涉及服務(wù)器
選擇一部著作，會(huì)通過(guò) Ajax 實(shí)時(shí)獲得相關(guān)的名字，一個(gè)簡(jiǎn)單的不涉及服務(wù)器的Ajax實(shí)例,需要的朋友可以參考下
2014-05-05
jQuery的ajax傳參巧用JSON使用示例(附Json插件)
jQuery的ajax調(diào)用很方便，傳參的時(shí)候喜歡用Json的數(shù)據(jù)格式，使用示例代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
$AJAX集天氣\IP\多國(guó)語(yǔ)言翻譯MP3(可同步LRC歌詞顯示)\萬(wàn)年歷查詢(xún)通$
AJAX集天氣\IP\多國(guó)語(yǔ)言翻譯MP3(可同步LRC歌詞顯示)\萬(wàn)年歷查詢(xún)通
AJAX集天氣\IP\多國(guó)語(yǔ)言翻譯MP3(可同步LRC歌詞顯示)\萬(wàn)年歷查詢(xún)通...
2007-09-09
探討Ajax中同步與異步之間的區(qū)別
這篇文章主要是對(duì)Ajax中同步與異步之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
淺析JSONP解決Ajax跨域訪問(wèn)問(wèn)題的思路詳解
JSONP是一種使用JSON數(shù)據(jù)的方式，返回的不是JSON對(duì)象，是包含JSON對(duì)象的javaScript腳本。接下來(lái)通過(guò)本文給大家介紹jsonp解決ajax跨域訪問(wèn)問(wèn)題的思路，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-05-05