Fatal编程技术网

使用xmlhttp更新javascript

javascript ajax google-visualization

使用xmlhttp更新javascript,javascript,ajax,google-visualization,xmlhttprequest,Javascript,Ajax,Google Visualization,Xmlhttprequest,我希望有人能告诉我我做错了什么。我想用xmlhttp更新Google图表，我的脚本如下： <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

我希望有人能告诉我我做错了什么。我想用xmlhttp更新Google图表，我的脚本如下：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <div id="myDiv">
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
          ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
          ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
          ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
          ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
          ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
          ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
        ]);

        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,
                 {title:"Yearly Coffee Consumption by Country",
                  width:600, height:400,
                  hAxis: {title: "Year"}}
            );
      }




    google.setOnLoadCallback(drawVisualization);
    ;
    </script>
    </div>

    <script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","UpdateGraph.php",true);
xmlhttp.send();
}
</script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>



<button type="button" onclick="loadXMLDoc()">Change Content</button>


  </body>
</html>


谷歌可视化API示例
函数drawVisualization（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable([
[‘年’、‘奥地利’、‘比利时’、‘捷克共和国’、‘芬兰’、‘法国’、‘德国’]，
['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
]);
//创建并绘制可视化。
新的google.visualization.ColumnChart（document.getElementById（'visualization'））。
绘制（数据、，
{标题：“各国每年咖啡消费量”，
宽度：600，高度：400，
哈克斯：{标题：“年}}
);
}
setOnLoadCallback（drawVisualization）；
;
函数loadXMLDoc（）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“myDiv”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“UpdateGraph.php”，true）；
xmlhttp.send（）；
}
更改内容
下面是php文件（UpdateGraph.php），我想用它来更新我的内容，我的目的是显示第二个图形。它目前的工作方式是在空间中显示另一个图形以及我创建的一个按钮，以防它不会自动“重画”。当我从UpdateGraph.php文件中删除脚本标记时，我希望新图形显示的区域中只显示文本

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});

</script>
<script type="text/javascript">
      function drawVisualization2() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
          ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
          ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
          ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
          ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
          ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
          ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
        ]);

        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization2')).
            draw(data,
                 {title:"Yearly Coffee Consumption by Country",
                  width:600, height:400,
                  hAxis: {title: "Year"}}
            );
      }
      google.setOnLoadCallback(drawVisualization2)
</script>
<button onclick="drawVisualization2()">Redraw 2nd Graph</button>
<div id="visualization2" style="width: 600px; height: 400px;"></div>


load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization2（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable([
[‘年’、‘奥地利’、‘比利时’、‘捷克共和国’、‘芬兰’、‘法国’、‘德国’]，
['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
]);
//创建并绘制可视化。
新的google.visualization.ColumnChart（document.getElementById（'visualization2'））。
绘制（数据、，
{标题：“各国每年咖啡消费量”，
宽度：600，高度：400，
哈克斯：{标题：“年}}
);
}
google.setOnLoadCallback（drawVisualization2）
重画第二图
我在引入文本方面没有问题，但我很困惑为什么我不能引入新的javascript或更新javascript。（顺便说一句，UpdateGraph.php中的代码在复制并粘贴到当前包含“div id=“myDiv”的行中时工作正常）

谢谢。

允许在innerHTML分配中使用脚本标记将是一种安全威胁。假设您要删除的数据是表单中提供的用户提供的内容，而这是由另一个用户加载的。用户Bob可以将脚本标记插入表单中，这将从服务器X加载恶意代码。用户Charlie加载一个页面w这是一种跨站点脚本形式，在使用innerHTML分配时，浏览器可能会禁用这一点也不足为奇。但是，不能保证每个浏览器都会这样做

以下是更多信息：

也就是说，有两种更简单的方法可以实现您想要的效果。我推荐第一种方法作为最佳方法：

1） 将大部分脚本（而不是更新详细信息）移动到一个随页面加载但不一定运行的函数中。与其通过xmlhttp检索整个脚本文本，不如以某种易于解析的格式（如JSON）返回数据本身，然后将该数据作为参数传递给对更新函数的调用

2） 如果您确实需要传递函数调用，那么您甚至不需要xmlhttp。只需在DOM中动态创建一个脚本标记，并将其源代码指向生成脚本的PHP页面。添加脚本标记后，脚本将立即加载。

感谢您的帮助，根据您的建议，我遵循了此处和取得了成功：