重新加载 div 容器中的 AJAX - Javascript

Ajax（Asynchronous JavaScript and XML）可以通过在不刷新整个页面的情况下更新局部内容，从而实现动态页面加载。本文将介绍如何使用Javascript重新加载包含Ajax请求的div容器。

步骤

1. 首先，我们需要定义一个函数，该函数将接收div容器的ID和Ajax请求的URL。

function reloadDiv(container, url) {
   // TODO: function logic
}

2. 在该函数中，我们使用XMLHttpRequest对象来发起Ajax请求。我们将使用GET方法发送请求，并在请求成功时更新div容器中的内容。同时，我们使用encodeURIComponent()函数对请求的URL进行编码。

function reloadDiv(container, url) {
   var xhr = new XMLHttpRequest();
   xhr.open("GET", url, true);
   xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
         var content = xhr.responseText;
         var div = document.getElementById(container);
         div.innerHTML = content;
      }
   };
   xhr.send(null);
}

3. 最后，我们只需在需要重新加载div容器的地方调用reloadDiv()函数，并传入div容器的ID和Ajax请求的URL即可。

reloadDiv("container", "http://example.com/data");

示例代码

function reloadDiv(container, url) {
   var xhr = new XMLHttpRequest();
   xhr.open("GET", url, true);
   xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
         var content = xhr.responseText;
         var div = document.getElementById(container);
         div.innerHTML = content;
      }
   };
   xhr.send(null);
}

reloadDiv("container", "http://example.com/data");

总结

使用Javascript重新加载Ajax请求的div容器非常简单，只需要定义一个函数并在需要重新加载的地方调用这个函数即可。注意，为了避免跨域请求的问题，我们应该将Ajax请求发送到与当前页面相同的域名下。