Question

好的，这听起来很奇怪，但这就是我正在处理的问题。在我的网站上，当我尝试加载它时，body标签中没有任何内容。当我查看chrome开发者控制台时，它在获取样式表后停止，但在我的ajax.js文件中是所有进入正文的html。 ajax.js文件的内容肯定不包含我的HTML主体，为什么它出现在那里？以下是显示的内容： :(不能张贴图片这是html：

<?php
    $_SESSION['frameStart'] = $_POST['frameStart'];
    $_SESSION['frameStop'] = $_POST['frameStop'];
    $_SESSION['format'] = $_POST['format'];
    $_SESSION['currFrame'] = $_POST['frameStart'] - 1;
?>
<!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>
        <title>OpenRender - Free Online Rendering</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script type="text/javascript" src="ajaxz.js" />
        <?php flush(); ?>
    </head>
    <body>
        <div id="content" >
            <img src="images/logo.png" alt="OpenRender logo" id="logo" class="centerMargin" />
            <h1 id="topInfo">
                Site Version: 1.0<span id="space" />Backend:
                <?php
                    if (file_get_contents("/blend/online") == 0) {
                        echo '<span id="green">Online</span>
                        <img src="images/greenlight.png" alt="green light" id="light" />';
                    } else {
                        echo '<span id="red">Offline</span>
                        <img src="images/redlight.png" alt="red light" id="light" />';
                    }
                ?>
            </h1>
            <div id="innerBox">
                <h1 id="status">
                    Your JavaScript is turned off
                </h1>
                <div id="controlPanel">
                    <a href="">
                        <img src="images/play.png" alt="play" id="play" />
                    </a>
                    <a href="">
                        <img src="images/stop.png" alt="stop" id="stop" />
                    </a>
                    <a href="">
                        <img src="images/info.png" alt="info" id="info" />
                    </a>
                </div>
                <img src="images/scene.png" alt="Thumbnail of rendered picture" id="thumbnail" class="centerMargin" />
                <h2 id="frameNumber">
                    Frame: 0/0
                </h2>
                <img src="images/loading.gif" alt="loading" id="loading" class="centerMargin" />
                <a href="images/song.mp4" target="_blank">
                    <img src="images/song.png" alt="sound" id="sound" />
                </a>
            </div>
            <div id="bottomBar">
               <a href="http://www.facebook.com/pages/OpenRender/107428762671996" target="_blank">
                    <img src="images/facebook.png" alt="facebook" id="facebook" />
                </a>
                <a href="http://twitter.com/#!/openrender" target="_blank">
                <img src="images/twitter.png" alt="twitter" id="twitter" />
                </a>
                <p id="emailText">
                    Contact us at:<br />
                    openrender@gmail.com
                </p>
                <p id="creditText">
                    Created by: Braun and Marc<br />
                    Donations: Facetime Inc.
                </p>
           </div>
        </div>
    </body>
</html>

javascript文件：

window.onload = function(){init();}

function init() {
    var ajax = ajaxInit();
    ajax.onreadystatechange = update(ajax);
    ajaxContact(ajax);
    setInterval("ajaxContact('"+ajax+"')",1000);
}

function ajaxInit() {
    if (window.XMLHttpRequest) {
      ajax = new XMLHttpRequest();
    }
    if (window.ActiveXObject) {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (ajax) {
        document.getElementById("status").innerHTML = "AJAX initialized";
        return ajax;
    }
    else {
        docuement.getElementById("status").innerHTML = "Error: AJAX not available";
        return false;
    }

}

function ajaxContact(ajax) {
    try {
        ajax.open("GET","Ajax.php?" + "&ran=" + Math.random(),true);
        ajax.send();
    }
    catch (err) {
        document.getElementById("status").innerHTML = "Error contacting server";
        document.getElementById("loading").src = "images/redx.png";
    }
}

function update(ajax) {
      if (ajax.readyState==4 && ajax.status==200){
          var dataObj = jsonTranslate();
          document.getElementById("status").innerHTML = dataObj.status;
          document.getElementById("frame").innerHTML =
          "Frame:" + dataObj.firstFrame + "/" + dataObj.lastFrame;
          document.getElementById("thumbnail").src = dataObj.imgSrc;
      }
      if (ajax.status==404) {
          document.getElementById("status").innerHTML = "Ajax updater not found";
          document.getElementById("loading").src = "images/redx.png";
      }
}

function jsonTranslate() {
    return eval('(' + ajax.responseText + ')');
}

Answer 1

摆脱PHP的东西，只显示浏览器中出现的内容。如果浏览器中没有任何内容出现，可能是PHP问题，而不是javascript问题。

您应该使用HTML，而不是XHTML。

您可能不应该使用：

<script type="text/javascript" src="ajaxz.js" />

需要结束标记，浏览器可能不喜欢SHORTAG版本（您的服务器可能会将其更改为＆lt; script ...＆gt;＆lt; / script＆gt;，但我们不知道这一点。）

Answer 2

不确定是否可以使用，但有些建议：

ajax.onreadystatechange = update(ajax);

这是第一个问题。如果你不能因为x的原因构造你的xmlhttprequest，那么ajax将是未定义的，你将得到一个错误。所以在绑定onreadystatechange之前，你应该检查是否（ajax）。顺便说一句，使用上述语法，对函数更新进行调用（即使未触发readystatechange）。而且，绑定的结果不是函数，而是返回函数update：undefined。您可以优先使用以下语法

ajax.onreadystatechange = update;
function update(){
    var ajax = arguments[0];
}

或

ajax.onreadystatechange = function(){return function(ajax){ update(ajax); }}();
function update(ajax){
    //like before
}

对于回调，您可以使用ajax.responseText检索服务器的答案;但那仍然不是json ......但是html ......

Javascript将html粘贴到自身？

2 个答案: