Evaluating JavaScript code from C#

As was going through my JSON Serialization code the other day I kept re-thinking this idea I had some time ago: Why not use Microsoft’s built in JavaScript engine to perform the JavaScript and JSON deserialization. After all there is an official Microsoft JavaScript .NET language and it should be possible to take advantage of this from within an application. I finally had some time to check this out...

I started searching for how to do this and there’s not a heck of a lot of information available on this so I started playing around with this on my own. The good news is that it’s pretty straight forward to evaluate JavaScript code, the bad news is that for what I really need it for it doesn’t work quite right.

In order to use JScript you need to add a reference to the the Microsoft.vsa assembly.

<add assembly="Microsoft.Vsa, Version=8.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies>

First here are a few eval scenarios and how you can call them from a bit of C# code in ASP.NET:

using Microsoft.JScript;

public partial class JavaScriptEval :  System.Web.UI.Page

{

    public static Microsoft.JScript.Vsa.VsaEngine Engine = Microsoft.JScript.Vsa.VsaEngine.CreateEngine();

    public static object EvalJScript(string JScript)

    {

        object Result = null;

        try

        {

            Result = Microsoft.JScript.Eval.JScriptEvaluate(JScript, Engine);

        }

        catch (Exception ex)

        {

            return ex.Message;

        }

        return Result;

    }

   

    public void Page_Load(object sender,EventArgs e)

    {

        // *** String Value

        object Result = EvalJScript(@"('hello world: ' + new Date())");

        Response.Write( Result.ToString() );

        Response.Write(" Type: " + Result.GetType().Name);

        Response.Write("<hr>");

        // *** Return an integer or numeric - no conversion required

        Result = EvalJScript(@"( 11 * 12)");

        Response.Write(Result.ToString());

        Response.Write(" Type: " + Result.GetType().Name);

        Response.Write("<hr>");

       

        // *** Date value - must be converted!

        Result = EvalJScript(@"(new Date())");

        Response.Write(Result);

        Response.Write(" - Type: " + Result.GetType().Name + "<br>");

       

        // *** Must convert from DateObject to DateTime by coercing

        DateObject dateObject = Result as DateObject;

              

        Result = Microsoft.JScript.Convert.Coerce(Result,typeof(DateTime));

        Response.Write("Converted to DateTime: "  + Result);

        Response.Write("<hr>");

                      

       

        // *** Block of code (last assignment is the return value)

        Result = EvalJScript(@"var out = 'hello';   for ( var x = 1; x < 10; x++) { out = out + 'Line ' + x  + '<br>'; }");

        Response.Write(Result);

        Response.Write(" - Type: " + Result.GetType().Name);

        Response.Write("<hr>");

        /// *** Closure - calling a JavaScript Function with return value

        Result = EvalJScript(@"( function Test(inputParm) {  return 'hello world ' + inputParm; } )");

        /// *** Invoke the function and retrieve the result

        Closure close = Result as Closure;

        // *** This requires full trust

        Result = close.Invoke(close, new object[1] { "Start with this bub..." });

        Response.Write(Result);

        Response.Write(" - Type: " + Result.GetType().Name);

        Response.Write("<hr>");

        // *** JSON style object

        Result = EvalJScript(@"( {""timeString"":'Time is: ' + new Date(),""dateValue"":new Date()} )");

        JSObject obj = Result as JSObject;

        Response.Write(Result);

       

        // *** JavaScript style property array access can be used

        object val = obj["dateValue"];

       

        Response.Write(Microsoft.JScript.Convert.Coerce(val,typeof(DateTime)));

        val = obj["timeString"];

       

        Response.Write(val);        

    }       

}

As you can see execution of simple bits of code is pretty straight forward. If you need to evaluate an expression that returns a simple type like string, bool or numeric you can simply eval the expression and you get the right value and type back.

If you eval something that results in a date however things get more tricky already. You basically need to coerce the JavaScript date into a .NET date. It’s fairly easy to do this luckily – and it might be a decent solution to the lousy kind of code you have to write to deal with all the different date formats available in JSON (new Date() syntax allows for string values, numeric values all in various format). This is somewhat useful.

More interesting is the ability to execute a whole block of code. There are a few ways to do this. You can simply pass the code directly and execute it which works just fine. The problem with this is that you can’t directly return a value. Instead the last assignment ends up as your return value. This is similar to the behavior you see in event handlers like onclick in Web pages where you sometimes get unexpected results if you don’t explicitly return a value. This is probably the best choice even though it’s a bit unconventional.

Result = EvalJScript(@"( function Test(inputParm) {  return 'hello world ' + inputParm; } )");

What happens here is that rather than returning you an evaluated result the parser returns you the closure – ie. essentially a function pointer. You can now use Reflection to execute the Result which is a little more involved:

Closure close = Result as Closure;

Result = close.Invoke(close, new object[1] { "Start with this bub..." });

This works fine, but it requires full Reflection rights in order to be able to access this anonymous function. The closure is treated like a private/internal/protected member by Reflection and so you need Full trust in ASP.NET to execute this code. Bummer – this would be the most natural way to execute code because you’d have the ability to pass in parameter and get a return value using standard .NET Reflection logic. But given the rights issues this is probably not an option. I can’t figure out any other way to pass a parameter into the parser.

Next, there’s the actual issue I was after: Being able to pass an arbitrary object (in JSON style format) in and get this object back in some way to that can be parsed in .NET.

Result = EvalJScript(@"( {""timeString"":'Time is: ' + new Date(),""dateValue"":new Date()} )");

This returns a JavaScript object which can then be parsed with typical JavaScript member arrays syntax:

Result = EvalJScript(@"( {""timeString"":'Time is: ' + new Date(),""dateValue"":new Date()} )");

JSObject obj = Result as JSObject;

foreach ( string FieldName in obj)

{

   object FieldVal = obj[FieldName];

   Response.Write( FieldVal.ToString() + " - "  + FieldVal.GetType().ToString() + "<br>");

}

This works and you can potentially parse out the different types , but that still leaves the issue of how to get an actual object from the JavaScript object or more specifically how to ‘cast’ this object to another object.

I’m just thinking out loud here <s>:

Say you have a JSON method you call and you have a method which takes an object as a strongly typed object parameter:

Public bool SaveCustomer(CustomerEntity Customer)

…

I suppose one could use the Customer object as the ‘schema’ and walk through that object with Reflection and then pull values from the JavaScript with the code above and then assign them.

I took a closer look at what MS Ajax is doing – and well they’re manually parsing the javascript which is fine, but MS AJAX doesn’t work with a lot of types and doesn’t work of generic type value returned at all – any object structure must exist on the client before it can be passed back (that’s what that long Proxy block for a class definition does basically – it creates type definitions for any parameters and return values).

I have my own JSON parsing code and it works reasonably well against a wide variety of types generically using a mechanism similar to the above but by parsing string values. But the code is pretty messy and it can easily be broken by some funky JSON formatting. It would be much nicer to leave this sort of thing to a  JavaScript parser.

OTOH, manually parsing is probably a safer solution. Using the JSCript parser as shown above actually executes code on the server. If you take a JSON input and do that there’s a lot of potential for security issues.

Actually it’s surprising that the Jscript Eval works at all under a limited trust environment.

Anyway it’s an interesting experiment but for my needs probably a dead end. But these samples might help someone trying to add JavaScript support to a .NET app out or at least get them started.....

Rick,
I used a similar technique in ASP.Net 1.1. When I converted to 2.0 I noticed the VSA library was marked obsolete. So I searched for a way to eval basic javascript expressions. (I was looking for something that would simply return True or False base on whatever I passed in to it.)

We had a problem with the 'Microsoft.JScript.Vsa.VsaEngine' code in ValruleFilters because Microsoft deprecated it and made it obsolete.

They recommended you use the ICodeDomCompiler interface to build code on the fly instead. 
I took a look at it and it is very complex.

I came up with a much simpler solution instead.

I built a .dll file using javascript and then compiled it using the javascript compiler which is available in a VS2005 command prompt.

Once we have the .dll we simply add it to the \Support folder and then referenced it in the project which needed to eval javascript stateemnts.

We call it like this:

Dim jScriptEvaluator As New EvalClass
Dim objResult As Object
objResult = jScriptEvaluator.Evaluate(“1==1 && 2==2”)

This is *much* simpler and safer than ICodeDom.
======================================================================
Warning

'Microsoft.JScript.Vsa.VsaEngine' is obsolete: 
'Use of this type is not recommended because it is being deprecated in Visual Studio 2005; 
there will be no replacement for this feature. Please see the ICodeCompiler documentation for additional help.'

======================================================================

Detailed Steps to create a .dll:

1. Create a file in Notepad with only these contents:

class EvalClass { function Evaluate(expression: String) { return eval(expression); } } 

2. Save the file as C:\MyEval.js

3. Open a VS2005 Command Prompt (Start, Programs, VS2005, VS2005 Tools)

4. Type Cd\ to get to C:\

5. Type 
jsc /t:library C:\MyEval.js

6. A new file is created named MyEval.dll.

7. Copy MyEval.dll to the project and reference it (also reference Microsoft.Jscript.dll).

8. Then you should be able to call it like this:

Dim jScriptEvaluator As New EvalClass
Dim objResult As Object
objResult = jScriptEvaluator.Evaluate(“1==1 && 2==2”)

objResult is True.

Parent Child in MVC

Given your structure of Albums and Tracks, it would probably be preferable to have a direct 1 to many relationship between Albums and Tracks so that 1 album can have many tracks. Regardless of how many albums a track may appear on, your models could look like:

public class Albums {
    public int ID { get; set; }
    public string Artist { get; set; }
    public string AlbumTitle { get; set; }
    public string Notes { get; set; }
    public IQueryable<Track> Tracks { get; set; }
}

public class Track {
    public int ID { get; set; }
    public int AlbumID { get; set; }    // This may be unnecessary
    public string TrackTitle { get; set; }
    public string Notes { get; set; }
}
This would allow your data layer to populate all of the tracks that belong to a specific Album, but if you don't need to know the tracks it can just remain null. But your data layer just needs to fetch the album and then populate the Tracks property with an IQueryable object.

public ViewResult AlbumExt(int id)
{
    Album album = albumRepository.All.Where(a => a.ID == id);
    album.Tracks = tracksRepository.All.Where(t => t.AlbumId == id);
    return View(album);
}
This would give you a single model, but all of the related tracks would still be accessible through the Model.Tracks property in the view:

@model MyNameSpace.Album

@{
    foreach (var track in Model.Tracks)
    {
        <text>
            <h1>@track.TrackTitle</h1><br />
        </text>
    }  
}



Example 2


MVC: Multiple Models in One Single View
Here the question is say you have two model M1 and M2. M1 model consistd properties like a,b. M2 Consists properties like c,d. All a,b,c, d are required(Tagged as [Required]). Now you have a single View V. You have to display all a,b,c,d four properties into V view.

The simplest solution is first create M1 and M2 model class with a,b[in M1] and c,d[in M2] property . Now in M1 Model have a list property of M2 class

public List<M2> M2Prop { get; set; }

Access M1 Class in V view. You are done. Have a look on the below sample code.

public class Student
    {
        [Required]
        public int RollNo { get; set; }

        [Required]
        public string Name { get; set; }

        [Required]
        public string Class { get; set; }

        public string Address { get; set; }

        public List<StudentScore> StudentScore { get; set; }

   }

And the ‘StudentScore’ class is as follows.

public class StudentScore
    {
        [Required]
        public int StudentRollNo { get; set; }

        [Required]
        public string StudentName { get; set; }

        [Required]
        public string Subject { get; set; }

        [Required]
        public int Marks { get; set; }

        [Required]
        public string Grade { get; set; }

    }

Create View with strongly typed of Student Class.
And on the view it is like below.

@model IEnumerable<MultipleModelInOneView.Models.Student>


@foreach (var item in Model)
    {

<td>
                @item.RollNo
            </td>
            <td>
                @item.Name
            </td>

       @foreach (var score in item.StudentScore)
            {
                 <td>
                    @score.Grade
               
                </td>
                <td>
                    @score.Marks
                </td>
         
            }

}

html elements find all css

<input type="submit" name="ctl00$MainContent$btnSearch" value="Search Now" onclick="return validateAge();" id="MainContent_btnSearch" class="btn btn-secondary btn-block">

Find the html element all css in a page.


simply register the function

var getCss = function(el) {

var style = window.getComputedStyle(el);

return Object.keys(style).reduce(function(acc, k) {

var name = style[k],

value = style.getPropertyValue(name);

if (value !== null) {

acc[name] = value;

}

return acc;

}, {});

};

and call the css function 

(MainContent_btnSearch).getCss();

Database to Object

You have a lot of questions in one question.

Linq2SQL is just an ORM kind of, if you are going that route I'd look at the entity framework (microsoft's orm).

Let's talk about layered applications a bit to help you understand how to populate objects. Your typical database app is composed of 3 layers (some say 4 and refer to the database itself as a layer, it really doesn't matter). You have the following:

-UI

-BLL

-DAL

So your communication is the UI talks to the BLL and the BLL talks to the DAL. The DAL returns some data to the BLL which in turn present it back to the UI. I don't know who told you datasets / tables are bad...sure a reader is faster but it doesn't mean using a datatable is bad.

Let me give you an example. Stop thinking of your DAL as one simple class. Start thinking of the DAL layer as an entire folder of different classes. One of those classes is a static DB class. It's static because you are dealing with one database (in most cases), so no need to instantiate the class. So it may look like this:

public static class DB {
private static readonly string connectionString = ConfigurationManager.ConnectionStrings[connectionStringName].ConnectionString;
private static readonly DbProviderFactory factory = DbProviderFactories.GetFactory(dataProvider);

public static int Update(string sql)
        {
            using (DbConnection connection = factory.CreateConnection())
            {
                connection.ConnectionString = connectionString;

                using (DbCommand command = factory.CreateCommand())
                {
                    command.Connection = connection;
                    command.CommandText = sql;

                    connection.Open();
                    return command.ExecuteNonQuery();
                }
            }
        }

public static DataTable GetDataTable(string sql)
        {
            using (DbConnection connection = factory.CreateConnection())
            {
                connection.ConnectionString = connectionString;

                using (DbCommand command = factory.CreateCommand())
                {
                    command.Connection = connection;
                    command.CommandType = CommandType.Text;
                    command.CommandText = sql;

                    using (DbDataAdapter adapter = factory.CreateDataAdapter())
                    {
                        adapter.SelectCommand = command;

                        DataTable dt = new DataTable();
                        adapter.Fill(dt);

                        return dt;
                    }
                }
            }
}

Some of this was taken from the dofactory website. Great resource to learn how to use design patterns. Anyhow that is just one .class file. Now you need another one for say a CustomerDAO (a customer data access object).

Ok so how can you use that DB class you created (well I would use a combination of sprocs but to make this a simple post lets avoid stored procedures for now). If I need to Get Customers I could define this:

public IList<Customer> GetCustomers()
{
    StringBuilder sql = new StringBuilder();
    sql.Append(" SELECT CustomerId, CompanyName, City, Country ");
    sql.Append("   FROM Customer ");

    DataTable dt = Db.GetDataTable(sql.ToString());

    return MakeCustomers(dt);
}

Remember this is in an entirely different .class file. Ok so how does make customers look:

private IList<Customer> MakeCustomers(DataTable dt)
        {
            IList<Customer> list = new List<Customer>();
            foreach (DataRow row in dt.Rows)
                list.Add(MakeCustomer(row));

            return list;
        }

So what I am doing here is I had a datatable full of customers. I need to loop through each row of the datatable and Make the customer:

private Customer MakeCustomer(DataRow row)
        {
            int customerId = int.Parse(row["CustomerId"].ToString());
            string company = row["CompanyName"].ToString();
            string city = row["City"].ToString();
            string country = row["Country"].ToString();

            return new Customer(customerId, company, city, country);
        }

So this customer is new'd and stored in a customer list.

This is just a small example of what your Data Access Layer does. The database class simply stores the connection string and functions to get a data set or get a data table or even in your case get a data reader (which you could do too). The CustomerDAO class is simply a class that deals with customer objects and may implement say an ICustomer interface.

So where is the Customer class itself? It can be in another folder as the business layer, because it simply is a business object. Here you can set validations, and required fields inside of the customer class.

Your UI doesnt have anything related to datareaders, datasets, or SQL at all. Your Business layer has nothing to do with it either (it defines some rules behind your business objects). Your dal can be very flexible (can work with SQL, Oracle, etc) or can be limited to say SQL Server if that is what you plan on doing. Do not overkill your app. If you are a MS guy and are certain to only use SQL Server don't make your job difficult by trying to roll out the ultimate DAL that works with any vendor. it is ok to use SQLCommand, SQLConnection, etc.

Skip to main content
Sign in (or register) English IBM

Technical topics
Evaluation software
Community
Events
Search developerWorks


developerWorks
Web development
Technical library
JavaScript EE, Part 1: Run JavaScript files on the server side

Learn how to use the javax.script API in Ajax and Java EE applications

Andrei Cioroianu, Senior Java Developer and Consultant, Devsphere
Summary:  Combine JavaScript with Java™ code on the server to get the freedom to use the same JavaScript routines on both servers and clients. In addition, the techniques presented throughout this series will allow you to maintain a single code base for both Ajax and non-Ajax clients. Because much of the server-side code would still be written in the Java language, you'll find it necessary to expose the Java Platform, Enterprise Edition (Java EE) features to JavaScript. In this series, learn how to run JavaScript files on the server side, call remote JavaScript functions with Ajax, and use the Java Scripting API with the JavaServer Pages (JSP) technology.

View more content in this series

Date:  16 Dec 2008
Level:  Intermediate
PDF:  A4 and Letter (56KB | 19 pages)Get Adobe® Reader®
Also available in:   Chinese  Russian  Japanese

Activity:  45190 views
Comments:   1 (View | Add comment - Sign in)

 Average rating (22 votes)
Rate this article
Typical Ajax applications use JavaScript on the client side and a different language, such as Java, on the server side. As a result, developers must implement some of their routines twice, using JavaScript for the Web browser and another language for the server. This double-coding issue can be avoided by using JavaScript combined with Java code on the server side, getting full support of scripting languages through the javax.script API. In addition, the Java SE Development Kit (JDK) 6 already includes Mozilla's Rhino JavaScript engine, which means no setup is required.

In this first article of the series, you will use a simple script runner that lets you execute JavaScript files within a Java EE application. Scripts will have access to the so-called "implicit objects" that are used in JSP pages, such as application, session, request, and response. Most of the samples consist of reusable code so that you can easily start using JavaScript on the server in your own applications.

Using the javax.script API

This section provides an overview of the javax.script API. You will learn how to execute scripts that access Java objects, invoke JavaScript functions from your Java code, and implement a caching mechanism for the compiled scripts.

Executing scripts

The javax.script API is very simple. You start by creating a ScriptEngineManager instance, which lets you obtain a ScriptEngine object (see Listing 1), using one of the following methods:

getEngineByName()
getEngineByExtension()
getEngineByMimeType()

Listing 1. Getting a ScriptEngine instance
import javax.script.*;
...
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
...
engine.eval(...);

You can also obtain the list of available script engines with getEngineFactories(). Currently, only the JavaScript engine is bundled with JDK 6, but ScriptEngineManager implements a discovery mechanism for third-party engines that support JSR-223 Scripting for the Java Platform (see Resources). You just have to place the JAR files of the script engines in your CLASSPATH.

After you get the javax.script.ScriptEngine instance, you can call eval() to execute scripts. You can also export Java objects as script variables, passing a Bindings instance to the eval() method. Listing 2 contains the ScriptDemo.java example, which exports two variables named demoVar and strBuf, executes a script named DemoScript.js, and then gets the variables to output their modified values.


Listing 2. The ScriptDemo.java example
package jsee.demo;

import javax.script.*;
import java.io.*;

public class ScriptDemo {

    public static void main(String args[]) throws Exception {
        // Get the JavaScript engine
        ScriptEngineManager manager = new ScriptEngineManager();
        ScriptEngine engine = manager.getEngineByName("JavaScript");

        // Set JavaScript variables
        Bindings vars = new SimpleBindings();
        vars.put("demoVar", "value set in ScriptDemo.java");
        vars.put("strBuf", new StringBuffer("string buffer"));
       
        // Run DemoScript.js
        Reader scriptReader = new InputStreamReader(
            ScriptDemo.class.getResourceAsStream("DemoScript.js"));
        try {
            engine.eval(scriptReader, vars);
        } finally {
            scriptReader.close();
        }
       
        // Get JavaScript variables
        Object demoVar = vars.get("demoVar");
        System.out.println("[Java] demoVar: " + demoVar);
        System.out.println("    Java object: " + demoVar.getClass().getName());
        System.out.println();
        Object strBuf = vars.get("strBuf");
        System.out.println("[Java] strBuf: " + strBuf);
        System.out.println("    Java object: " + strBuf.getClass().getName());
        System.out.println();
        Object newVar = vars.get("newVar");
        System.out.println("[Java] newVar: " + newVar);
        System.out.println("    Java object: " + newVar.getClass().getName());
        System.out.println();
    }
   
}

The DemoScript.js file (shown in Listing 3) contains a function named printType(), which is used to output the type of each script variable. The example calls the append() method of the strBuf object, modifies the value of demoVar, and sets a new script variable named newVar.

If the object passed to printType() has a getClass() method, it must be a Java object whose class name is obtained with obj.getClass().name. This JavaScript expression calls the getName() method of the object's java.lang.Class instance. If the object doesn't have a getClass member, printType() calls the toSource() method, which all JavaScript objects must have.


Listing 3. The DemoScript.js example
println("Start script \r\n");

// Output the type of an object
function printType(obj) {
    if (obj.getClass)
        println("    Java object: " + obj.getClass().name);
    else
        println("    JS object: " + obj.toSource());
    println("");
}

// Print variable
println("[JS] demoVar: " + demoVar);
printType(demoVar);

// Call method of Java object
strBuf.append(" used in DemoScript.js");
println("[JS] strBuf: " + strBuf);
printType(strBuf);

// Modify variable
demoVar = "value set in DemoScript.js";
println("[JS] demoVar: " + demoVar);
printType(demoVar);

// Set a new variable
var newVar = { x: 1, y: { u: 2, v: 3 } }
println("[JS] newVar: " + newVar);
printType(newVar);

println("End script \r\n");

Listing 4 contains the output of the ScriptDemo.java example. The first thing you'll notice is that demoVar is exported as a JavaScript String while the type of strBuf remains java.lang.StringBuffer. Primitive variables and Java strings are exported as native JavaScript objects. Any other Java objects (including arrays) are exported unaltered.


Listing 4. The output of ScriptDemo.java
Start script

[JS] demoVar: value set in ScriptDemo.java
    JS object: (new String("value set in ScriptDemo.java"))

[JS] strBuf: string buffer used in DemoScript.js
    Java object: java.lang.StringBuffer

[JS] demoVar: value set in DemoScript.js
    JS object: (new String("value set in DemoScript.js"))

[JS] newVar: [object Object]
    JS object: ({x:1, y:{u:2, v:3}})

End script

[Java] demoVar: value set in DemoScript.js
    Java object: java.lang.String

[Java] strBuf: string buffer used in DemoScript.js
    Java object: java.lang.StringBuffer

[Java] newVar: [object Object]
    Java object: sun.org.mozilla.javascript.internal.NativeObject

After running the script, the engine takes all variables (including new ones) and performs the inverse conversion, turning JavaScript primitives and strings into Java objects. Other JavaScript objects are wrapped into Java objects, which use some engine-specific internal API, such as sun.org.mozilla.javascript.internal.NativeObject.

Because you probably want to use only standard APIs, all data exchange between the Java code and the executed script should be done through primitive variables, strings, and Java objects (for example, beans) whose properties and methods can be accessed very easily in the JavaScript code. Simply said, don't try to access native JavaScript objects in your Java code. Use Java objects in the JavaScript code instead.

Invoking functions

In the previous example, you've seen that it is possible to call Java methods from JavaScript. Now you'll learn how to invoke JavaScript functions from your Java code. First of all, you must execute the script containing the function that you want to call. Then, you'll cast the ScriptEngine instance to javax.script.Invocable, which provides invokeFunction() and invokeMethod(). If your script implements all the methods of a Java interface, you can also use getInterface() to obtain a Java object whose methods are coded in the scripting language.

The InvDemo.java example (shown in Listing 5) executes a script named InvScript.js, which contains the demoFunction() routine. After casting the ScriptEngine instance to Invocable, the Java example passes the function name and the parameters to the engine's invokeFunction() method, which returns the value returned by demoFunction().


Listing 5. The InvDemo.java example
package jsee.demo;

import javax.script.*;
import java.io.*;

public class InvDemo {

    public static void main(String args[]) throws Exception {
        // Get the JavaScript engine
        ScriptEngineManager manager = new ScriptEngineManager();
        ScriptEngine engine = manager.getEngineByName("JavaScript");
       
        // Run InvScript.js
        Reader scriptReader = new InputStreamReader(
            InvDemo.class.getResourceAsStream("InvScript.js"));
        try {
            engine.eval(scriptReader);
        } finally {
            scriptReader.close();
        }
       
        // Invoke a JavaScript function
        if (engine instanceof Invocable) {
            Invocable invEngine = (Invocable) engine;
            Object result = invEngine.invokeFunction("demoFunction", 1, 2.3);
            System.out.println("[Java] result: " + result);
            System.out.println("    Java object: "
                    + result.getClass().getName());
            System.out.println();
        } else
            System.out.println("NOT Invocable");
    }
   
}

The InvScript.js file (see Listing 6) contains the demoFunction() routine and the same printType() function that was used in the previous script example.


Listing 6. The InvScript.js example
println("Start script \r\n");

function printType(obj) {
    if (obj.getClass)
        println("    Java object: " + obj.getClass().name);
    else
        println("    JS object: " + obj.toSource());
    println("");
}

function demoFunction(a, b) {
    println("[JS] a: " + a);
    printType(a);
    println("[JS] b: " + b);
    printType(b);
    var c = a + b;
    println("[JS] c: " + c);
    printType(c);
    return c;
}

println("End script \r\n");

If you look at the output of InvDemo.java (shown in Listing 7), you'll observe that the numeric parameters are converted to JavaScript objects and the value returned by demoFunction() is obtained as a Java object. These conversions are performed only for primitives and strings. Any other objects are passed unchanged between the JVM and the JavaScript engine, and vice-versa.


Listing 7. The output of InvDemo.java
Start script

End script

[JS] a: 1
    JS object: (new Number(1))

[JS] b: 2.3
    JS object: (new Number(2.3))

[JS] c: 3.3
    JS object: (new Number(3.3))

[Java] result: 3.3
    Java object: java.lang.Double

Note that javax.script.Invocable is an optional interface, which some script engines may not implement. The JavaScript engine that comes with JDK 6 does support this interface.

Compiling scripts

Interpreting scripts every time they are executed wastes CPU resources. If you run the same scripts multiple times, you can significantly reduce the execution time by compiling the scripts, using the methods provided by another optional interface named javax.script.Compilable, which is supported by the JavaScript engine of JDK 6.

The CachedScript class (see Listing 8) takes a script file and recompiles it only when the source code is modified. The getCompiledScript() method calls the script engine's compile(), which returns a javax.script.CompiledScript object whose eval() methods execute the script.


Listing 8. The CachedScript class
package jsee.cache;

import javax.script.*;
import java.io.*;
import java.util.*;

public class CachedScript {
    private Compilable scriptEngine;
    private File scriptFile;
    private CompiledScript compiledScript;
    private Date compiledDate;

    public CachedScript(Compilable scriptEngine, File scriptFile) {
        this.scriptEngine = scriptEngine;
        this.scriptFile = scriptFile;
    }
   
    public CompiledScript getCompiledScript()
            throws ScriptException, IOException {
        Date scriptDate = new Date(scriptFile.lastModified());
        if (compiledDate == null || scriptDate.after(compiledDate)) {
            Reader reader = new FileReader(scriptFile);
            try {
                compiledScript = scriptEngine.compile(reader);
                compiledDate = scriptDate;
            } finally {
                reader.close();
            }
        }
        return compiledScript;
    }

}

The ScriptCache class (shown in Listing 9) implements a repository for the compiled scripts, using a java.util.LinkedHashMap object. The map's initial capacity is set to a maximum number of cached scripts and the load factor is 1. These two parameters guarantee that cacheMap will never need a rehash.

By default, the LinkedHashMap class uses the insert-order for its entries. The third parameter of the LinkedHashMap() constructor must be true to use the access-order for the map's entries instead of the default order.

After the maximum capacity of the cache is reached, the removeEldestEntry() method starts returning true so that an entry is automatically removed from cacheMap each time a new compiled script is added to the cache.

By using the auto-removal mechanism of LinkedHashMap in combination with the access-order, ScriptCache ensures that the Least Recently Used (LRU) script will be removed from the full cache when a new script is added.


Listing 9. The ScriptCache class
package jsee.cache;

import javax.script.*;

import java.io.*;
import java.util.*;

public abstract class ScriptCache {
    public static final String ENGINE_NAME = "JavaScript";
    private Compilable scriptEngine;
    private LinkedHashMap<String, CachedScript> cacheMap;

    public ScriptCache(final int maxCachedScripts) {
        ScriptEngineManager manager = new ScriptEngineManager();
        scriptEngine = (Compilable) manager.getEngineByName(ENGINE_NAME);
        cacheMap = new LinkedHashMap<String, CachedScript>(
                maxCachedScripts, 1, true) {
            protected boolean removeEldestEntry(Map.Entry eldest) {
                return size() > maxCachedScripts;
            }
        };
    }

    public abstract File getScriptFile(String key);

    public synchronized CompiledScript getScript(String key)
            throws ScriptException, IOException {
        CachedScript script = cacheMap.get(key);
        if (script == null) {
            script = new CachedScript(scriptEngine, getScriptFile(key));
            cacheMap.put(key, script);
        }
        return script.getCompiledScript();
    }
   
    public ScriptEngine getEngine() {
        return (ScriptEngine) scriptEngine;
    }
   
}

The next section uses the ScriptCache class, implementing the abstract getScriptFile() method and using getScript() to retrieve compiled scripts from the cache.

Building a script runner

In this section, you'll learn how to create a simple Java servlet that implements a URL-script mapping, which allows you to invoke server-side scripts from the Web browser. In addition, the servlet will expose several Java EE objects as variables that can be used in your JavaScript code. You'll also learn how to use script contexts that let you run multiple concurrent scripts with a single JavaScript engine.

Initializing the servlet

The name of the servlet class is JSServlet. Its init() method (see Listing 10) gets several configuration parameters and creates a ScriptCache object. The servlet's script cache uses getRealPath() to obtain the path of the script file that is mapped to a given URI.


Listing 10. The init() method of JSServlet
package jsee.servlet;

import javax.script.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import jsee.cache.*;

public class JSServlet extends HttpServlet {
    private String cacheControlHeader;
    private String contentTypeHeader;
    private ScriptCache scriptCache;
   
    public void init() throws ServletException {
        ServletConfig config = getServletConfig();
        cacheControlHeader = config.getInitParameter("Cache-Control");
        contentTypeHeader = config.getInitParameter("Content-Type");
        int maxCachedScripts = Integer.parseInt(
                config.getInitParameter("Max-Cached-Scripts"));
        scriptCache = new ScriptCache(maxCachedScripts) {
            public File getScriptFile(String uri) {
                return new File(getServletContext().getRealPath(uri));
            }
        };
    }
    ...
}

Listing 11 contains the servlet's parameters, which are specified in the web.xml file. The Cache-Control header has nothing to do with the script cache. Both headers will be part of the HTTP responses returned by the servlet. The no-cache value will tell the browser not to cache the servlet's response, which should be treated as text/plain.


Listing 11. The web.xml file
<web-app ...>

    <servlet>
        <servlet-name>JSServlet</servlet-name>
        <servlet-class>jsee.servlet.JSServlet</servlet-class>
        <init-param>
            <param-name>Cache-Control</param-name>
            <param-value>no-cache</param-value>
        </init-param>
        <init-param>
            <param-name>Content-Type</param-name>
            <param-value>text/plain</param-value>
        </init-param>
        <init-param>
            <param-name>Max-Cached-Scripts</param-name>
            <param-value>1000</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>JSServlet</servlet-name>
        <url-pattern>*.jss</url-pattern>
    </servlet-mapping>

</web-app>

As you can see in Listing 11, the *.jss pattern is mapped to the servlet. This means that JSServlet will handle all requests whose URLs end with the .jss extension. When the user enters such a URL in the Web browser or clicks a .jss link, the browser sends the HTTP request to the Web server (for example, Apache), which should be configured to dispatch it to the servlet container (for example, Tomcat). If the servlet container acts as Web server as well, no extra configuration is required.

When the servlet container gets the request whose URL ends with .jss, it invokes the service() method that JSServlet inherits from javax.servlet.http.HttpServlet. This method calls either doGet() or doPost(), depending on the HTTP method of the request. Both methods are overridden by JSServlet as you'll see later in this section.

Using script contexts

Threading models for script engines

JSR-223 Scripting for the Java Platform (see Resources) defines three types of script engines:

Multithreaded engines that are capable of executing concurrent scripts that may modify variables seen by other threads
Thread-isolated engines, which are multithreaded too, but each thread has its own engine scope for keeping variables
Stateless engines, which are defined as thread-isolated engines that let the engine scope unmodified after the execution of any script
The type of script engine can be obtained with engine.getFactory().getParameter("THREADING"), which may return "MULTITHREADED", "THREAD-ISOLATED", or "STATELESS"

Each script-engine instance has a default context where you can store variables with the put() method and the output of any executed script is directed to System.out by default. In a server environment, you'll want to run concurrent scripts with each of them having its own context. The javax.script API satisfies this need, providing the ScriptContext interface and the SimpleScriptContext implementation.

Mozilla's Rhino JavaScript engine is a multithreaded engine (see the sidebar), allowing you to execute concurrent scripts that share the same context. In our case, however, you want to isolate the engine scopes and the output of the scripts running in different threads, which means you must create a new ScriptContext instance for each HTTP request.

Listing 12 shows the createScriptContext() method of the JSServlet class. This method sets the context's writer property in order to send the script's output to the writer of the response object when the script is executed. This means that everything you pass to print() or println() in your script will be included in the servlet's response.

In addition, createScriptContext() defines the following script variables with the setAttribute() method of the script context:


Table 1. Variables available in scripts that are executed by JSServlet
Script variable Description
config the javax.servlet.ServletConfig instance of the servlet
application the javax.servlet.ServletContext instance of the Web app
session the javax.servlet.http.HttpSession object
request the javax.servlet.http.HttpServletRequest object
response the javax.servlet.http.HttpServletResponse object
out the java.io.PrintWriter object that is used to output the response
factory the javax.script.ScriptEngineFactory of the script engine

The factory variable can be used to obtain information about the JavaScript engine, such as the language version or the engine version. The rest of the variables have the same roles that they have in JSP pages.


Listing 12. The createScriptContext() method of JSServlet
public class JSServlet extends HttpServlet {
    ...
    protected ScriptContext createScriptContext(
            HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        ScriptContext scriptContext = new SimpleScriptContext();
        scriptContext.setWriter(response.getWriter());
        int scope = ScriptContext.ENGINE_SCOPE;
        scriptContext.setAttribute("config", getServletConfig(), scope);
        scriptContext.setAttribute("application", getServletContext(), scope);
        scriptContext.setAttribute("session", request.getSession(), scope);
        scriptContext.setAttribute("request", request, scope);
        scriptContext.setAttribute("response", response, scope);
        scriptContext.setAttribute("out", response.getWriter(), scope);
        scriptContext.setAttribute("factory",
                scriptCache.getEngine().getFactory(), scope);
        return scriptContext;
    }
    ...
}

The runScript() method (see Listing 13) gets a compiled script from the cache and calls the eval() method, passing the given script context as parameter.


Listing 13. The runScript() method of JSServlet
public class JSServlet extends HttpServlet {
    ...
    protected void runScript(String uri, ScriptContext scriptContext)
            throws ScriptException, IOException {
        scriptCache.getScript(uri).eval(scriptContext);
    }
    ...
}

Handling requests

You could simply call the above runScript() method to execute the script that is mapped to the URL of the HTTP request. In a real application, however, you'll probably want to do some initialization before running the script and some finalization after the script's execution.

It is possible to run multiple scripts, sequentially, in the same context. For example, a script could define a set of variables and functions. Then, another script could do some processing, using the variables and functions of the previous script that was executed in the same context.

The servlet's handleRequest() method (shown in Listing 14) sets the HTTP headers, runs the init.jss script, removes the context path from the request's URI, executes the script that has the obtained URI, and then runs another script named finalize.jss.


Listing 14. The handleRequest() method of JSServlet
public class JSServlet extends HttpServlet {
    ...
    protected void handleRequest(
            HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        if (cacheControlHeader != null)
            response.setHeader("Cache-Control", cacheControlHeader);
        if (contentTypeHeader != null)
            response.setContentType(contentTypeHeader);
        ScriptContext scriptContext = createScriptContext(request, response);
        try {
            runScript("/init.jss", scriptContext);
            String uri = request.getRequestURI();
            uri = uri.substring(request.getContextPath().length());
            try {
                runScript(uri, scriptContext);
            } catch (FileNotFoundException x) {
                response.sendError(404, request.getRequestURI());
            }
            runScript("/finalize.jss", scriptContext);
        } catch (ScriptException x) {
            x.printStackTrace(response.getWriter());
            throw new ServletException(x);
        }
    }
    ...
}

The doGet() and doPost() methods (see Listing 15) of JSServlet call handleRequest().


Listing 15. The doGet() and doPost() methods of JSServlet
public class JSServlet extends HttpServlet {
    ...
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        handleRequest(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        handleRequest(request, response);
    }

}

Developing server-side scripts

This section contains several examples of server-side scripts, which show how you can get the request parameters, access the properties of your JavaBeans, and generate JSON responses.

Pre-processing and post-processing

In the previous section, you've seen that JSServlet invokes init.jss (shown in Listing 16) before executing the requested script. If you want to measure how long it takes to execute your scripts, you can store the start time into a variable as shown below.


Listing 16. The init.jss script
var debug = true;
var debugStartTime = java.lang.System.nanoTime();

Then, you can calculate the execution time in finalize.jss (see Listing 17). The time is printed as a JavaScript comment so that JSServlet can generate valid JSON responses.


Listing 17. The finalize.jss script
var debugEndTime = java.lang.System.nanoTime();
if (debug)
    println("// Time: " + (debugEndTime - debugStartTime) + " ns");

More code will be added to init.jss and finalize.jss through this series.

Getting request parameters

Scripts invoked with the help of JSServlet can access request parameters with request.getParameter() and request.getParameterValues(), which return Java objects. You might prefer a shorter syntax and you might want to work with JavaScript objects instead of Java strings and arrays. This can be done very easily by adding the following lines to init.jss (see Listing 18).


Listing 18. Getting request parameters in init.jss
var param = new Object();
var paramValues = new Object();

function initParams() {
    var paramNames = request.getParameterNames();
    while (paramNames.hasMoreElements()) {
        var name = paramNames.nextElement();
        param[name] = String(request.getParameter(name));
        paramValues[name] = new Array();
        var values = request.getParameterValues(name);
        for (var i = 0; i < values.length; i++)
            paramValues[name][i] = String(values[i]);
    }
}

initParams();

Let's say you request a script named ParamDemo.jss with the URL shown in Listing 19.


Listing 19. URL example for requesting a script
http://localhost:8080/jsee/ParamDemo.jss?firstName=John&lastName=Smith

In ParamDemo.jss (see Listing 20), you can get the two request parameters with param.firstName and param.lastName.


Listing 20. The ParamDemo.jss example
println("Hello " + param.firstName + " " + param.lastName);

Accessing JavaBeans

The application, session and request scopes of a Web application store bean instances, which you can obtain and replace with the getAttribute() and setAttribute() methods of ServletContext, HttpSession, and HttpServletRequest, respectively. You can also use the getBean() and setBean() functions (shown in Listing 21), which must be placed into the init.jss file so that any script can call them. The scope parameter should be one of the following strings:

"application"
"session"
"request"

Listing 21. The getBean() and setBean() functions of init.jss
function getBean(scope, id) {
    return eval(scope).getAttribute(id);
}

function setBean(scope, id, bean) {
    if (!bean)
        bean = eval(id);
    return eval(scope).setAttribute(id, bean);
}

Now say you want to keep an instance of DemoBean (see Listing 22) in the session scope.


Listing 22. The DemoBean.java example
package jsee.demo;

public class DemoBean {
    private int counter;

    public int getCounter() {
        return counter;
    }

    public void setCounter(int counter) {
        this.counter = counter;
    }

}

The BeanDemo.jss script (shown in Listing 23) imports the package containing the JavaBean with importPackage(Packages.jsee.demo). Then, the script tries to get the bean instance from the session scope with getBean(). If the bean is not found, BeanDemo.jss creates the object and places it into the session scope with setBean(). At the end, the script increments and prints the bean's counter property.


Listing 23. The BeanDemo.jss example
importPackage(Packages.jsee.demo);
var bean = getBean("session", "demo");
if (!bean) {
    bean = new DemoBean();
    setBean("session", "demo", bean);
}
bean.counter++;
println(bean.counter);

If you import a package that starts with java, javax, org, edu, com, or net, you don't have to use the Packages prefix in importPackage(). You may also import individual classes with importClass().

Returning JSON responses

Listing 24 shows an example that generates a JSON response containing some information about the JavaScript engine and the script's URI. The example uses the JavaScript syntax to create the json object whose source code is obtained as a String with the toSource() method.


Listing 24. The JsonDemo.jss example
var json = {
    engine: {
        name: String(factory.engineName),
        version: String(factory.engineVersion),
        threading: String(factory.getParameter("THREADING"))
    },
    language: {
        name: String(factory.languageName),
        version: String(factory.languageVersion)
    },
    script: {
        uri: String(request.requestURI)
    }
};

println(json.toSource());

All Java objects, which are retrieved from the properties of factory and request in this example, must be converted to JavaScript objects so that toSource() can work properly. Listing 25 contains the script's output:


Listing 25. The output of JsonDemo.jss
({language:{name:"ECMAScript", version:"1.6"},
engine:{name:"Mozilla Rhino", threading:"MULTITHREADED",
version:"1.6 release 2"}, script:{uri:"/jsee/JsonDemo.jss"}})

Conclusion

In this article, you've learned how to compile and execute JavaScript files, using the javax.script API. You also learned how to implement an LRU cache based on java.util.LinkedHashMap, how to export Java objects as script variables, how to implement a URL-script mapping, and how to build JavaScript files that are executed on the server-side. Stay tuned for the next part of this series where you'll learn how to call remote JavaScript functions with Ajax.


Back to top

Download

Description Name Size Download method
Sample application for this article jsee_part1_src.zip 25KB HTTP
Information about download methods


Resources

Learn

JSR-223 Scripting for the Java Platform is the specification containing all the details for using scripting languages in Java applications.

The Java Scripting Programmer's Guide presents the Java Scripting API and provides more code examples.

The javax.script package contains all the classes and interfaces of the Java Scripting API.

The developerWorks Web development zone is packed with tools and information for Web 2.0 development.

The developerWorks Ajax resource center contains a growing library of Ajax content as well as useful resources to get you started developing Ajax applications today.

Get products and technologies

Mozilla Rhino is the JavaScript engine bundled with Java SE Development Kit (JDK) 6.

About the author

Andrei Cioroianu is the founder of Devsphere, a provider of Java EE development and Web 2.0/Ajax consulting services. He's been using Java and Web technologies since 1997 and has over 10 years of professional experience in solving complex technical problems and managing the full life cycle of commercial products, custom applications, and open-source frameworks. You can reach Andrei through the contact form at www.devsphere.com.

Close [x]

Report abuse help
Report abuse

Thank you. This entry has been flagged for moderator attention.


Close [x]

Report abuse help
Report abuse

Report abuse submission failed. Please try again later.


Close [x]

developerWorks: Sign in

IBM ID:
Need an IBM ID?
Forgot your IBM ID?

Password:
Forgot your password?
Change your password

 Keep me signed in.

By clicking Submit, you agree to the developerWorks terms of use.

 

The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Close [x]

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Display name:(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 

All information submitted is secure.

Rate this article

 Average rating (22 votes)

1 star1 star
2 stars2 stars
3 stars3 stars
4 stars4 stars
5 stars5 stars


Comments

Add comment:

Sign in or register to leave a comment.

Note: HTML elements are not supported within comments.



Notify me when a comment is added1000 characters left




Total comments (1)
Excellent article - precise and to the point.
Is it possible to provide an insight into performance with script engine? Similar tasks can be performed by various technologies and in order to adopt a technology, it would help to see how a scripting solution using JS would perform as compared to a native Java solution. For AJAX applications benefits of having JS modules run on server side are tremendous - Security (not sending sensitive data to browser), Overcome hard to solve cross-browser problems, Reduce latencies by eliminating browser-server trips - and at the same time delegating processing to browsers thereby achieving resposive UI, massive scalability. What remains to be seen is how much can we really push to the server without bogging it down. Obviously, answers to lot of these questions depends on - what is your app. However, a some commonly used realistic scenario breakdown w.r.t. performance will certainly help in adopting these technologies.

Posted by J D on 12 December 2009Report abuse
Back to top

Table of contents


Using the javax.script API
Building a script runner
Developing server-side scripts
Conclusion
Download
Resources
About the author
Comments
Next steps from IBM


Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

Try: WebSphere Portal Express
Article: Get started using Ajax and WebSphere Portal Express
Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
Buy: WebSphere Portal Express
Dig deeper into Web development on developerWorks

Overview
New to Web development
Open source projects
Technical library (articles, tutorials, training, and more)
Forums
Events
IBM SmartCloud trial. No charge.


Unleash the power of hybrid cloud computing today!

Public and private solutions in one trial.

Special offers







Trial software offers

Print this page
Share this pageFollow developerWorks
About
Help
Contact us
Submit content
Feeds
Report abuse
Terms of use
IBM privacy
IBM accessibility
Faculty
Students
Business Partners

Form Submit as JSON

This is the basic html script


<h2>Form</h2>
<form action="" method="post">
    <label>Hello</label>
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

Here is javascript

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});


You can see it

http://jsfiddle.net/sxGtM/3/