2

如何通过 ajax 启动 javascript？

.html 文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts 3.0 Dashboard</title>
<script language="JavaScript" src="../FusionCharts.js"></script>
<script language="JavaScript" src="../PowerMap.js"></script>
<script type="text/javascript">
function loadXMLDoc()
{
    if (window.XMLHttpRequest)
    {
         xmlhttp=new XMLHttpRequest();
    }
    else
    {
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("ajax").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","test.php",true);
    xmlhttp.send();
}
</script>
</head>
<body>
<div id="chart3" align="center"></div><br />
<div id="ajax"></div>
<input type="button" onclick="loadXMLDoc()" value="test" />    
</body>
</html>

.php 文件

<?
$html = '<script type="text/javascript">
window.onload = function start() {
    onClick();
}

function onClick() {
var myChart = new FusionCharts("../Charts/HLinearGauge.swf", "chart3", "580", "80", "0", "0");
myChart.setDataXML("<chart bgColor=\'FBFBFB\' bgAlpha=\'100\' showBorder=\'0\' chartTopMargin=\'0\' chartBottomMargin=\'0\'\n\
upperLimit=\'30\' lowerLimit=\'0\' ticksBelowGauge=\'1\' tickMarkDistance=\'3\' valuePadding=\'-2\' pointerRadius=\'5\'\n\
majorTMColor=\'000000\' majorTMNumber=\'3\' minorTMNumber=\'4\' minorTMHeight=\'4\' majorTMHeight=\'8\' showShadow=\'0\'\n\
pointerBgColor=\'FFFFFF\' pointerBorderColor=\'000000\' gaugeBorderThickness=\'3\'\n\     baseFontColor=\'000000\'\n\
gaugeFillMix=\'{color},{FFFFFF}\' gaugeFillRatio=\'50,50\'>\n\
<colorRange>\n\
    <color minValue=\'0\' maxValue=\'5\' code=\'FF654F\' label=\'z\'/>\n\
    <color minValue=\'5\' maxValue=\'15\' code=\'F6BD0F\' label=\'x\'/>\n\
</colorRange>\n\
</chart>");
myChart.render("chart3");
}
</script> ';

echo $html;

?>
4

6 回答 6

2

首先，您在页面加载后定义一个 window.onload 事件 - 当用户单击按钮时，该事件将在很久以前被触发

如果您使用的是 jQuery，请将 更改window.onload = function start()为$(document).ready(function()，然后添加 ");" 在函数的最后。

对于原型，使用document.observe("dom:loaded", function()

尽管只调用函数可能更有意义，或者甚至只是删除函数并直接执行语句

至于 JS 没有执行 - 我以前经历过这种琐事，这是因为 innerHTML 不运行任何插入的 JS。如果您使用的是 jQuery，请尝试使用$('ajax').append(xmlhttp.responseText)Prototype Element.insert($('ajax'), xmlhttp.responseText)。

尽管从您自己实现了 AJAX 调用的事实来看，您可能没有使用任何库。在这种情况下，让您的 PHP 文件只返回不带标签的 JS 会更容易，然后只需eval(xmlhttp.responseText)

如果您不想这样做，那么您需要遍历响应 X(HT)ML 中的所有脚本标签并“手动”评估它们的内容

于 2010-07-23T23:10:08.713 回答
0

您在 PHP 文件中拥有的所有 javascript，您需要将其放入 html 文件中。好吧，这就是我至少会这样做的方式。否则，您必须使用 jQuery 的 live() 函数来调用 PHP 文件中的那些 javascript 函数。

例如，您在 html 文件中的脚本标记应如下所示

<script type="text/javascript">
function Function4PHPHTML() {
var myChart = new FusionCharts("../Charts/HLinearGauge.swf", "chart3", "580", "80", "0", "0");
myChart.setDataXML("<chart bgColor='FBFBFB' bgAlpha='100' showBorder='0' chartTopMargin='0' chartBottomMargin='0'\n
upperLimit='30' lowerLimit='0' ticksBelowGauge='1' tickMarkDistance='3' valuePadding='-2' pointerRadius='5'\n
majorTMColor='000000' majorTMNumber='3' minorTMNumber='4' minorTMHeight='4' majorTMHeight='8' showShadow='0'\n
pointerBgColor='FFFFFF' pointerBorderColor='000000' gaugeBorderThickness='3'\n    baseFontColor='000000'\n
gaugeFillMix='{color},{FFFFFF}' gaugeFillRatio='50,50'>\n
<colorRange>\n
    <color minValue='0' maxValue='5' code='FF654F' label='z'/>\n
    <color minValue='5' maxValue='15' code='F6BD0F' label='x'/>\n
</colorRange>\n
</chart>");
myChart.render("chart3");
}
function loadXMLDoc()
{
    if (window.XMLHttpRequest)
    {
         xmlhttp=new XMLHttpRequest();
    }
    else
    {
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("ajax").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","test.php",true);
    xmlhttp.send();
}
</script>

然后，您拥有 AJAX，仅从该 PHP 文件中检索 HTML。因此，在您单击该 DIV 并填充任何内容后，您已经为新的 html 准备好了现有的 Javascript。

于 2010-07-25T01:28:34.240 回答
0

使用 Javascript 框架让事情变得非常简单。例如，如果你使用 jQuery，你可以这样做：

$.getScript("test.php");

它为您提供了一些优势……例如，您不必担心 IE 中的内存泄漏问题。它可以在大多数网络浏览器上运行，并使您的代码更易于阅读。

于 2010-07-21T21:07:58.080 回答
0

做到这一点的唯一方法是，通过某种方式eval()，在 AJAX 调用中通过 AJAX 加载您正在加载的脚本。脚本通常只在页面加载时才被评估，并且通过 DOM/AJAX 加载的新内容不会被评估为脚本（一方面，onload() 很久以前触发）所以你必须手动调用任何您在其中进行 AJAX 处理的脚本。

正如上面提到的，框架使这更容易 - Prototype 中的 evalScripts 标志，或者只是evalScripts 函数，根据我的经验，非常适合这个，jQuery 的live()或getScript也是一个选项。

如果您不使用框架，则必须手动执行此操作，方法是调用eval()您尝试通过 AJAX 加载的脚本。所以你的代码看起来像这样：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("ajax").innerHTML=xmlhttp.responseText;
        eval(xmlhttp.responseText);

    }
}

如果您只使用 Javascript，您甚至可能不需要设置 innerHTML。一个警告：eval()由于注入攻击的可能性，使用 should 作为一项规则会让你保持警惕。上面的框架进行了一些清理和安全检查以更安全地执行脚本，但这仍然是一个冒险的提议。

如果可以的话，你应该考虑重写你的代码，让 AJAX 返回 JSON 或其他一些数据结构，并将实际的 javascript 移动到接收函数中（我在上面插入了eval()上面的内容），以避免这种风险。在您的代码中，根据您需要在另一个文件中包含 Javascript 的原因，您可能可以轻松地在 JSON 数组中传递您正在为其生成脚本的参数，new FusionCharts()并mychart.render()在您的 AJAX 调用中调用 and 。看起来像这样：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("ajax").innerHTML=xmlhttp.responseText;
        cd = JSON.parse(xmlhttp.responseText);
        var myChart = new FusionCharts(cd.chartPath, cd.chartID, cd.chartWidth, cd.chartHeight, 0, 0);
        myChart.setDataXML(cd.dataXML);
        myChart.render(cd.chartID);
    }
}

随着您的 AJAX 返回：

{
  chartPath: "../Charts/HLinearGauge.swf",
  chartID: "chart3",
  chartWidth: "580",
  chartHeight: "80",
  dataXML: "<chart bgColor=\'FBFBFB\' bgAlpha=\'100\' showBorder=\'0\' chartTopMargin=\'0\' chartBottomMargin=\'0\'\n\ upperLimit=\'30\' lowerLimit=\'0\' ticksBelowGauge=\'1\' tickMarkDistance=\'3\' valuePadding=\'-2\' pointerRadius=\'5\'\n\ majorTMColor=\'000000\' majorTMNumber=\'3\' minorTMNumber=\'4\' minorTMHeight=\'4\' majorTMHeight=\'8\' showShadow=\'0\'\n\ pointerBgColor=\'FFFFFF\' pointerBorderColor=\'000000\' gaugeBorderThickness=\'3\'\n\     baseFontColor=\'000000\'\n\ gaugeFillMix=\'{color},{FFFFFF}\' gaugeFillRatio=\'50,50\'>\n\ <colorRange>\n\     <color minValue=\'0\' maxValue=\'5\' code=\'FF654F\' label=\'z\'/>\n\     <color minValue=\'5\' maxValue=\'15\' code=\'F6BD0F\' label=\'x\'/>\n\ </colorRange>\n\ </chart>"
}
于 2010-07-26T20:02:18.773 回答
0

您可能必须在设置innerHTML 之后手动调用您想要的函数，即onClick。

于 2010-07-21T21:10:34.603 回答
-1

尝试使用 jquery.live()

于 2010-07-25T04:53:32.657 回答