没有jQuery的导入外部HTML内容的内部使用Javascript AJAX [英] Importing external HTML inner content with Javascript AJAX without Jquery

问题描述

我需要一些帮助，我有以下的HTML code：

I need some help, I've got the following HTML code:

<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>

所以，当我点击链接1，例如，我需要从cont1.html到div类=innerContent里面附加的内部内容，不忘加上级= 主动里面的点击里。只需使用的JavaScript / AJAX没有jQuery和不改变此HTML。

So, when I click "Link 1", for example, I need to get the inner content from "cont1.html" to be appended inside of the div class="innerContent", not forgetting to add the "class="active"" inside the clicked li. Using just Javascript/AJAX without Jquery and without changing this HTML.

我做了一个类似的<一个href="http://stackoverflow.com/questions/15884640/hide-and-show-elements-by-clicking-on-a-link-with-java-script-without-jquery/15935020#15935020">example这里 ，但工作在同一页面，而不是不同页面的内容，我不知道为什么，但不能在IE浏览器。

I did a similar example here, but is working for the content of the same page, not different pages, and I don't know why but doesn't work on IE.

请，有人可以帮我吗？

推荐答案

试试这个

  <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

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();
}

这篇关于没有jQuery的导入外部HTML内容的内部使用Javascript AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！