通過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

回答

相關問題