200 likes | 316 Views
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.
E N D
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.
XMLHTTPRequestJavascript 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 XMLHttpRequestobject 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 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> 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); } </script> </head> <body> <input type='button' onclick='MakeRequest();' value='Use AJAX!!!!'/> <div id='ResponseDiv'> This is a div to hold the response. </div> </body> </html>
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 <script> 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; } }; varqueryString = "?PV=" + myPV + "&Rate=" + myRate + "&Year=" + myYear; xmlhttp.open('GET', 'computeFVAjax'+ queryString , true); xmlhttp.send(null); } </script>
<form name="fvForm"> Enter PV: <input type="text" id ="PV" name="PV" value="" size="10" /><br> Select rate: <select name="Rate" id="Rate"> <option value=".04">4%</option> <option value=".05">5%</option> <option value=".06">6%</option> <option value=".07">7%</option> <option value=".08">8%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 id="Year10" />10 year<br> <input type="radio" name="Year" value=15 id="Year15" />15 year<br> <input type="radio" name="Year" value=30 id="Year30" />30 year<br> <br> Future Value: <input type="text" id="FV" name="FV" /> <br> <input type="button" value="ComputeFV" name="btnCompute" onClick="computeFV()" /> </form>
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); }