AJAX and JSP 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.

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 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:'GET', 'http://localhost:8080/JavaExamples/demoJSPAjax.jsp', true); 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; } }'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 The responseXML property of the XMLHttpRequest object will contain a DOM document object. responseText will contain the response of the server in plain text. 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

This is a div to hold the response.

Example: <%

out.println("This is JSP response to your request!"); %> JavaScript to compute the future value: No protection of source code Using AJAX to compute FV

Enter PV:

Select Rate:

Select Year:
10 year
15 year
30 year

Future Value:

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); %> Straight Line Depreciation Table Using AJAX Form Straight Line Depreciation Table

Enter Property Value:
Enter Property Life:

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; } };'GET', 'createDepTable.jsp?pValue='+ value + '&pLife=' + life , true);

xmlhttp.send(null); } 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;

NumberFormat nf = NumberFormat.getCurrencyInstance(); strHTML="Stright Line Depreciation Table" + "
"; totalDepreciation=0; strHTML+= "

"; strHTML+="

"; strHTML+="

"; strHTML+="

"; for (int count = 1; count <= life; count++) { strHTML+=" "; strHTML+="

"; strHTML+="

"; strHTML+="


totalDepreciation+=depreciation; strHTML+="

"; value -= depreciation; } out.print(strHTML); %>

Recently Viewed Presentations

  • Math Jeopardy! Geometry: Shapes, Lines, & Angles (To

    Math Jeopardy! Geometry: Shapes, Lines, & Angles (To

    It also has two equal angles. What is an isosceles triangle? Quadrilaterals for 100 This four-sided shape has two pairs of opposite sides that are parallel and equal in length. What is a parallelogram? Quadrilaterals for 200 This four-sided shape...
  • Group Games - Bradford VTS

    Group Games - Bradford VTS

    Brain Teasers See later for examples Problem Curers (1) A Personal Talk Talk Limitation Exercise Dominant Talkers Problem Curers (2) Challenging them Get them to Observe Using Matchsticks Silent Sitters Skill Builders Team building Communication skills Facilitator-Presenter skills Learning Perception...
  • Production Planning - California State Polytechnic University ...

    Production Planning - California State Polytechnic University ...

    Production Planning Forecasts History Production Schedules HOH Production Forecast Menu Mix History & Historical Insight The value of physically seeing product Production Schedule Master Station Production Worksheets and other methods ("3x5") Your role in monitoring the process FOH Management Forecast...

    How to use the IPPC Online Comment System (OCS) IPPC Regional Workshops Training Common practices for OCS sessions in IPPC Regional Workshops Read the OCS Training Checklist for Regional Workshop's SOP (text pasted in this presentation). Make sure that you...
  • Modelovanje dvostepenog naponskog invertora sa L-C filterom i

    Modelovanje dvostepenog naponskog invertora sa L-C filterom i

    Modelovanje dvostepenog naponskog invertora sa L-C filterom i R-L opterećenjem u Matlabu-Simulinku; upoređenje kvaliteta izlaznog napona na invertoru i filteru dobijenih pomoću sinusno-trougaone PWM, PWM sa
  • Page 1 S. 3135 The Clean Air Planning

    Page 1 S. 3135 The Clean Air Planning

    S. 3135 The Clean Air Planning Act of 2002 Presentation for Jeff Holmstead November 2002 Overview of Presentation Introduction Provisions of S.3135 Analytical Methods Results of Analysis Notes on Cost Considerations Notes on Implementation and Administration of S.3135 Introduction On...
  • Closing the Achievement Gap

    Closing the Achievement Gap

    CANARY IN THE MINE (MANO SINGHAM, 1998) "What the academic achievement gap may really be telling us is that, while the symptoms of the education system's ills are more clearly visible in the black community than in the white, there...
  • Transition to College

    Transition to College

    Transition to College New environment New roles New procedures Areas of Potential Conflict Establishing entitlement to services Shared responsibilities The role of parents/advocates Balancing the right to accommodation & the right to protect the integrity of programs and services Student...
Year Value at BeginYr Dep During Yr Total to EndOfYr
" + count + " " + nf.format(value) + " " + nf.format(depreciation) + " " + nf.format(totalDepreciation) + "