Christopher PaoliniComputational Science Research Center
College of EngineeringSan Diego State University
Computational Science 670Computational Science 670Fall 2009Fall 2009Monday October 26, 2009 · GMCS 350 · 2:00 PM - 2:50 PMMonday October 26, 2009 · GMCS 350 · 2:00 PM - 2:50 PM
Asynchronous JavaScript And XML Use of dynamic, rather then static HTML Use of CSS to define the view or the
application’s “look and feel” Use of JavaScript or ActionScript (Adobe
Flash) to define the application’s controller Use of the XMLHttpRequest (XHR) object to
asynchronously send an HTTP request to a web server and store or render the response data in the browser using Web Services
Responsiveness – web applications are more responsive because only the data that needs to be updated is transmitted from the server to the client browser, rather than an entire page of HTML
Interactivity - applications are more interactive because requests for data are made asynchronously and are hence non-blocking
These two advantages allow developers to create browser based applications that function like standalone desktop applications.
Simplest computational example is a web application that takes operand values as user input, invokes an arithmetic operation on the server, and displays a result in the browser (Demo)
A “Mashup” is a web application that retrieves and presents data from two or more remote sources
Last two factorial buttons invoke a Web Service on different hosts
Get started by downloading and installing a suitable IDE
Netbeans is recommended http://www.netbeans.org/ Download and install the
complete package (“All”)
Download the example Arithmetic web application and the two factorial Web Services
http://co2seq.sdsu.edu/ Unzip and open these
three web applications as Netbeans Projects
Your Netbeans session should resemble the image shown here
(Demo)
In Netbeans, Web content resides in a project’s Web Pages directory (Demo)
In an AJAX based application, the root application document index.html (or index.jsp) transports JavaScript and CSS, not HTML content
• No HTML body content (body element contains no content).• Content will be generated dynamically using JavaScript
Convention: create a Main.js file that defines code to execute on initial page load Include this file last in the root document’s head element
Main.js should define the window.onload function which is executed once all the scripts in the head element have been loaded
Our example invokes the render() method of a Desktop object defined by the Desktop class in Desktop.js
The Desktop class provides methods that render the application’s interface
Interface consists of◦ Buttons to invoke Web
Service operations◦ Text Entry Boxes where
the user specifies operand values
◦ Text Divisions to dynamically display textual content
Starts by creating three major divisions: a title panel, main panel, and a message panel
Then renders all the button widgets that will be needed
Look & feel controlled by CSS rules
Use division elements to place text and widgets at specific locations within the page
Verify your desired look by opening the page locally using a file:// URL and inspecting with Firebug (Demo)
http://getfirebug.com/
Place buttons within logical division panels Verify your desired look locally using Firebug (Demo) Each button has an unique identifier in the variable space of
JavaScript called the Document Object Model (DOM) ID You use this ID to refer to a particular rendered element Each button also has a value which is the text that appears within
the button’s bounding box The browser immediately renders a button when the button is
appended to it’s parent division element using appendChild()
Render text by setting the innerHTML member of a division element Render text using a child division element and attach the child to a
parent division
Use CSS rules to modify the look of the rendered text On our example application, two blue divisions of small font text are
used to label the bottom two factorial buttons:
Use CSS to define the look of these two text divisions through the element id selector
Text entry boxes are used to capture user input Render all the input boxes together and control their look using CSS
After all widgets have been rendered, use the bind() method to bind an event handler or callback function to a given context
Set the onclick function of each button element to be an event handler and pass a reference to this Desktopobject to the handler when the button is pressed
Each event handler retrieves the current text in the appropriate one (or two) text entry boxes and uses a proxy object to invoke a remote Web Service operation
The ArithmeticProxy object uses an XMLHttpRequest (XHR) object to asynchronously send an HTTP request to the co2seq.sdsu.edu server and render the response in a division element using the renderText() method
Arguments are curried for the callback by bind()
The purpose of the proxy object is to read a variable number of actual arguments, construct a SOAP Request Message, send the SOAP to thepeer server, wait for a SOAP Response Message, and process the response
In our case, processing a response is nothing more than extracting a numeric answer from an XML document and rendering the answer in a division element
The Simple Object Access Protocol (SOAP) is used to send structured messages between the browser and server
XML is used as the message format
The SOAP Request Body element contains a method name and a namespace definition which is mapped to method add() in Java class Arithmetic
The SOAP request carries operand values in a structured way
The SOAP response contains the operation’s return value
When the XHR object changes state, the proxy’s _handleHttpResponse() method is invoked automatically
When the SOAP response handler extracts the <return> element content (i.e. the answer), the designated higher level call back method is invoked using the JavaScript call() function
callbackData is any arbitrary object you wish to pass back to the higher level callback method
In our case, it is the string ‘Sum’ which is the element ID of a division element rendered to hold the answer
The actual server side code is written in Java and is encapsulated in a class that defines the remote Web Service operations exposed to clients through SOAP request messages
Notice the Arithmetic class includes it’s own (private – not exposed) invoke() method. Can you guess why?
A Web Service is a Java class that has been declared with an @WebService annotation
Exposed Web Service operations are public methods declared with an @WebMethod annotation. Arguments to operations must also be annotated using @WebParam. The WebParam name in the SOAP request message gets mapped to a formal parameter name.
There are many techniques used to create mashups, but perhaps the simplest technique is to have one Web Service operation act as a proxy for another Web Service operation
Consider the definition of the stirlingFactorial operation
Here, the Arithmetic Web Service on host co2seq.sdsu.edu acts as a client, much like the browser does, and invokes a Web Service operation on host test.sdsu.edu. The result from test.sdsu.edu is returned to the browser.
The JAVA Dynamic Dispatch Invocation API is used to implement WS-WS communication.
AccessURI defines the location of the remote WS
Web Service deployed on host test.sdsu.edu that implements Stirling’s approximation for n!
! 2n
nn n
e
Web Service deployed on host romulus.sdsu.edu implements Lanczos’ approximation
1
12
21( 1) 2
2
nn g
gn n g e A n
00
Nk
gk
cA n c
n k
User can input a value in a webpage, click a button, and have a computation performed on multiple hosts
Computation on co2seq.sdsu.ed
u
Computation on romulus.sdsu.ed
u
Computation on test.sdsu.edu
The JavaScript in Desktop.js can be made more compact by using arrays and iterators
Example:
The above code can be condensed by storing element id’s in an array and iterating over the array to render text divisions
Modify Desktop.js to use arrays and iterators. Consult http://api.prototypejs.org/ and study the Prototype Array class (hint: use Array#each)
Modify Desktop.js and Arithmetic.java to include another simple function that accepts one operand (sqrt, sin, cos, tan, log, exp, etc.) and executes on the browser’s peer host
Then add a multivariable function that takes two or more operands (atan2(x,y), hypot(x, y), pow(x, y), J(α,x,k), etc.) and executes on a remote host
Implement a Web Service that returns the CPU load of the local host
Deploy the CPU load Web Service on three or more hosts Write another Web Service that performs a significant
computation Deploy the computation Web Service on the same three or more
hosts Create a mashup that allows a user to invoke the computational
Web Service on the host with the least load (i.e. the mashup performs simple load balancing across multiple hosts).