當我們編寫網站時,常常需要局部刷新界面,以便實現頁面內容改變的效果。這時候,HTML的局部刷新代碼就非常有用。
<div id="myDiv"></div> <button onclick="loadDoc()">點擊加載</button> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("myDiv").innerHTML = this.responseText; } }; xhttp.open("GET", "mytext.txt", true); xhttp.send(); } </script>
以上代碼實現的效果為,有一個空的div元素,當用戶點擊按鈕時,會通過Ajax技術,向服務器請求一個文本文件,然后將文件內容顯示在這個div元素中。這個過程不會刷新整個頁面,而是只刷新了這個特定的部分。
需要注意的是,在HTML局部刷新代碼中,常用的是異步請求技術和DOM操作技術。異步請求中使用了XMLHttpRequest對象,可以發起請求并接收響應。而DOM操作則是通過JavaScript動態修改網頁元素來實現頁面內容的更改。
總之,HTML局部刷新代碼是一種非常便捷的技術,可以讓我們實現很多炫酷的效果,同時也可以提高網頁的加載速度和用戶體驗。