Transcript AJAX & web stuff - SDSU College of Sciences

Christopher Paolini
Computational Science Research Center
College of Engineering
San Diego State University
Computational Science 670
Fall 2009
Monday 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 Desktop
object 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
Arguments are
curried for the
callback by bind()

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


The purpose of the proxy object is to read a variable number of actual
arguments, construct a SOAP Request Message, send the SOAP to the
peer 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
communicati
on.
AccessURI
defines the
location of
the remote
WS

Web Service deployed on host test.sdsu.edu that implements
Stirling’s approximation for n!
n
n !  2 n  
e
n

Web Service deployed on host romulus.sdsu.edu implements
Lanczos’ approximation
1

(n  1)  2  n  g  
2

n
1
2
e
N
1

 n  g  
2

Ag  n 
ck
k 0 n  k
Ag  n   c0  

User can input a value in a webpage, click a button, and have a
computation performed on multiple hosts
Computation on
co2seq.sdsu.edu
Computation on
test.sdsu.edu
Computation on
romulus.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).