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)、またはElement.insert($('ajax'), xmlhttp.responseText)Prototype を試してください。

AJAX 呼び出しを自分で実装したという事実から判断すると、ライブラリを使用していない可能性があります。その場合、PHP ファイルがタグなしで JS のみを返すようにする方が簡単です。eval(xmlhttp.responseText)

それをしたくない場合は、応答 X(HT)ML 内のすべてのスクリプト タグをループし、それらの内容を「手動で」評価する必要があります。

于 2010-07-23T23:10:08.713 に答える
0

これを行う唯一の方法は、何らかの方法eval()で、AJAXを介してロードしているスクリプトをAJAX呼び出しで実行することです。スクリプトは通常、ページロードにある場合にのみ評価され、DOM / AJAXを介してロードされた新しいコンテンツはスクリプトに対して評価されないため（たとえば、onload（）はかなり前に起動されます）、手動で呼び出す必要があります。 AJAXを使用しているスクリプト。

上で述べたように、フレームワークはこれを簡単にします-プロトタイプの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をrecieve関数（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-26T20:02:18.773 に答える
0

Javascript フレームワークを使用すると、作業が非常に簡単になります。たとえば、jQuery を使用する場合、次の方法で必要なことを行うことができます。

$.getScript("test.php");

これにより、いくつかの利点が得られます...たとえば、IE でのメモリ リークの問題を心配する必要がなくなります。ほとんどの Web ブラウザで動作し、コードが読みやすくなります。

于 2010-07-21T21:07:58.080 に答える
0

innerHTML を設定した後、必要な関数、つまり onClick を手動で呼び出す必要があります。

于 2010-07-21T21:10:34.603 に答える
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 に答える
-1

jquery.live() を使用してみてください

于 2010-07-25T04:53:32.657 に答える