使用没有 Jquery 的 Javascript AJAX 导入外部 HTML 内部内容答案

【问题标题】：Importing external HTML inner content with Javascript AJAX without Jquery使用没有 Jquery 的 Javascript AJAX 导入外部 HTML 内部内容
【发布时间】：2013-04-22 16:59:48
【问题描述】：

我需要一些帮助，我有以下 HTML 代码：

<ul class="menu-list">
  <li class="active"><a href="cont1.html" title="Title 1">Link 1</a></li>
  <li><a href="cont2.html" title="Title 2">Link 2</a></li>
  <li><a href="cont3.html" title="Title 3">Link 3</a></li>
  <li><a href="cont4.html" title="Title 4">Link 4</a></li>
</ul>

<div class="content">           
   <div class="innerContent">
        <!-- Insert external HTML content here -->
   </div>
</div>

因此，例如，当我单击“Link 1”时，我需要从“cont1.html”获取内部内容以附加到 div class="innerContent" 中，不要忘记添加“class=点击的 li 内的“活动”。仅使用 Javascript/AJAX 而不使用 Jquery 并且不更改此 HTML。

我做了一个类似的example here，但正在处理同一页面的内容，而不是不同的页面，我不知道为什么但在 IE 上不起作用。

拜托，有人可以帮助我吗？

【问题讨论】：

标签： javascript html ajax import

【解决方案1】：

试试这个

  <ul class="menu-list">
   <li class="active"><a href="javascript:display('cont1.html');" title="Title 1" >Link 1</a></li>
   <li><a href="javascript:display('cont2.html');" title="Title 2" >Link 2</a></li>
   <li><a href="javascript:display('cont3.html');" title="Title 3" >Link 3</a></li>
   <li><a href="javascript:display('cont4.html');" title="Title 4" >Link 4</a></li>
  </ul>

<div class="content">           
  <div class="innerContent" id="innerContent">
  </div>
</div>

javaScript

function display(url)
{
   var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
           xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("innerContent").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

【讨论】：

无法更改 makup HTML 并使用“onclick”属性、对象标记或 iframe。必须使用原始 HTML 而不做任何更改。无论如何都感谢您尝试
那么你也有这些限制吗？
是的，不幸的是我有。不知道大家有没有看到我做的这个例子stackoverflow.com/questions/15884640/…
我看到了，但您需要此页面中其他 html 页面的内容。因此，您有两个选项包括页面中的内容，然后根据单击的链接隐藏和取消隐藏，或者使用 Ajax 拉取内容然后显示它们。
使用 AJAX 就是这样...你知道吗？

【解决方案2】：

听起来你想对外部文件发出 AJAX 请求，然后使用 responseText 填充容器的 innerHTML。

本文将指导您完成如何制作 XMLHttpRequest -- 没有 jQuery 的 AJAX：https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

因此，您必须创建一个函数，该函数在您单击其中一个链接时运行，它将 1) 执行 AJAX 请求以获取外部 HTML； 2) 用 responseText 填充您的 innerContent <div>；和 3) 更改 <li> 被归类为“活动”。

【讨论】：

很好的描述，但你能给我一个例子吗？