3

嗨，我不知道 javascript，但我需要在我的一个模板中使用它。我在谷歌上搜索并找到了一个解决方案，如下所示：

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

我的 other_content_1.php 文件

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

由于这是我网站中唯一的 Javascript 函数，我认为没有理由为它加载额外的 JQuery。我确信必须有一种方法可以使用纯 JavaScript / ajax 来执行此操作，而无需加载 JQuery。有人可以建议这样做的正确语法吗？

我想在页面继续加载时异步发生。

4

2 回答 2

6

来自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();
于 2013-06-30T14:49:07.557 回答
3

尝试这个：

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";
        }
    }
}

而且它是跨浏览器兼容的，你永远不需要额外的32KB来做一个简单的功能支持跨浏览器。

于 2013-06-30T14:56:15.033 回答