AJAX and Java ISYS 350

AJAX Asynchronous JavaScript and XML: – Related technologies: JavaScript, Document Object Model, XML, server-side script such as.Net, PHP, Java etc. Partial refresh: It lets you update part of a web page without having to reload the entire page. RIA: Rich Internet Application – Quick response time, interactive page

How AJAX Updates a Page JavaScript (working with AJAX engine) prepares a request and sends it to the web server. The server receives the request and processes it. The server prepares a response and sends it back to the browser. The JavaScript parses the response to update the page.

XMLHTTPRequest Javascript object Update a web page without reloading the page Request data from a server after the page has loaded Receive data from a server after the page has loaded

Creating a XMLHttpRequest Object if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

The Open Methods of XMLHTTPRequest object The HTTP and HTTPS requests of the XMLHttpRequest object must be initialized through the open method. There 5 parameters, but 2 are enough: – open( Method, URL, Asynchronous, UserName, Password ) – Method: GET, POST – URL: the URL of the HTTP request – Asynchronous: true/false; default is true Example: xmlhttp.open('GET', 'demoJavaAjax', true); Note: Don’t add the “java” extension to the URL.

The send method To send a request to a server, we use the send() method of the XMLHttpRequest object xmlhttp.send(); Optionally, the send method may accept a single parameter containing the content to be sent with the request. This parameter is typically in the form of a queryString. xmlhttp.send("fname=Henry&lname=Ford");

The onreadystatechange event listener For an asynchronous request, the onreadystatechange event listener will be automatically invoked for each of the following actions that change the readyState property of the XMLHttpRequest object.

The Four ReadyStates After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1. After the send method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object should be assigned a value of 2. Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3. Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4.

Example xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4){ document.getElementById('ResponseDiv').innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'demoJavaAjax', true); xmlhttp.send(null); Note 1: The listener must be defined before the open method is invoked. The open method must be invoked before the send method is invoked.

The responseXML property and responseText After a successful and completed call to the send method of the XMLHttpRequest, if the server response was valid XML and the Content-Type header sent by the server is understood by the user agent as an Internet media type for XML, the responseXML property of the XMLHttpRequest object will contain a DOM document object. Another property, responseText will contain the response of the server in plain text by a conforming user agent, regardless of whether or not it was understood as XML.

Overall Processes Create an XMLHttpRequest object Create the function to be executed when the server response is ready Send the request off to a file on the server Insert the response from the server to the web page

Example: HTML Page function MakeRequest() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4){ document.getElementById('ResponseDiv').innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'demoJavaAjax', true); xmlhttp.send(null); } This is a div to hold the response.

Example: demoJavaAjax.java protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println("This is from ajax!"); }

JavaScript to compute the future value: No protection of source code

Using AJAX to compute FV function computeFV(){ myPV=parseFloat(document.getElementById("PV").value); myRate=parseFloat(document.getElementById("Rate").value); if (document.getElementById("Year10").checked) {myYear=10;} else if (document.getElementById("Year15").checked) {myYear=15;} else {myYear=30;} if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4){ document.getElementById("FV").value = xmlhttp.responseText; } }; var queryString = "?PV=" + myPV + "&Rate=" + myRate + "&Year=" + myYear; xmlhttp.open('GET', 'computeFVAjax'+ queryString, true); xmlhttp.send(null); }

Enter PV: Select rate: 4% 5% 6% 7% 8% Select Year: 10 year 15 year 30 year Future Value:

computeFVAjax.java protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String myPV, myRate, myYear; myPV=request.getParameter("PV"); myRate=request.getParameter("Rate"); myYear=request.getParameter("Year"); double FV, PV, Rate, Year; PV=Double.parseDouble(myPV); Rate=Double.parseDouble(myRate); Year=Double.parseDouble(myYear); FV=PV*Math.pow(1+Rate,Year); out.println(FV); }