Fall Semester (081) Module7: AJAX

Size: px

Start display at page:

Download "Fall Semester (081) Module7: AJAX"

Aubrie Simon
5 years ago
Views:

INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module7: AJAX Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.

1 INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester (081) Module7: AJAX Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals Objectives/Outline Objectives Understand the role of AJAX Learn how to use AJAX in your web applications Outline Rich User Experience AJAX Why AJAX? Real-Life Examples of AJAX Apps Technologies Used In AJAX Examples 4.2 1

2 Rich User Experience Take a look at a typical desktop application (Spreadsheet app, etc.) The program responses intuitively and quickly The program gives a user meaningful feedback's instantly A cell in a spreadsheet changes color when you hover your mouse over it Icons light up as mouse hovers them Things happen naturally No need to click a button or a link to trigger an event Characteristics of Conventional Web Applications Click, wait, and refresh user interaction Page refreshes from the server needed for all events, data submissions, and navigation Synchronous request/response communication model The user has to wait for the response Page-driven: Workflow is based on pages Page-navigation g logic is determined by the server

3 Issues of Conventional Web Application Interruption of user operation Users cannot perform any operation while waiting for a response Loss of operational context during refresh Loss of information on the screen Loss of scrolled position No instant feedback's to user activities A user has to wait for the next page Constrained by HTML Lack of useful widgets These are the reasons why Rich Internet Application (RIA) technologies were born AJAX AJAX stands for Asynchronous JavaScript And XML AJAX is a type of programming made popular in 2005 by Google (with Google Suggest) AJAX is not a new programming g language, but a new way to use existing standards With AJAX you can create better, faster, and more userfriendly web applications AJAX is using JavaScript, namely the XmlHttpRequest object, to communicate asynchronously with a server-side component and dynamically update the source of an HTML page based on the resulting XML/Text response

4 AJAX AJAX

5 AJAX DHTML plus Asynchronous communication capability through XMLHttpRequest Pros Most viable RIA technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code & no plug-in required Cons Still browser incompatibility JavaScript is hard to maintain and debug Why AJAX? Intuitive and natural user interaction No clicking required Mouse movement is a sufficient event trigger "Partial screen update" replaces the "click, wait, and refresh" user interaction model Only user interface elements that contain new information are updated (fast response) The rest of the user interface remains displayed without interruption (no loss of operational context) Data-driven (as opposed to page-driven) UI is handled in the client while the server provides data Asynchronous communication replaces "synchronous request/response model." A user can continue to use the application while the client program requests information from the server in the background Separation of displaying from data fetching

6 Real-Life Examples of AJAX Apps Google maps Goolgle Suggest g p p Gmail Yahoo Maps Many more are popping everywhere Technologies Used In AJAX JavaScript JavaScript function is called when an event in a page occurs Glue for the whole AJAX operation DOM API for accessing and manipulating structured documents Represents the structure of XML and HTML documents CSS Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript XMLHttpRequest JavaScript object that performs asynchronous interaction with the server

7 XMLHttpRequest JavaScript object Adopted by modern browsers Mozilla, Firefox, Safari, and Opera Communicates with a server via standard HTTP GET/POST XMLHttpRequest object works in the background for performing asynchronous communication with the backend server Does not interrupt user operation Server-Side Side AJAX Request Processing Server programming model remains the same It receives standard HTTP GETs/POSTs Can use Servlet,,J JSP, ASP, PHP... With minor constraints More frequent and finer-grained requests from client Response content type can be text/xml text/plain text/json text/javascript

AJAX: Sample App 5-5.15 Steps of AJAX Operation 1. A client event occurs 2. An XMLHttpRequest object is created 3. The XMLHttpRequest object is configured 4.

8 AJAX: Sample App Steps of AJAX Operation 1. A client event occurs 2. An XMLHttpRequest object is created 3. The XMLHttpRequest object is configured 4. The XMLHttpRequest object makes an async. request 5. The ValidateServlet returns an XML document containing the result 6. The XMLHttpRequest object calls the callback() function and processes the result 7. The HTML DOM is updated

9 XMLHttpRequest Properties onreadystatechange Set with a JavaScript event handler that fires at each state change readystate current status of request 0 = uninitialized 1 = loading 2 = loaded 3 = interactive (some data has been returned) 4 = complete status HTTP Status returned from server: 200 = OK XMLHttpRequest Properties responsetext String version of data returned from the server responsexml XML document of data returned from the server statustext Status text returned from server

AJAX: Another App 5-5.19 AJAX: Coding Involved index.

method="get"> <input type="text" size="20" autocomplete="off" id="completefield"

10 AJAX: Another App AJAX: Coding Involved index.jsp Page Auto-Complete Form <form name="autofillform" action="autocomplete" method="get"> <input type="text" size="20" autocomplete="off" id="completefield" name="id" onkeyup="docompletion();"> <input id="submit_btn" type="submit" value="lookup Employee"> </form>

11 AJAX: Coding Involved (2) AutoComplete Event Handler function docompletion() { if (completefield.value == "") { cleartable(); else { var url = "autocomplete?action=complete&id=" + escape(completefield.value); var req = initrequest(url); req.onreadystatechange = function() { if (req.readystate == 4) { if (req.status == 200) { parsemessages(req.responsexml); else if (req.status == 204){ cleartable(); ; req.open("get", url, true); req.send(null); AJAX: Coding Involved (3) AutoComplete XMLHttpRequest function initrequest(url) { if (window.xmlhttprequest) { return new XMLHttpRequest(); else if (window.activexobject) { isie = true; return new ActiveXObject("Microsoft.XMLHTTP");

12 AJAX: Coding Involved (4) AutoComplete Servlet doget() public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException {... String targetid = request.getparameter("id"); Iterator it = employees.keyset().iterator(); while (it.hasnext()) { EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if ((e.getfirstname().tolowercase().startswith(targetid) e.getlastname().tolowercase().startswith(targetid)) &&!targetid.equals("")) { sb.append("<employee>"); sb.append("<id>" + e.getid() + "</id>"); sb.append("<firstname>" + e.getfirstname() + "</firstname>"); sb.append("<lastname>" + e.getlastname() + "</lastname>"); sb.append("</employee>"); namesadded = true; // if // while if (namesadded) { response.setcontenttype("text/xml"); text/xml response.setheader("cache-control", "no-cache"); response.getwriter().write("<employees>" + sb.tostring() + "</employees>") else { response.setstatus(httpservletresponse.sc_no_content); // doget AJAX: Coding Involved (5) Processing the response function parsemessages(responsexml) { cleartable(); var employees = responsexml.getelementsbytagname("employees")[0]; if (employees.childnodes.length > 0) { completetable.setattribute("bordercolor", "black"); completetable.setattribute("border", "1"); else { cleartable(); for (loop = 0; loop < employees.childnodes.length; loop++) { var employee = employees.childnodes[loop]; var firstname = employee.getelementsbytagname("firstname")[0]; t tn ")[0] var lastname = employee.getelementsbytagname("lastname")[0]; var employeeid = employee.getelementsbytagname("id")[0]; appendemployee(firstname.childnodes[0].nodevalue,lastname.childnodes[0].nodevalue, employeeid.childnodes[0].nodevalue);

13 Q & A? 4.25 Resources W3Schools AJAX Tutorial AJAX Programming [Sang Shin] Ajax and XMLHttpRequest Tutorial Another Ajax Tutorial Ajax (programming) - Wikipedia Ajax Help and Tutorials CodeProject AJAX and PHP Building Responsive Web Applications - Chapter 1 AJAX and the Future of Web Applications. Free source code and programming help Ajax Resource Center Open Directory - Computers Programming Languages JavaScript AJAX Safari Books Online Deitel Developer Series AJAX, Rich Internet Applications, and Web Development for Programmers KFUPM-081 Dr. El-Alfy SWE 444 Internet & Web Application Development

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module7: Objectives/Outline Objectives Outline Understand the role of Learn how to use in your web applications Rich User Experience