當前位置:編程學習大全網 - 編程語言 - 壹個html網頁,我想刷新裏面的壹部分,怎麽辦

壹個html網頁,我想刷新裏面的壹部分,怎麽辦

題主可使用javascript裏的ajax函數來實現html頁面裏的局部刷新功能,比如:我只刷新html頁面中的某個div,把div中的內容換掉,或者數據更新,可以通過改變ajax函數的url訪問路徑來實現,可以訪問某個目錄下的文件,或者發送請求到服務器來刷新數據都可以,這是比較常用的方法,我舉個例子:

我在html頁面中用ajax來將ajax_info.txt這個本地文本文檔中的內容重新刷新加載到id為myDiv的div控件中,而頁面不用整個刷新。

ajax_info.txt內容為:

<p>AJAX?不是新的編程語言,而是壹種使用現有標準的新方法。

</p>

<p>

AJAX?是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下

</p>

html頁面代碼為:

<html>

<head>

<meta?charset="utf-8">

<script>

function?loadXMLDoc()

{

var?xmlhttp;

if?(window.XMLHttpRequest)

{

//?IE7+,?Firefox,?Chrome,?Opera,?Safari?瀏覽器執行代碼

xmlhttp=new?XMLHttpRequest();

}

else

{

//?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","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

<div?id="myDiv"><h2>使用?AJAX?修改該文本內容</h2></div>

<button?type="button"?onclick="loadXMLDoc()">修改內容</button>

</body>

</html>

原本頁面效果為:

點擊按鈕後頁面效果為:

題主可以壹試,如果覺得繁瑣,可以看看jquery的ajax函數,是經過優化和簡化的,更方便使用和上手。

  • 上一篇:第壹次做西紅柿炒雞蛋的優秀作文
  • 下一篇:形勢與政策關於就業的論文
  • copyright 2024編程學習大全網