通过Ajax的Javascript

我怎样才能通过Ajax启动JavaScript？通过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; 

?>

来源

2010-07-21 Jasem

你能不能给我们介绍一下究竟你想要什么来完成，你就遇到了什么问题，更多的细节？ – webbiedave 2010-07-21 21:04:05

我每次尝试加载融合小部件时，我点击测试按钮和JavaScript必须在其他文件 – Jasem 2010-07-21 21:05:37

使用JavaScript框架，使事情变得非常容易。例如，如果你使用jQuery，你可以做你想做的是这样的：

$.getScript("test.php");

它给你比如一些优势......，你将不必担心在IE浏览器的内存泄漏问题。它可以在大多数网页浏览器上运行，并且使代码更易于阅读。

来源

2010-07-21 21:07:58 Cristian

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

来源

2010-07-21 21:10:34

一开始，你定义window.onload事件后的页面加载 - 由用户点击按钮时，该事件将已如果你正在使用jQuery发射前不久

，将window.onload = function start()更改为$(document).ready(function()，然后添加一个“）;”;在函数结束时。

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

虽然它很可能更有意义，只是调用函数，甚至只是删除功能，并执行语句直

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

虽然根据您自己实施AJAX调用的事实来判断，但您可能没有使用任何库。在这种情况下，让PHP文件只返回没有标签的JS会更容易，那么只需要eval(xmlhttp.responseText)

如果你不想这样做，那么你需要遍历所有的脚本标记在响应X（HT）ML和评估它们的内容'手动'

来源

2010-07-23 23:10:08

所有的JavaScript你在PHP文件中，你需要把它放到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和填充后无论如何，你已经有了现成的Javascript准备好新的HTML。

来源

2010-07-25 01:28:34 dockeryZ

-1

尝试使用jquery.live（）

来源

2010-07-25 04:53:32

做到这一点的唯一方法是，通过这种或那种方式，eval()荷兰国际集团，您已经通过AJAX加载脚本，在AJAX调用。脚本通常只在页面加载时才被评估，并且通过DOM/AJAX加载的新内容不针对脚本进行评估（一方面，onload（）很久以前就解雇了），因此您必须手动调用任何脚本。脚本你AJAXing在

正如上面提到的内容框架，使这更容易 - 在evalScripts flag in Prototype，或只是evalScripts function，是非常好的这在我的经验，以及jQuery的live()或getScript也是一种选择。

如果您不使用框架，则必须手动执行此操作，方法是在要通过AJAX加载的脚本上调用eval()。所以，你的代码会是这个样子：

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

    } 
}

你可能甚至不需要设置的innerHTML如果JavaScript是你使用它的全部。警告：使用eval()作为一个规则应该让你警惕注射攻击的可能性。上面的框架进行一些消毒和安全检查以更安全地执行脚本，但它仍然是一个冒险的主张。

如果可以的话，您应该考虑重写代码以使AJAX返回JSON或其他数据结构，并将实际的javascript移入接收函数（我在上面插入eval()），以避免此类风险。在你的代码中，根据为什么你需要在另一个文件中使用Javascript，你可能很容易将你生成脚本的参数传递给JSON数组，并在你的AJAX调用中调用new FusionCharts()和mychart.render()。这将是这个样子：

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-26 20:02:18 cincodenada

通过Ajax的Javascript

回答

相关问题