javascript - 加载页面上带有 Canvas 的 XMLHttpRequest

Question

我正在尝试通过 XHR 加载带有 Canvas 的页面，但 Canvas 未显示。我认为该问题是由于我没有将其附加到 XHR 响应中造成的。

主页

<script type="text/javascript">

function LoadContent1()
{
var LoadContent1;

if (window.XMLHttpRequest)
{
    LoadContent1 = new XMLHttpRequest();
}

LoadContent1.onreadystatechange = function()
{
    if (LoadContent1.readyState == 4 && LoadContent1.status == 200)
    {           
        document.getElementById("loadContent1").innerHTML = LoadContent1.responseText;
        document.getElementById("loadingImageContent1").src = "1-pixel.gif";
        $("#loadContent1Parent").hide();
        $("#loadContent1Child").hide();
    }
}

LoadContent1.open("GET", "page.php", true);
LoadContent1.send();
}

</script>

通过 XHR 加载页面 (Page.php)

<canvas id="mycanvas_pie" height="290" width="290"></canvas>
<canvas id="mycanvas_pie2" height="290" width="290"></canvas>

<script>
    var myPie = new Chart(document.getElementById("mycanvas_pie").getContext("2d")).Pie(pieData1,opts);
    var myPie2 = new Chart(document.getElementById("mycanvas_pie2").getContext("2d")).Pie(pieData3,opts);
</script>

Answer 1

首先，您需要确保 AJAX 调用正在运行，并且它返回正确的 HTML 代码。 您可以在任何现代浏览器中轻松找到这一点，例如使用断点或使用 console.log() 方法。

您还需要确保您尝试用响应填充的元素已存在于 DOM 中。在您的例子中，它的 ID 是“loadContent1”。

其他建议:

• 我不建议您在变量/函数/对象名称以及 DOM 元素中使用(几乎)相同的名称。尝试使用描述性名称，因为即使在这个小片段中，您的代码也很容易混淆
• 如果不是必须，出于安全原因，请尽量避免在接收和显示 HTML 代码时自动运行 javascript 代码。例如，您可以将该 JavaScript 代码放入您的回调函数中，或者如果您将这些行组织到一个单独的对象中，效果会更好。