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对象实现页面的局部刷新。