JS或jQuery实现页面局部刷新的方法

在网页开发中，实现页面局部刷新能有效提升用户体验，减少不必要的数据加载与页面重绘。JS和jQuery提供了多种实现局部刷新的途径。

利用原生JS的XMLHttpRequest对象可以达成这一目标。创建XMLHttpRequest实例，它能在不刷新整个页面的情况下与服务器进行异步通信。例如：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'data.php', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('targetDiv').innerHTML = xhr.responseText;
    }
};
xhr.send();

这段代码向服务器请求data.php文件的数据，请求成功后，将服务器返回的数据填充到id为'targetDiv'的元素中，从而实现该区域的局部刷新。

Fetch API也是JS实现局部刷新的有力工具。它提供了更简洁、现代的接口来处理网络请求。示例代码如下：

fetch('data.php')
 .then(response => response.text())
 .then(data => {
        document.getElementById('targetDiv').innerHTML = data;
    });

Fetch API返回一个Promise对象，链式调用then方法处理响应数据，并更新指定区域。

jQuery简化了局部刷新的操作。使用$.ajax方法，可以方便地进行异步请求。代码示例：

$.ajax({
    url: 'data.php',
    type: 'GET',
    success: function(response) {
        $('#targetDiv').html(response);
    }
});

$.ajax方法通过配置参数指定请求的URL、类型等，成功获取响应后更新目标元素的HTML内容。

另外，jQuery的.load方法能直接从服务器加载数据并注入到指定元素中。例如：

$('#targetDiv').load('data.php');

这一行代码即可实现将data.php的数据加载到id为'targetDiv'的元素内。

在实际应用中，需根据项目需求和性能考量，选择最合适的方法。无论是原生JS还是jQuery，掌握这些实现页面局部刷新的技巧，都能为用户带来更流畅、高效的网页交互体验，提升项目的质量与竞争力。