JavaScript局部刷新詳解

JavaScript是客戶端語言，可以通過動態的改變DOM對象實現局部刷新。

一、js局部刷新div

利用JavaScript可以動態的改變dom對象，可以方便的實現局部刷新。以下示例代碼用於局部刷新div。

HTML:
<div id="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, 
    mattis ac neque. 

<script>
var div = document.getElementById('myDiv');
div.innerHTML = 'content changed';
</script>

</div>

注意，div的ID為myDiv，js代碼中獲取div對象並修改其innerHTML實現局部刷新。

二、js代碼局部刷新div

當頁面中某個DIV中有較多的文本需要動態載入，並且需要有多個數據源時，我們可以通過動態的載入js文件實現局部刷新。以下示例代碼用於局部刷新div。

HTML:
<div id="myDiv">content here</div>
<a href="#" onclick="loadJS('loadcontent.js');">Load Content</a>

JS:
function loadJS(file) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", file, true);
    xmlhttp.send();
}

注意，我們需要自定義一個loadJS函數，用於動態獲取js文件並執行代碼，從而實現局部刷新。

三、js局部刷新屬於啥

JavaScript局部刷新屬於前端技術，是通過動態改變DOM對象實現局部刷新的技術。

四、js局部刷新有幾種

JavaScript實現局部刷新的方法有多種，包括動態載入js，通過XMLHttpRequest動態獲取數據並修改DOM內容，通過js代碼動態改變DOM內容等等。

五、js局部刷新頁面

一般來說，JavaScript實現的局部刷新都是在當前頁面中完成的。可以通過動態改變DOM內容達到局部刷新的效果。

六、js局部刷新後事件

當我們使用JavaScript實現局部刷新時，可能需要在局部刷新完成後執行某個事件。以下示例代碼演示如何使用回調函數實現局部刷新後事件。

JS:
function loadJS(file, callback) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", file, true);
    xmlhttp.send();
}

loadJS('loadcontent.js', function(response) {
    document.getElementById("myDiv").innerHTML = response;
    alert('局部刷新完成！');
});

注意，我們在loadJS函數中添加了回調函數，當局部刷新完成後可以執行回調函數中需要的操作。

七、js局部刷新表格

對於表格的局部刷新，可以使用JavaScript動態的添加、刪除表格行、列，或者是通過修改表格cell的innerHTML達到局部刷新的效果。以下示例代碼用於局部刷新表格。

HTML:
<table id="myTable">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
    </tr>
</table>

JS:
var table = document.getElementById('myTable');

// 添加表格行
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = 'New Row 1 Column 1';
cell2.innerHTML = 'New Row 1 Column 2';
cell3.innerHTML = 'New Row 1 Column 3';

//修改表格cell的innerHTML
table.rows[1].cells[1].innerHTML = 'New Row 1 Column 2 Updated';

注意，我們可以通過table.insertRow和row.insertCell方法動態添加表格行、列，通過修改表格cell的innerHTML實現局部刷新的效果。

八、js局部刷新數據

使用Javascript實現局部刷新時，最常見的就是通過XMLHttpRequest動態獲取數據並修改DOM內容。以下示例代碼演示如何使用XMLHttpRequest實現局部刷新數據。

HTML:
<div id="myData"></div>
<button onclick="loadData();">Load Data</button>

JS:
function loadData() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myData").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "mydata.txt", true);
    xmlhttp.send();
}

注意，我們在loadData函數中使用XMLHttpRequest動態獲取數據mydata.txt，並將其改變DOM對象實現局部刷新。

九、Vue局部刷新

Vue是一種前端JS框架，可以快速的構建大型單頁應用，並且可以實現局部刷新。以下示例代碼用於Vue實現局部刷新。

HTML:
<div id="myApp">
    {{ message }}
</div>

JS:
var app = new Vue({
    el: '#myApp',
    data: {
        message: 'content here'
    }
})

//修改數據以實現局部刷新
app.message = 'content changed';

注意，我們可以通過Vue添加單頁應用，並且修改其中的數據實現局部刷新。

十、js實現頁面局部刷新

JavaScript實現頁面局部刷新的方法主要有兩種：一種是使用js動態的改變DOM對象實現局部刷新；一種是使用XMLHttpRequest動態獲取數據並修改DOM內容。以下示例代碼演示前者的實現方法。

HTML:
<div id="myContent">content here</div>
<a href="#" onclick="loadPageContent('content.html');">Load Content</a>

JS:
function loadPageContent(file) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myContent").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", file, true);
    xmlhttp.send();
}

注意，我們需要自定義一個loadPageContent函數，用於動態獲取HTML文件並修改DOM對象實現頁面的局部刷新。