Web-Based Information Systems CMPUT 410 Ajax Dr Osmar

Web-Based Information Systems CMPUT 410: Ajax Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 1

Browser – Server Communication • Traditionally, in a web-based application, when an access to a data base is needed, a Form is presented to the user. When it is submitted, a GET or POST request is sent to the server which sends back a new page with the data. • The new page replaces the previous page (i. e. a whole new page replaces the whole previous page) • Ajax can change this picture by sending and receiving portions of a page without having to load or re-load a page. • What is Ajax and why do we need it in a web application? Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 2

Desktop app. vs. Web-based application: • • Simple Short turnaround time Flexible Works well with dynamic datasources Desktop application: • Responsive • Dynamic User Interface Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 3

Why AJAX? • Ajax is trying to make web pages feel more responsive and add dynamic UI/ interactivity elements to web applications. • Pages appear to load quickly because of the reduced initial requirement of data (Java. Script and actual data). • Upon each request for new information smaller chunks of data are transferred between the server and client, all without reloading the entire page. • Is platform and browser independent (but not surprisingly, supported differently) • Very easy to learn and use (We will see examples) Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 4

What is AJAX? • • • Ajax is shorthand for Asynchronous Java. Script + XML. Ajax is not a new language or new technology that works on its own but a combination of existing technologies Ajax is an implementation technique of multiple existing technologies, which include: – – – XHTML and CSS for generating standardized presentation Document Object Model for generating dynamic display and interaction XML and XSLT for data interchange and manipulation XMLHttp. Request for asynchronous data retrieval Java. Script for binging everything together Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 5

In a Nutshell • A Java. Script function is created to handle an event on the page when it is triggered. • The function creates an object which calls a program on the server and sends some data to it with the request, usually written in PHP, or any CGI; • The program executes and returns some XML or text data. • The completion of the program triggers another Java. Script function. This function, based on the data returned, can edit the page content using Java. Script and CSS. Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 6

Visually 1 - User action triggers Event associated with Javascript function 2 - Javascript function requests the server to perform a task 4 - Reception of results triggers another Javascript function Very dynamic web interface 5 - Javascript function makes changes to web document Dr. Osmar R. Zaïane, 2001 -2007 3 - Server returns results in and XML data or text Java. Script Web-Based Information Systems University of Alberta 7

Famous Examples • Google Suggest from Google Labs is a famous example http: //www. google. com/webhp? complete=1&hl=en • Google Maps is what made Ajax widely known (loading parts of map instead of new page) • Yahoo mail or Gmail are other typical examples of the power and usefulness of Ajax (loading e-mail messages one by one in same page) Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 8

The XMLHttp. Request Object Browser Web Page XMLHttp. Request Object Send request as GET or POST Server Receives Response In XML or Text Function: what to do after receiving the response Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 9

Keystone of AJAX is the XMLHttp. Request object • Different browsers use different methods to create the XMLHttp. Request object. IE 6+ • Internet Explorer uses an Active. XObject, var xml. Http=Active. XObject("Msxml 2. XMLHTTP"); Older IE var xml. Http=Active. XObject("Microsoft. XMLHTTP"); • While other browsers (firefox/safari/opera) use the built-in Java. Script object called XMLHttp. Request. var xml. Http=new XMLHttp. Request(); Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 10

XMLHttp. Request Properties • There are three important properties of the XMLHttp. Request object. • The onreadystatechange Property – The onreadystatechange property stores the function that will process the response from a server. • The ready. State Property – The ready. State property holds the status of the server's response. Each time the ready. State changes, the onreadystatechange function will be executed. State Description 0 • The response. Text Property & the response. XML Property The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete – The data sent back from the server can be retrieved with the response. Text property (in text) or the response. XML property in XML. Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 12

Sending a Request to the Server To send a request to the server we use the open() and send() methods. xml. Http. open("GET", "app. php", true); true for asynchronous Can be GET or POST xml. Http. send(null); Dr. Osmar R. Zaïane, 2001 -2007 URL of application to run on server Web-Based Information Systems University of Alberta 13

The Whole Sequence var xml. Http=get. Xml. Http. Object(); if (xml. Http==null) { alert ("Browser does not support Ajax"); return } var url=“some. Url. php" xml. Http. onreadystatechange=process. Response. Function; xml. Http. open("GET", url, true); xml. Http. send(null); function process. Response. Function() { if (xml. Http. ready. State==4 || xml. Http. ready. State=="complete") { var my. Response = xml. Http. response. Text; } } That’s it! Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 14

Some cons • Some browsers don’t have full XML support to run AJAX applications • Unexpected behavior of back button and bookmarks since Ajax downloads new dynamic portions of a page that were not there initially. • Search Engine may not index the portions downloaded by Ajax • Response-time concerns due to additional network access and non determinism of network. But the pros outweigh the cons. Dr. Osmar R. Zaïane, 2001 -2007 Web-Based Information Systems University of Alberta 15