ajax and java isys 350. ajax asynchronous javascript and xml: – related technologies: javascript,...
TRANSCRIPT
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<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; } }; var queryString = "?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); }