javascript - 单个 ajax 请求更新 2 个不同的

Question

是否可以使用 1 个 ajax 同时更新 2 个不同的目标 DIV？

假设我有下面的index.html:

<script>
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("main_body").innerHTML = xmlhttp.responseText;}
                                                 }
      xmlhttp.open("GET","some_page.php",true);
      xmlhttp.send();
</script>

<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>

在上面的例子中，我所知道的是some_page.php必须写成如下:

<php
     echo "<div id="update_1"><h1>Apple</h1></div>
           <div id="dont_ajax">A big size of html content....</div>
           <div id="update_2"><h1>Orange</h1></div>";
?>

我不希望 some_page.php 加载 id="dont_ajax"的内容，因为它的 html 内容很大。我正在寻找某种解决方案，例如:

<script>
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("update_1").innerHTML = xmlhttp.responseText(1);
        document.getElementById("update_2").innerHTML = xmlhttp.responseText(2);}
                                             }
  xmlhttp.open("GET","some_page.php",true);
  xmlhttp.send();
</script>

<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>

这样 some_page.php 就可以简单如下:

<php
 echo "<h1>Apple</h1>"; //(become respondtext(1))

 echo "<h1>Orange</h1>"; //(become respondtext(2))
?>

我知道上面的示例行不通，我只是想向您展示问题以及我想要实现的目标。请给我一些想法，谢谢。或者如果您有其他方法来实现这一目标，请提出建议。

我需要原生 JS 的解决方案。

Answer 1

是的，这是可能的。您可以更新任意数量的元素。这取决于您准备和解析回复的方式。

这段代码很糟糕，因为 ajax 响应只有一个responseText:

<php
 echo "<h1>Apple</h1>"; //(become respondtext(1))
 echo "<h1>Orange</h1>"; //(become respondtext(2))
?>

您将收到<h1>Apple</h1><h1>Orange</h1>在响应中，您将生成更多丑陋的代码并试图将其分成几部分。

最好的解决方案是准备 JSON 字符串:

<php
 echo "{update_1: '<h1>Apple</h1>', update_2: '<h1>Orange</h1>'}";
?>

然后解析响应并更新文档:

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var data = JSON.parse(xmlhttp.responseText);
   ['update_1', 'update_2'].forEach(function(i){
      document.getElementById(i).innerHTML = data[i];
   });
}