Pure JS scriptengine jetty

http://xxing22657-yahoo-com-cn.iteye.com/blog/1052485

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

博客分类：
• Pure JS

JavaScriptEclipse脚本Ajaxjson

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 ”目录下。

• PureJS.rar (966.4 KB)
• 下载次数: 35

• json.rar (1.1 KB)
• 下载次数: 24