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

核心提示： 除了下拉菜单 markup 外，对于那些不熟悉这种控件的用户，使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup(8)，还提供了从菜单中获取所选值的代码，与简单的文本框不同，清单 9 展示了如何编写一个当页面装载时会

除了下拉菜单 markup 外，对于那些不熟悉这种控件的用户，还提供了从菜单中获取所选值的代码。与简单的文本框不同，不能直接读取该控件的 value 属性 — 必须遍历下拉菜单的选项，直到发现当前选中的项（selected）。清单 7 包含了实现这一功能所需的代码。

清单 7. 发现选中的图表类型的 JavaScript

　　function　getSelection(elementName)　
　　{　
　　　　var　select　=　document.getElementById(elementName);　
　　　　　
　　　　for　(var　i　=　0;　i　<　select.options.length;　i++)　
　　　　　　if　(select.options[i].selected)　
　　　　　　　　return　select.options[i].value;　
　　　　　
　　　　return　null;　
　　}　

另一个重要的 UI 元素是表单底部的 Create It! 按钮。这个按钮并非用于提交表单，而是链接到一个 JavaScript 函数，该函数发出一个对 REST API 的 Ajax 请求。为此，需要将一个 JavaScript 函数调用添加到该按钮的 onClick 事件中。清单 8 展示了链接到 createChart() 函数的按钮单击事件，您将在下一节中实现该函数。

清单 8. 使用 JavaScript 初始化图表创建

　　<input　type="button"　value="Create　It!"　/>　

最后要详细谈到的 UI 元素就是显示所生成图表的图像。清单 9 展示了如何编写一个当页面装载时会隐藏的 HTML <img/> 标记。您将使用 JavaScript 将该标记的源设为所生成图表的 URL，然后使之可见。

清单 9. 用于显示图表的 HTML 图像

　　<img　id="chartImage"　style="display:none;"　src=""/>