In the 1th part of this series, you learned how to asynchronous JavaScript and XML (Ajax) and Java™platform, Enterprise Edition (Java EE) application, use the Javax.script API. This article will show you how to implement a remote procedure call (Sqlremote Procedure call,rpc) mechanism for Web applications that use JavaScript simultaneously on both the server and the client. You'll also learn some interesting tips, such as implementing Java interfaces with JavaScript, building XMLHttpRequest wrappers, making Ajax debugging easier, and generating JavaScript code with JSP tag files.
The RPC mechanism is very simple. There is a set of JavaScript functions on the server that now want to be called from a Web browser, just as there is a JavaScript engine that executes both client and server code. Therefore, there is a need for client routines that should have the same name and parameters as the corresponding routines on the server side.
The client routines will use Ajax to pass their parameters to the server for real processing on the server. A Java servlet invokes the server-side function and returns the results to the client using the JSON format. The client routine then computes the Ajax response and converts the JSON string back to the JavaScript object, which is returned to the application.
As an application developer, you can focus on building the user interface and the functions that are executed on the server. You do not need to deal with Ajax or RPC issues because this article provides a JavaScript code generator in the form of a markup file that you can use on a JSP page to automatically generate client routines. To understand how that works, we start with a sample application.
Developing a JVM monitoring application
The sample application in this article uses the Java Management API to monitor the JVM of a Java EE server running a managed application. The user interface consists of a simple Web page that displays various indicators, such as the number of Java classes, memory consumption, the activity of the garbage collector, and the number of threads.
This information is obtained by Ajax and inserted into an HTML table (as shown in Figure 1; Click here for a larger view of Figure 1). More interestingly, this Web page contains a form that lets you allocate memory for a given number of seconds. You can also invoke the JVM's garbage collector (GC).
Figure 1. Sample Application
On the server side, the application uses a JavaScript file, and the Web browser uses Ajax to invoke the functions in the file using the script runtime provided in part 1th of this series. This is a simple servlet that handles all requests that end with the. jss extension of the URL. The servlet finds the appropriate JavaScript file on the server and executes it using the Java Scripting API.
Create a Web page
Listing 1 shows the tables and forms in the monitorpage.jsp file. Each data unit has an ID to update the contents of the table with JavaScript. The OnLoad property of the <body> tag is used to invoke a JavaScript function named Init () that initializes the client portion of the application. The other two functions AllocMem () and GC () are called when the user clicks the button.
Listing 1. Monitorpage.jsp's HTML code
...
<style type= "Text/css" >
th {text-align:left;}
td {Text-align:right;}
. space {margin:10px;}
</style>
<body onload= "init ()" >
<table border= "1" cellpadding= "5" >
<tr>
<th colspan=2>classes</th>
<th Colspan=2>heap memory</th>
<th Colspan=2>non-heap memory</th>
<th Colspan=2>garbage collector</th>
<th colspan=2>threads</th>
</tr>
<tr>
<th>Loaded</th>
<TD id= "info.classes.loaded" ></td>
<th>Used</th>
<TD id= "info.memory.heap.used" ></td>
<th>Used</th>
<TD id= "info.memory.nonHeap.used" ></td>
<th>Count</th>
<TD id= "Info.gc.count" ></td>
<th>Live</th>
<TD id= "Info.threads.live" ></td>
</tr>
<tr>
<th>Unloaded</th>
<TD id= "info.classes.unloaded" ></td>
<th>Committed</th>
<TD id= "info.memory.heap.committed" ></td>
<th>Committed</th>
<TD id= "info.memory.nonHeap.committed" ></td>
<th>Time</th>
<TD id= "Info.gc.time" ></td>
<th>Peak</th>
<TD id= "Info.threads.peak" ></td>
</tr>
</table>
<br>
<form name= "Monitorform" >
Size: <input name= "Size" size= "ten" >
<span class= "Space" ></span>
Seconds: <input name= "Seconds" size= "4" >
<span class= "Space" ></span>
<button type= "button"
onclick= "AllocMem (This.form.size.value, This.form.seconds.value)"
>allocate memory</button>
<span class= "Space" ></span>
<button type= "button" onclick= "GC ()" >collect garbage</button>
</form>
</body>
The monitorpage.jsp file (see Listing 2) uses a custom tag named <js:rpc> to generate client JavaScript functions that call the corresponding functions on the server side. The <js:rpc> tag has the following properties:
| Script | The URL of the script that will be executed on the server |
| function | The signature of a JavaScript function that was invoked remotely |
| Validator | An optional expression that evaluates the expression in a Web browser to validate the parameters of the function |
| Jsonvar | The name of an optional JavaScript variable that is used to store the JSON response |
| Method | HTTP method, can be a GET or post |
| Async | Indicates whether a Boolean property of XMLHttpRequest should be used asynchronously or synchronously |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
