在 JavaScript 中加载新页面

在 web 开发中，有时需要在用户点击某个元素后，在当前页面中加载一个新的页面，而不是跳转到一个完全新的页面。这种情况下，可以使用 JavaScript 来动态地加载新页面。

使用 location.href

最简单的方法是使用 location.href 属性来修改当前页面的 URL，实现加载新页面的效果。

location.href = 'new_page.html';

这会立即将当前页面重定向到 new_page.html 页面，所有的当前页面的状态都会丢失。这种方法的优点是简单易用，同时也支持在新标签页中打开页面。

使用 AJAX

如果需要加载一个新的页面并在当前页面上显示其内容，可以使用 AJAX 技术。这种方法的优点是可以避免完全刷新页面，减少数据传输量、降低服务器负载等。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'new_page.html');
xhr.onload = function() {
  if (xhr.status === 200) {
    document.getElementById('content').innerHTML = xhr.responseText; // 将新页面的内容渲染到当前页面上
  }
};
xhr.send();

在上面的例子中，创建了一个 XMLHttpRequest 对象，通过 GET 请求加载 new_page.html 页面，并将其内容渲染到当前页面上。需要注意的是，此时加载的新页面不能包含任何 <script> 标签或监听 click 事件等页面级别的操作，否则会导致当前页面的执行流被中断。

使用 jQuery

使用 jQuery 这种流行的 JavaScript 库，也可以轻松地实现加载新页面的功能。

$('#content').load('new_page.html');

在上面的例子中，使用了 jQuery 的 load() 函数，直接从 new_page.html 页面中加载内容，并将其插入到 #content 元素中。和上面的 AJAX 方法相比，这种方法更加简洁易懂，也不需要手动处理 AJAX 请求的细节。

总结

以上对在 JavaScript 中加载新页面的几种方法进行了介绍。每种方法各有优劣，可以根据具体情况进行选择。需要注意的是，在选择使用其中一种方法时，应该清楚地理解其实现原理和局限性，避免出现意外的问题。