使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup

核心提示： 您应该查看 chart.maker 示例项目中的 /public/index.html 文件，看看所有这些 markup 和代码，使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup(9)，接下来的小节将谈到面向 Aj

您应该查看 chart.maker 示例项目中的 /public/index.html 文件，看看所有这些 markup 和代码。接下来的小节将谈到面向 Ajax 的 JavaScript（也被包括在该文件中），它用于操纵 UI 元素，以显示反映用户输入的图表。

使用 Ajax 显示生成的图表

与 REST API 的交互就是实现 createCharts() 函数，使之读取所有表单输入值，将它们打包到一个 JSON 对象中，并将 JSON 对象作为 HTTP POST 请求的一部分发送到 charts 资源。HTTP POST 请求完成后，您将从 Location 响应报头读取图表 URL，并设置（重置）图表图像的源。清单 10 显示了实现这一点的代码。

清单 10. 使用 Ajax 创建和显示图表

　　function　getHttpClient()　
　　{　
　　　　var　hasXHR　=　window.XMLHttpRequest;　
　　　return　hasXHR　?　new　XMLHttpRequest()　:　new　ActiveXObject("Microsoft.XMLHTTP");　
　　}　
　
　　function　createChart()　
　　{　
　　　　//　step　1　
　　　var　chart　=　{　
　　　title:　getValue("chartTitle"),　
　　　type:　getSelection("chartType"),　
　　　height:　getValue("chartHeight"),　
　　　width:　getValue("chartWidth"),　
　　　data:　getValues("chartData"),　
　　　xaxis:　getValues("xaxis"),　
　　　yaxis:　getValues("yaxis")　
　　　};　
　　　　　
　　　　//　step　2　
　　　var　http　=　getHttpClient();　
　　　http.open("POST",　"/resources/charts",　true);　
　　　
　　　　//　step　3　
　　　http.onreadystatechange　=　function()　{　
　　　if　(http.readyState　!=　4)　
　　　　return;　
　　　　
　　　var　chartImage　=　document.getElementById("chartImage");　
　　　chartImage.src　=　http.getResponseHeader("Location");　
　　　chartImage.style.display　=　"block";　
　　　}　
　　　
　　　　//　step　4　
　　　http.send(JSON.stringify(chart));　
　　}