JavaScript 重新加载

在开发 Web 应用程序时，我们有时需要动态重新加载页面或某些元素，而不是通过刷新整个页面来实现。这就是 JavaScript 重新加载的一个典型用例。

JavaScript 重新加载通常是通过以下方式实现的：

方法一：使用location.reload()函数

这个函数可以重新加载整个页面，例如：

location.reload();

这个语句将重新加载整个页面，包括所有的 CSS、JavaScript 和图像等资源。

方法二：使用XMLHttpRequest对象

如果您只需要重新加载页面的一部分内容，可以使用 XMLHttpRequest 对象。这个对象可以通过 JavaScript 发送 HTTP 请求，并在后台获取响应。例如：

var request = new XMLHttpRequest();
request.open('GET', 'https://yoururl.com/fragment.html', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // 获取响应的 HTML 片段
    var newContent = request.responseText;

    // 将片段添加到页面
    document.getElementById("content").innerHTML = newContent;
  }
};

request.send();

这个语句将从 https://yoururl.com/fragment.html 获取一个 HTML 片段，并将它添加到 id 为 content 的元素中。

方法三：使用jQuery库

jQuery 库可以使操作 JavaScript 更加方便。使用此库，您可以轻松地通过 AJAX 加载内容和其他资源。例如：

$(document).ready(function() {
  // 点击按钮时重新加载某个元素
  $('button').click(function() {
    $('#content').load('https://yoururl.com/fragment.html');
  });
});

这个语句使用 jQuery 的 AJAX 函数，当用户单击按钮时，重新加载 id 为 content 的元素，从 https://yoururl.com/fragment.html 获取其内容。

结论

无论是重新加载整个页面还是页面的一部分内容，JavaScript 都是实现这个目的的有力工具。上述方法可以帮助您对 Web 页面进行更加巧妙的更改，而无需刷新整个页面。