Pure JS (1): 在 jetty 上运行 JavaScript

Pure JS (1): 在 jetty 上运行 JavaScript

　　所谓 Pure JS ，就是客户端和服务器端程序都用 JavaScript 编写。

　　实现思路是：
　　1. 客户端发起 Ajax 请求，请求的数据格式为 JSON ，方法为 POST
　　2. 服务器端用 Jetty 接收请求
　　3. 用 Java 6 ScriptEngine 执行 JavaScript 脚本
　　4. 结果以 JSON 格式返回

　　另外，在系统启动时需要对所有脚本进行初始加载。

　　接下来就按照这个思路逐步进行。

客户端 Ajax 请求

　　在 Eclipse 中建立 Java 工程，新建 webapp 目录和 webapp/js 目录。
　　这里需要用到 jQuery 1.6 和一个 $.toJSON 插件 （json.js），可以在附件中找到。

　　webapp 下的 index.html 的代码如下：

<script src='js/jquery.js'></script>
<script src='js/json.js'></script>
<script src='js/proxy.js'></script>
<script src='js/app.js'></script>

　　实际上只是依次引用了多个js文件。

　　proxy.js 的作用是利用 jQuery 发起 Ajax 请求。
　　实现如下：

function proxy(request, success, failure) {
	request = $.toJSON(request);

	$.post('api', { request : request }, function(result){
		if (result.success) {
			success && success(result.data);
		} else if (failure) {
			failure(result.error);
		} else {
			alert('Operation Failed!');
		}
	}, 'json');
}

　　参数解释如下：

　　【requset】 请求对象，包含两个属性：
　　　　【action】 需要服务器端执行的动作，如 'sayHello' 等
　　　　【params】 请求参数，是一个 JavaScript Object， 如 { name: 'Pei Xiaoxing' } ，也可以是更复杂的对象

　　【success】 执行成功是需要执行的函数 （服务器端返回的 result.success 为 false ）
　　【failure】 执行失败时需要执行的函数 （服务器端返回的 result.success 为 true ）

　　首先将 requset 转为字符串，
　　然后调用 jQuery 的 post() 函数，url 指定为 'api' ，这是服务器端处理 AJAX 请求的 Servlet 的路径；
　　最后根据返回的 result.success 分别执行回调函数 success  和 failure。


　　app.js 的实现如下：

$(function(){
	var request = {
		action: 'sayHello',
		params: { name: 'Pei Xiaoxing' }
	};

	proxy(request, function(data) {
		$('body').html(data);
	});
});

　　构造一个requset对象作为 proxy 的第一个参数，调用刚刚实现的 proxy 函数；
　　服务器端返回成功信息时，就将数据填充到 body 。

服务器端 Jetty 接收请求

　　利用 Jetty 接收服务请求，分为两类：
　　1. 资源请求，如 html ， js 之类的文件，映射到路径 “/”。
　　2. API请求，如客户端提交的 “ sayHello ” 动作，映射到路径 “/api”。

　　同时，在启动 Server 前，先执行所有服务器端脚本，以获得所有动作的定义。

　　JSServer 实现如下：

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.servlet.DefaultServlet;
import org.eclipse.jetty.servlet.ServletContextHandler;
import org.eclipse.jetty.servlet.ServletHolder;

public class JSServer {
	public static void main(String[] args) throws Exception {
		JSEngine.excuteFiles("scripts");
		startServer();
	}

	private static void startServer() throws Exception, InterruptedException {
		Server server = new Server(8080);
		configContext(server);
		server.start();
		server.join();
	}

	private static void configContext(Server server) {
		ServletContextHandler context = new ServletContextHandler(
				ServletContextHandler.SESSIONS);
		context.setContextPath("/");
		context.setResourceBase("webapp");
		server.setHandler(context);

		context.addServlet(new ServletHolder(new DefaultServlet()), "/");
		context.addServlet(new ServletHolder(new JSServlet()), "/api");
	}
}

　　main 函数中做了两件事：
　　1. 执行 “scripts” 文件夹下的所有 js 脚本。
　　2. 启动 jetty server

　　startServer() 函数新建一个监听 8080 端口的 Server ，配置 Context 并启动。
　　configContext() 函数设置请求路径为 "/"，以及资源路径为“webapp”，并添加两个 Servlet 的映射。

JSEngine ： Java 6 ScriptEngine 封装

　　JSEngine 对 Java 6 ScriptEngine 进行简单封装，这纯粹是个人习惯了，
　　因为使用 ScriptEngine 的时候总是要进行各种强制转换，干脆封装在一个类中了。

　　实现如下：

import java.io.File;
import java.io.FileReader;
import java.io.IOException;

import javax.script.Compilable;
import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;

public class JSEngine {
	private static ScriptEngine engine;
	private static Compilable compliable;
	private static Invocable invocable;

	static {
		ScriptEngineManager manager = new ScriptEngineManager();
		engine = manager.getEngineByName("javascript");
		compliable = (Compilable) engine;
		invocable = (Invocable) engine;
	}

	public static void excuteFiles(String dir) throws ScriptException,
			IOException {
		for (File file : new File(dir).listFiles()) {
			FileReader reader = new FileReader(file);
			compliable.compile(reader).eval();
			reader.close();
		}
	}

	public static String invoke(String func, Object... args)
			throws NoSuchMethodException, ScriptException {
		return (String) invocable.invokeFunction(func, args);
	}
}

　　excuteFiles 的作用是编译并执行所指定的目录下的所有 js 脚本，invoke 的作用是调用特定函数。

JSServlet ：处理 Ajax 请求

　　JSServlet 用于接收 Ajax ，并执行相应的 js 脚本，实现如下：

import java.io.IOException;

import javax.script.ScriptException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class JSServlet extends HttpServlet {
	private static final long serialVersionUID = -7419703636280795226L;
	private static final String ERROR
		= "{\"error\": \"Server internal error.\", \"success\": flase}";

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		String result;
		try {
			result = JSEngine.invoke("run", req);
		} catch (NoSuchMethodException e) {
			e.printStackTrace();
			result = ERROR;
		} catch (ScriptException e) {
			e.printStackTrace();
			result = ERROR;
		}

		res.getWriter().write(result);
	}
}

　　service() 函数将 HttpServletRequest req 直接作为参数传入，调用 js 脚本 run() 函数，
　　取得返回结果，并写入到 response 中。
　　出错则返回 “ Server internal error. ”。

　　run() 函数是 js 脚本的入口，完成路径映射，JSON 解析和序列化等工作。

编写服务器端脚本

　　服务器端脚本有两个：
　　1. api.js 包含所请求的动作的逻辑；
　　2. run.js 脚本的执行入口，接收 req 参数，并执行指定脚本。

　　api.js 的实现如下：

api = {
	sayHello: function(params) {	
		return 'Hello, ' + params.name + '!';
	}
};

　　返回类似 “ Hello, xxx! ” 的信息


　　run.js 的实现如下：

function run(req) {
	var ret;
	try {		
		var request = JSON.parse(req.getParameter('request'));
		var action = request.action;
		var params = request.params;

		ret = { data : api[action](params), success : true }
	} catch (e) {
		println(e);
		ret = { error : e.toString(), success : false }
	}

	return JSON.stringify(ret);
}

　　首先将 JSON 字符串请求转换为 JavaScript 对象，并提取 action 和 params 。
　　然后调用 “api” 对象的 “ action ” 方法， 参数为“ params ”，并获得返回数据。返回数据也可以是复杂对象。
　　最后将返回结果序列化为字符串；出错则将出错信息输出并返回给客户端。

　　其中 JSON.parse ，JSON.stringify ， println 都是内置函数。（JDK 6 中 JSON 对象还不是内置的，请查看下面红字部分。）

运行并查看结果

　　选择 JSServer 类 ，右键选择 “ Run as Java Application ” ， 打开浏览器，输入 “ http://localhost:8080 ” 并回车，可以看到浏览器输出结果如下：

Hello, Pei Xiaoxing!

加入Controller？

　　如果 api 的形式是 api.controller.action ，那么可以将 app.js 中的 request 对象改为：

var request = {
	controller: 'hello'
	action: 'say',
	params: { name: 'Pei Xiaoxing' }
};

　　并修改 run.js 中参数提取的方式：

var controller = requset.controller;
var action = request.action;
var params = request.params;

ret = { data : api[controller][action](params), success : true }

　　api 对象的定义可以分开写，比如 api.hello.js 定义一个 controller ：

var api = api || {};

api.hello = {
    say: function(){ ... }
}

　　api.anotherHello.js 定义另一个 controller ：

var api = api || {};

api.anotherHello = {
    anotherSay: function(){ ... }
}

REST 风格 URL ？ Session， Cookie ？

　　对于 REST 风格 URL，可以在 run 函数中通过 req.getRequestURI() 获取请求路径，然后直接对路径进行解析。
　　同样，也可以通过 req.getSession() 和 req.getCookies() 获取 session 和 cookie 。



　　以上就是我们的第一个 Server 端 JS 程序了。

　　当然，只是运行这种简单的脚本没有多少意义，但 ScriptEngine 的优势是可以直接导入 Java API。
　　因此 Java 中能做的，在我们的服务器端也都能做。


　　关于 Server 端 JavaScript 程序的后续研究的列表如下：

　　热部署 (已完成）
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1054496

　　文件上传与下载（已完成)
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1068055
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1070383

　　利用 MongoDB 进行数据存储(已完成）
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1071205
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1076016
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1097596

　　仿 Jquery Template 的服务器端模板引擎（已完成）
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1112920
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1113665
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1114521

　　完善框架功能（已完成 1/6）
　　http://xxing22657-yahoo-com-cn.iteye.com/blog/1121314

　　其他模板引擎 （FreeMarker，Velocity，仿 JSP）
　　数据库操作（SQLite Driver， MySQL JDBC）
　　ORM（ibatis 等）
　　其他NoSQL数据库（CouchDB等）
　　分布式缓存 （Memcached 等）

　　有朋友指出运行时会出现 "JSON" is not defined 的错误，这是因为 JDK 6 ScriptEngine 中确实没有定义 JSON 对象。因为我自己运行时使用了 JRE 7 预览版，所以没有发现这个问题。

　　请解压附件中的 json.rar ，并将解压后得到的 json.js 放到“ scripts ”目录下。