150 likes | 166 Views
Learn how AJAX enhances web responsiveness, dynamic UI, and interactivity without full-page reloads. Explore the XMLHttpRequest object and its implementation alongside existing technologies like JavaScript and XML.
E N D
Web-Based Information Systems CMPUT 410: Ajax Web-Based Information Systems
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? Web-Based Information Systems
Desktop app. vs. Web-based app. Web-based application: • Simple • Short turnaround time • Flexible • Works well with dynamic datasources Desktop application: • Responsive • Dynamic User Interface Web-Based Information Systems
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 (JavaScript 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) Web-Based Information Systems
What is AJAX? • Ajax is shorthand for Asynchronous JavaScript + 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 • XMLHttpRequest for asynchronous data retrieval • JavaScript for binging everything together Web-Based Information Systems
In a Nutshell • A JavaScript 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 JavaScript function. This function, based on the data returned, can edit the page content using JavaScript and CSS. Web-Based Information Systems
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 3- Server returns results in and XML data or text 5- Javascript function makes changes to web document JavaScript Very dynamic web interface Web-Based Information Systems
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) Web-Based Information Systems
The XMLHttpRequest Object Browser Web Page XMLHttpRequest Object Send request as GET or POST Server Receives Response In XML or Text Function: what to do after receiving the response Web-Based Information Systems
Keystone of AJAX is the XMLHttpRequest object • Different browsers use different methods to create the XMLHttpRequest object. • Internet Explorer uses an ActiveXObject, • While other browsers (firefox/safari/opera) use the built-in JavaScript object called XMLHttpRequest. IE6+ Older IE var xmlHttp=ActiveXObject("Msxml2.XMLHTTP"); var xmlHttp=ActiveXObject("Microsoft.XMLHTTP"); var xmlHttp=new XMLHttpRequest(); Web-Based Information Systems
<script type="text/javascript">function getXmlHttpObject() { var xmlHttp =null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { try { // Internet Explorer IE6+ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {// Internet Explorer IE5.5 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }</script> var xmlHttp=getXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support Ajax"); return } Web-Based Information Systems
State Description 0 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 XMLHttpRequest Properties • There are three important properties of the XMLHttpRequest object. • TheonreadystatechangeProperty • The onreadystatechange property stores the function that will process the response from a server. • ThereadyStateProperty • The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed. • The responseText Property & the responseXML Property • The data sent back from the server can be retrieved with the responseText property (in text) or the responseXML property in XML. Web-Based Information Systems
Sending a Request to the Server To send a request to the server we use the open() and send() methods. xmlHttp.open("GET", "app.php",true); true for asynchronous Can be GET or POST URL of application to run on server xmlHttp.send(null); Web-Based Information Systems
The Whole Sequence var xmlHttp=getXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support Ajax"); return } var url=“someUrl.php" xmlHttp.onreadystatechange=processResponseFunction; xmlHttp.open("GET",url,true); xmlHttp.send(null); function processResponseFunction() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { var myResponse = xmlHttp.responseText; } } That’s it! Web-Based Information Systems
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. Web-Based Information Systems