用xmlhttp更新javascript

-1

我希望有人能告诉我我做错了什么。我想更新谷歌的图表与XMLHTTP，我的剧本是在这里：用xmlhttp更新javascript

<!-- 
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>

下面这里是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>

我没有问题带来的文字，但我很困惑，为什么我不能够在新的JavaScript或更新JavaScript来实现。

谢谢（顺便说一句，当它被复制并粘贴到当前包含“DIV ID =” myDiv“的行UpdateGraph.php代码工作就好了）。

来源

2012-12-26 user1922920

允许innerHTML的任务脚本标记会安全威胁。假设你带来在数据用户提供内容的形式提供的，这是由另一个用户下载。用户Bob可以插入脚本标签到表单，这将从服务器X加载恶意代码用户查理加载了一个网页，指定的内容，以及恶意代码运行，这是跨站点脚本的形式，这并不奇怪，您的浏览器可能会使用innerHTML的分配时，可以停用此功能。不能保证每个浏览器将不过，这样做，

下面是详细信息：https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML#Security_consideration

这就是说，有两种简单的方法做你想做什么会工作。我推荐第一个作为最佳方式：

1）将大部分脚本移到一个函数中，但不一定会在页面中运行。而不是通过xmlhttp检索整个脚本文本，只需以一些易于解析的格式（例如JSON）返回数据本身，然后将该数据作为参数传递给更新函数调用

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

来源

2012-12-26 05:40:24 user4815162342

感谢你的帮助，你的建议我也跟着发生了什么这里列出，并成功：https://developers.google.com/chart/interactive/docs/php_example – user1922920

用xmlhttp更新javascript

回答

相关问题