javascript - 纯 JavaScript/Ajax 从多个外部文件获取内容并将它们附加到各自的 div

Question

我真的不擅长 JavaScript，因此需要帮助。我正在尝试根据某些条件组装最终布局。

我的问题:我知道 JavaScript 是完全错误的。我正在寻找正确的语法和语句来从多个文件中获取该内容并将它们附加到各自的 div 中。

请注意:我并不是在寻找任何 jQuery 解决方案，因为这是我的模板中唯一的 JavaScript 函数，而且我不想为其加载整个库。

我的index.php文件

<script type="text/javascript">
function loadLayout(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {xmlhttp=new XMLHttpRequest();}
    else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {document.getElementById("header").innerHTML=xmlhttp.responseText;}
        {document.getElementById("body").innerHTML=xmlhttp.responseText;}
        {document.getElementById("footer").innerHTML=xmlhttp.responseText;}
      }
var 
x=window.innerWidth||document.documentElement.clientWidth||document.getElementsByTagName.clientWidth;
        if (x <= 800) {
            xmlhttp.open("GET","header1.php",true); // this should append to Div with ID "header"
        } else if (x > 800 && x <=1200) {
            xmlhttp.open("GET","body1.php",true); // this should append to Div with ID "body"
        } else if (x >1200) {
            xmlhttp.open("GET","footer1.php",true);// this should append to Div with ID "footer"
        }
        xmlhttp.send();
    }
    window.onload = loadLayout; // When the page first loads
    window.onresize = loadLayout; // When the browser changes size
    </script>

    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

我的header.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-1.php';
}

我的body.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-2.php';
}

我的footer.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-3.php';
}

Answer 1

下面的代码(完整注释)应该对您有帮助:

/* we put all your code inside an IIFE, so we don't pollute the global scope */
(function() {
  /* our AJAX helper function */
  function ajax(url, callback, method) {
    if (!method) method = 'GET';

    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.addEventListener('load', function() {
      callback.call(xhr, xhr.responseText);
    });
    xhr.send();
  }

  /* we create a variable to store our current layout
    (so, we only make the AJAX request if the layout has changed) */
  var lastLayout = [];

  function loadLayout() {
    /* we get the current width (didn't change your code) */
    var width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName.clientWidth;
    /* and then, we use check what layout we must load */
    var layout = width <= 800 ? ['body'] : width <= 1200 ? ['header', 'body'] : ['header', 'body', 'footer'];

    /* if the new layout is different from the last loaded */
    if (lastLayout.toString() !== layout.toString()) {
      /* firstly, we set our current loaded to the new one */
      lastLayout = layout;

      /* we empty all the divs */
      document.getElementById('header').innerHTML = '';
      document.getElementById('body').innerHTML = '';
      document.getElementById('footer').innerHTML = '';

      /* loop through the layout divs that should be loaded */
      layout.forEach(function(str) {
        /* we use the variable to dinamically open the correct PHP file */
        ajax(str + '1.php', function(result) {
          /* and then, we use the variable again to fill the correct div */
          document.getElementById(str).innerHTML = result;
        });
      });
    }
  }  

  window.onload = window.onresize = loadLayout;
})();