在介绍了如何使用ASP.net Web API和Entity Framework实现服务器端程序，这篇博客将讲述如何使用JQuery从服务器获取数据并利用WebGL/Three.Js来实现浏览器端魔幻球的渲染。

本文地址：

这部分比较简单，就是一个html页面，为了方便，我就利用服务器端ASP.NET MVC中的view – index.cshtml好了。在这个文件中我要添加一些Javascript代码来以REST的方式从服务器获取数据，然后渲染魔幻球。Web页面中利用JavaScript与服务器进行通信，JQuery是很好的选择，实际上JQuery也已经包含在了ASP.NET MVC里面。对于WebGL的渲染，我选用了一个流行的类库Three.Js。类库和源码都可以从上下载。 里面包含好多示例，是理解和应用Three.Js很好的学习资料。

大家也看到了，这个程序的界面非常简单，就是一个下拉框用来选择用户，还有一个div标签作为魔幻球的渲染容器：

首先在document Ready的时候从服务器请求可用的用户列表。这里我使用JQuery发送Ajax请求到“api/AcadCommands”来获取所有的用户命令统计数据，然后从中选择用户名。当然这样效率是不高的，更好的应该是在服务器端实现一个action只返回可用的用户列表就行了。如果你感兴趣，可以自己实现这部分做练习。

var container = document.getElementById('Containner');         initThree(container); animate();

在document ready的时候还要初始化ThreeJs，这部分一会儿再说。先说说当用户从下列框中选择一个用户后，我们需要获取指定用户的命令统计信息。使用JQuery发送Ajax请求到 api/AcadCommands?username=" + username：

代码如下：

获取到用户命令统计数据后，就可以用ThreeJs来渲染了，我把这部分放在一个单独的javascript文件中。直接上代码：

好了，到目前为止已经完成了，最后给大家提一下用到的JavaScript文件，注意这个 helvetiker_regular.typeface.js 因为我要把命令名字渲染成文本，使用了 helvetiker_regular字体，所以需要这个文件。这个文件可以在ThreeJS的下载包中找到。

好了，打完收工。不过到目前为止，这个程序还是运行在本机的一个aspnet站点，下一步就是把他搬到windows Azure云端去了。下回再说。