Tutorial on AJAX Anubhav Kale akale 1 AT

Tutorial on AJAX Anubhav Kale (akale 1 AT cs DOT umbc DOT edu) 9/7/2021 e. Biquity 1

Overview o o o Introduction Motivation Remote Scripting Example Issues Applications 9/7/2021 e. Biquity 2

Introduction o o o Stands for “Asynchronous Java. Script and XML “ Development technique for creating interactive web applications Not a new Technology but more of a Pattern 9/7/2021 e. Biquity 3

Motivation for AJAX o o o Web. Pages always RELOAD and never get UPDATED Users wait for the entire page to load even if a single piece of data is needed Single request/response restrictions 9/7/2021 e. Biquity 4

Components n HTML (or XHTML) and CSS o n Document Object Model o n Retrieving data ASYNCHRONOUSLY from the web server. Javascript o 9/7/2021 Dynamic display and interaction with the information XMLHttp. Request object o n Presenting information Binding everything together e. Biquity 5

Uses of AJAX Paradigm o Real-Time Form Data Validation n o Auto completion n o A specific portion of form data may be auto-completed as the user types. Master Details Operations n o Form data that require server-side validation can be validated in a form “before” the user submits it. Based on a client event, an HTML page can fetch more detailed information on data without refreshing the page. Sophisticated UI Controls n 9/7/2021 Controls such as tree controls, menus, and progress bars may be provided without page refreshes. e. Biquity 6

Web Application and AJAX 9/7/2021 e. Biquity 7

Request Processing 9/7/2021 e. Biquity 8

Asynchronous processing XMLHttp. Request o o Allows to kick off an HTTP request in background Callbacks kick back into Javascript Code Supported in all standard browsers Similar to “image” object n 9/7/2021 Dynamically change the URL of the image source without using a page refresh e. Biquity 9

Example using XMLHttp. Request – Step 1 o Create Object n o Worry about Browser Specific Creation ! Example n n 9/7/2021 var requester = new XMLHttp. Request(); var requester = new Active. XObject("Microsoft. XMLHTTP"); e. Biquity 10

Using XMLHttp. Request – Step 2 o Transferring data to Server n n o Open() to initialize connection to Server Send() to send the actual Data Example n n 9/7/2021 requester. open("POST", "/query. cgi") requester. send("name=Bob&email=bob @example. com"); e. Biquity 11

What happens after sending data ? o XMLHttp. Request contacts the server and retrieves the data n o Can take indeterminate amount of time Event Listener to determine when the object has finished retrieving data n 9/7/2021 Specifically listen for changes in “ready. State” variable e. Biquity 12

Using XMLHttp. Request – Step 3 o Set up a function to handle the event when the ready. State is changed to 4 n n n o 0 1 2 3 4 – – – Uninitialised Loading Loaded Interactive Completed Example n 9/7/2021 requester. onreadystatechange = state. Handler; e. Biquity 13

Using XMLHttp. Request – Step 3 Contd o o Check whether the XMLHttp. Request object successfully retrieved the data, or was given an error code Example n if (requester. ready. State == 4) { if (requester. status == 200) { success(); } } 9/7/2021 e. Biquity 14

Using XMLHttp. Request – Step 4 o Parse and display data n response. XML o n response. Text o o DOM-structured object One complete string Example n var name. Node = requester. response. XML. get. Elements. By. Tag. Name("na me")[0]; var name. Text. Node = name. Node. child. Nodes[0]; var name = name. Text. Node. node. Value; 9/7/2021 e. Biquity 15

Interaction between Components 9/7/2021 e. Biquity 16

Problems o Breaking the “back” button n n o Changing parts of the page unexpectedly n o Browsers record static page visits Invisible IFrames can invoke changes that populate the history Should only ever occur in narrowly defined places Bookmarking a particular “State” becomes difficult n 9/7/2021 Javascript generates the page NOT server e. Biquity 17

Problems Contd o Increase in the code size on browser n o Difficult to debug n o Processing logic both in client and server Viewable Source n o Response time affected Open to hackers or plagiarism Server Load n 9/7/2021 Asynchronous request is a “heavy” operation e. Biquity 18

Role of AJAX in Web 2. 0 o Core features of Web 2. 0 n n n o Web as a Platform Collective Intelligence Above the level of Single Device Services , not packaged software Rich User experiences AJAX n n 9/7/2021 Assists in User Interfaces Less machine readable / linkable webpages e. Biquity 19

AJAX as of today o Frameworks n Client-side o o o n Server-side o o o n JSON (Javascript Object Notation) Struts – Layout Comfort. ASP. NET Many more at o o DOGO Back. Base AJForm http: //www. ajaxpatterns. org/AJAXFramework Browsers n IE , Mozilla, Galeon, Firefox 9/7/2021 e. Biquity 20

Who is using AJAX ? 9/7/2021 e. Biquity 21

Reading Material o Overview n n o Original Article from Adaptive path n o n n n http: //www. sitepoint. com/article/remote-scripting-ajax. html http: //www. mousewhisperer. co. uk/ajax_page. html http: //www. clearnova. com/ajax/ http: //www. webpasties. com/xml. Http. Request/ AJAX based Applications n n o http: //www. adaptivepath. com/publications/essays/archives/000385. php Examples n o http: //en. wikipedia. org/wiki/AJAX http: //java. sun. com/developer/technical. Articles/J 2 EE/AJAX/index. html? cid=59754 http: //www. ajaxreview. com/ http: //ajaxblog. com/ Issues/Problems n 9/7/2021 http: //sourcelabs. com/ajb/archives/2005/05/ajax_mistakes. html e. Biquity 22

Thank You o Questions ? 9/7/2021 e. Biquity 23