1 / 23

Understanding AJAX for Web Page Updates

Learn how AJAX allows partial page updates without reload. Explore essential XMLHttpRequest methods, events, and workflows for asynchronous server communication in web development.

markpglenn
Download Presentation

Understanding AJAX for Web Page Updates

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX and JSP ISYS 350

  2. 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.

  3. 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.

  4. XMLHTTPRequestJavascript object

  5. 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"); }

  6. 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', 'http://localhost:8080/JavaExamples/demoJSPAjax.jsp', true);

  7. 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");

  8. 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.

  9. 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.

  10. 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.

  11. The responseXML property and responseText • The responseXML property of the XMLHttpRequest object will contain a DOM document object. • responseTextwill contain the response of the server in plain text.

  12. 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

  13. 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', 'http://localhost:8080/JavaExamples/demoJSPAjax.jsp', 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>

  14. Example: demoJspAjax.java <% out.println("This is JSP response to your request!"); %>

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

  16. 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; document.getElementById("FV").innerHTML = xmlhttp.responseText; } }; xmlhttp.open('GET', 'computeFV.jsp?PV='+ myPV + '&Rate=' + myRate + '&Year=' + myYear , true); xmlhttp.send(null); } </script>

  17. <form name="fvForm"> Enter PV: <input type="text" id="PV" name="PV" value="" /><br> <br> Select Rate: <select name="Rate" id="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br><br> Select Year: <br> <input type="radio" name="Year" id="Year10" value=10 />10 year<br> <input type="radio" name="Year" id="Year15" value=15 />15 year<br> <input type="radio" name="Year" id="Year30" value=30 />30 year<br> <br> <p id='FV'>Future Value: </p> <br> <input type="button" value="Compute FV" name="btnCompute" onClick="computeFV()" /> </form>

  18. computeFV.jsp <% 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("Future Value: " + FV); %>

  19. Straight Line Depreciation Table Using AJAX

  20. Form Straight Line Depreciation Table <form name="depForm" > Enter Property Value: <input type="text" name="pValue" value="" /><br> Enter Property Life: <input type="text" name="pLife" value="" /><br> <input type="button" value="ShowTable AJAX" name="btnShowTable" onclick="showTable()"/> </form> <div id="depTable"></div>

  21. showTable function function showTable() { value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4){ document.getElementById("depTable").innerHTML = xmlhttp.responseText; } }; xmlhttp.open('GET', 'createDepTable.jsp?pValue='+ value + '&pLife=' + life , true); xmlhttp.send(null); }

  22. JSP program <% String strValue, strLife,strHTML; strValue=request.getParameter("pValue"); strLife=request.getParameter("pLife"); double value, life, depreciation,totalDepreciation=0; value=Double.parseDouble(strValue); life=Double.parseDouble(strLife); depreciation=value/life; NumberFormatnf = NumberFormat.getCurrencyInstance(); strHTML="Stright Line Depreciation Table" + "<br>"; totalDepreciation=0; strHTML+= "<table border='1' width='400' cellspacing=1>"; strHTML+="<thead> <tr> <th>Year</th> <th>Value at BeginYr</th>"; strHTML+="<th>Dep During Yr</th> <th>Total to EndOfYr</th></tr> </thead>"; strHTML+="<tbody>"; for (int count = 1; count <= life; count++) { strHTML+="<tr>"; strHTML+=" <td >" + count + "</td>"; strHTML+=" <td >" + nf.format(value) + "</td>"; strHTML+=" <td>" + nf.format(depreciation) + "</td>"; totalDepreciation+=depreciation; strHTML+=" <td>" + nf.format(totalDepreciation) + "</td>"; value -= depreciation; } out.print(strHTML); %>

More Related