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

核心提示： 我们来逐步讲解这段代码：在 createCharts() 中，首先做的事情是使用适当的名称-值对创建一个 JSON 对象，使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup(10)，getValue(s) 方法是类似

我们来逐步讲解这段代码：

在 createCharts() 中，首先做的事情是使用适当的名称-值对创建一个 JSON 对象。getValue(s) 方法是类似于 清单 7 中的 getSelection() 方法的简单实用程序。它们的实现非常普通，可以从示例项目中查看它们。这里要特别注意的是，字段名称与 /app/scripts/charts.groovy 文件期望的名称相匹配，并且值使用适当的格式。

第二步是创建一个 XMLHttpRequest 对象，并发起一个对 /resources/charts 的 HTTP POST 请求。getHttpClient() 方法隐藏有一些条件，以确保为适当的 Web 浏览器实例化适当的类。

第三步是定义发送请求和收到响应之后的动作。在这个例子中，您将获取 Location 报头的值，并使用它设置 chartImage.src 的值；然后，修改 chartImage 样式，使之不再对用户隐藏。

最后一步是发送 HTTP POST 请求。这包括将 JSON 对象转换成可放入 HTTP POST 请求体中的字符串。由于没有标准的 JSON-to-string API，所以使用来自 http://json.org 的开源库。createChart() 最后的 JSON.stringify() API 调用是在一个名为 json2.js 的文件中定义的，该文件可以从 http://www.json.org/json2.js 获得。您应该从 http://json.org 下载这个 JavaScript 库，并将它添加到 /chart.maker/public 目录。一旦这个库准备就绪，createCharts() 的最后一行将顺利运行。

结束语

您看到了如何创建精巧的 mashup 应用程序，并且在此过程中使 Google Charts API 更易于在 Zero 应用程序之间重用。示例 Ajax 界面只涉及可视化图表构建器中的一些基本特性，但是服务器端代码可以支持您想要添加的任何其他特性。在将 RESTful API 用于宝贵的服务和数据方面，Zero 对 Groovy 脚本编制的集成再次被证明可以节省大量的时间。

本文示例源代码或素材下载