简单的Javascript（没有JQuery）将php文件加载到div中

Question

Hi I don't know javascript but I am required to use it in one of my templates. 嗨，我不知道javascript，但我需要在我的一个模板中使用它。 I was googling around and found a solution whic is like this: 我在Google上搜索，找到了一个像这样的解决方案：

My Index.php file. 我的Index.php文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send("");
x.onreadystatechange = function(){
    if(x.readyState == 4){
        if(x.status==200) document.getElementById("aside").innerHTML = x.responseText;
        else document.getElementById("aside").innerHTML = "Error loading document";
        }
    }
} 
</script>
</head>

<body>

<div id="aside">This is aside</div>
</body>
</html>

My other_content_1.php file 我的other_content_1.php文件

<div id='other-content-1'>
<?php echo 'This text is loading via php command'; ?>
</div>

As this is the only Javascript function in my site I see no reason to load additional JQuery for it. 由于这是我网站中唯一的Javascript函数，我认为没有理由为它加载额外的JQuery。 I am sure there must be a way to do this with plain JavaScript / ajax without the need to load JQuery. 我确信必须有一种方法可以使用普通的JavaScript / ajax来实现这一点，而无需加载JQuery。 Can anybody suggest the correct syntax to do so? 任何人都可以建议正确的语法吗？

I want to happen asynchronously while the page continues to load. 我希望在页面继续加载时异步发生。

Answer 1

from http://www.tutorialspoint.com/ajax/ , using plain XHR (XmlHttpRequest) 来自http://www.tutorialspoint.com/ajax/ ，使用普通XHR（XmlHttpRequest）

function loadPage() {    
    var ajaxRequest;  

    try{
       // Opera 8.0+, Firefox, Safari
       ajaxRequest = new XMLHttpRequest();
     }catch (e){
       // Internet Explorer Browsers
       try{
          ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
       }catch (e) {
          try{
              ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          }catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
          }
       }
     }

     ajaxRequest.onreadystatechange = function(){
       if(ajaxRequest.readyState == 4){
          var ajaxDisplay = document.getElementById('ajaxDiv');
          ajaxDisplay.innerHTML = ajaxRequest.responseText;
       }
     }


     ajaxRequest.open("GET", "ajax-example.php", true);
     ajaxRequest.send(null); 
}

loadPage();

Answer 2

Try this: 尝试这个：

window.onload = function(){
aside = document.getElementById("aside");
aside.innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send();
x.onreadystatechange = function(){
    if(x.readyState == 4){
        if(x.status == 200) aside.innerHTML = x.responseText;
        else aside.innerHTML = "Error loading document";
        }
    }
}

And it is cross browser compatible, you never need the extra 32KB just to make a simple function supported cross browser. 并且它是跨浏览器兼容的，你不需要额外的32KB只是为了使一个简单的功能支持跨浏览器。

简单的Javascript（没有JQuery）将php文件加载到div中

问题描述

2 个解决方案

解决方案1
6 2013-06-30 14:49:07

解决方案2
3 已采纳 2013-06-30 14:56:15

简单的Javascript（没有JQuery）将php文件加载到div中

问题描述

2 个解决方案

解决方案1 6 2013-06-30 14:49:07

解决方案2 3 已采纳 2013-06-30 14:56:15

解决方案1
6 2013-06-30 14:49:07

解决方案2
3 已采纳 2013-06-30 14:56:15