通過Ajax編寫Javascript
[英]Javascript via Ajax
問題描述
我如何通過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;
?>
6 個解決方案
解決方案1
2 2010-07-23 23:10:08
首先，您要定義一個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)作為原型。
盡管從您自己實現了AJAX調用的事實來看，您可能沒有使用任何庫。 在這種情況下，使您的PHP文件僅返回不帶標簽的JS，然后返回eval(xmlhttp.responseText)會更容易。
如果您不想這樣做，則需要遍歷響應X（HT）ML中的所有腳本標簽，並“手動”評估其內容。
解決方案2
0 2010-07-21 21:07:58
使用Javascript框架使事情變得非常簡單。 例如，如果您使用jQuery，則可以通過以下方式進行所需的操作：
$.getScript("test.php");
它為您提供了一些優勢...例如，您不必擔心IE中的內存泄漏問題。 它可以在大多數Web瀏覽器上運行，並使您的代碼更易於閱讀。
解決方案3
0 2010-07-21 21:10:34
設置innerHTML之后，您可能必須手動調用所需的函數，即onClick。
解決方案4
0 2010-07-25 01:28:34
您在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。
解決方案5
0 2010-07-26 20:02:18
做到這一點的唯一方法是，通過某種方式，在AJAX調用中eval()要通過AJAX加載的腳本。 腳本通常僅在頁面加載時進行評估，並且不對通過DOM / AJAX加載的新內容進行腳本評估（一方面，很早以前就觸發過onload（）），因此您必須手動調用您正在使用AJAX的腳本。
如上文所述，框架使此操作變得更容易-根據我的經驗， Prototype中的evalScripts標志或僅evalScripts函數確實非常適合此操作，並且jQuery的live（）或getScript也是一個選擇。
如果不使用框架，則必須手動嘗試通過在要通過AJAX加載的腳本上調用eval()來實現。 因此，您的代碼將如下所示：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ajax").innerHTML=xmlhttp.responseText;
eval(xmlhttp.responseText);
}
}
如果您使用的只是Javascript，則甚至不需要設置innerHTML。 注意：使用eval()通常應使您警惕，因為可能會發生注入攻擊。 上面的框架進行了一些清理和安全檢查，以更安全地執行腳本，但這仍然是一個冒險的提議。
如果可以的話，您應該考慮重寫代碼以使AJAX返回JSON或其他數據結構，並將實際的javascript移至receve函數（我在上面插入eval() ）中，以避免此類風險。 在您的代碼中，根據您為什么需要在另一個文件中包含Javascript，您可以輕松地在JSON數組中傳遞要為其生成腳本的參數，然后調用new FusionCharts()和mychart.render()在您的AJAX通話中。 看起來像這樣：
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>"
}
解決方案6
-1 2010-07-25 04:53:32
嘗試使用jquery.live（）
通過ajax加載JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.