1 / 15

Understanding AJAX in Web-Based Information Systems: Dynamic Interaction and Efficiency

AJAX (Asynchronous JavaScript and XML) revolutionizes web applications by enabling asynchronous data exchange without full page reloads. Traditionally, users submit forms, triggering a server request that returns a new page. AJAX improves this process by allowing portions of a webpage to update dynamically, enhancing user experience and responsiveness. It combines existing technologies like JavaScript, XML, and the Document Object Model to create interactive interfaces that react quickly to user actions. Popular applications like Google Maps and Gmail showcase AJAX's ability to deliver efficient, seamless interactions in web-based information systems.

dawson
Télécharger la présentation

Understanding AJAX in Web-Based Information Systems: Dynamic Interaction and Efficiency

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web-Based Information Systems CMPUT 410: Ajax Web-Based Information Systems

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. <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

  12. 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

  13. 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

  14. 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

  15. 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

More Related