![CREATE XMLHTTPREQUEST OBJECT
request.open("GET", "message.html", true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if(request.status == 200)
{
/*in the case of string data*/
var str = request.responseText;
document.getElementById(‘tag id’).innerHTML = str ;
/*in the case of XML document*/
var response = request.responseXML;
var doc = response.documentElement;
var data1 = doc.getElementByTagName(‘tagname’)[0].firstchild.nodeValue;
}
}
}
request.send(null);
Page 28](https://image.slidesharecdn.com/ajax-120903114105-phpapp01/85/Ajax-28-320.jpg)
Ajax
- 1. AJAX AN INTRODUCTION Page 1
- 2. AGENDA • WHAT IS AJAX? • HISTORY • GOOGLE SUGGEST • SIMPLE PROCESSING • COMPONENTS • XHTML,CSS • DOM • XML • HTTP REQUEST OBJECT • JAVA SCRIPT • PROCESS CYCLE • AJAX ADVANTAGES AND DISADVANTAGES • EXAMPLE Page 2
- 3. BACK THEN… Click Search Page 3
- 4. AND YOU GET THIS … Page 4
- 5. THESE DAYS.. Page 5
- 6. THE MAGIC SPELL BEHIND THIS IS AJAX (Asynchronous JavaScript and XML) Page 6
- 7. SO WHAT IS AJAX ??? A programming language – no… A new technology – not exactly… So what else ? It is a methodology on using several web technologies together, in an effort to close the gap between the usability and interactivity of a desktop application and the ever demanding web application Page 7
- 8. Asynchronous Javascript and XML is a client side techniques that combines a set of known technologies in order to create faster and more user friendly web pages. AJAX provides an ability to communicate with the server asynchronously. ASYNCHRONOUS??? We can send a request to server and continue user interaction with the user with out waiting for server response. Once the response arrives, a designated area in UI will update itself and reflect the response information. Whole page need not be reloaded Page 8
- 9. HISTORY OF AJAX Starts with web pages Static web pages Static html page is loaded No interaction with user Dynamic web pages Html page is generated dynamically Interaction with user Becomes slower as functionality increases Speed becomes intolerable, so AJAX has been born Page 9
- 10. The term AJAX is coined on February 18, 2005, by Jesse James Garret in a short essay published a few days after Google released its Maps application. In the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which made AJAX an official web standard. Page 10
- 11. GOOGLE SUGGEST Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions. Page 11
- 12. SİMPLE PROCESSİNG • AJAX is based on Javascript, and the main functionality is to access the web server inside the Javascript code. When user The received We access to the initiates an information is server using event, a javascript shown to the user special objects; we function is called by means of the send data and which accesses Javascript’s retrieve data. server using the functions. objects. Page 12
- 13. COMPONENTS OF AJAX • Ajax incorporates several technologies, each flourishing in its own right, coming together in powerful new ways. – standards-based presentation using XHTML, CSS – dynamic display and interaction using DOM – data interchange and manipulation using XML – asynchronous data retrieval using XMLHttpRequest – and JavaScript binding everything together. Page 13
- 14. XHTML, CSS • XHTML stands for EXtensible HyperText Markup Language – It consists of all the elements in HTML 4.01 combined with the syntax of XML • CSS stands for Cascading Style Sheets – It is used to describe the presentation of a document written in HTML or XML. Page 14
- 15. DOM • Document Object Model for HTML DOM provides a standard set of objects for representing HTML and XML documents, and a standard interface for accessing and manipulating them. Essentially, it connects web pages to scripts or programming languages. It defines an HTML document as a collection of objects that have properties and methods and that can respond to events Page 15
- 16. XML • EXtensible Markup Language XML was designed to describe data and to focus on what data is (unlike HTML which was designed to display data and to focus on how data looks) It is a general-purpose markup language for creating special-purpose markup languages that carry data. Page 16
- 17. XMLHttpRequest XmlHttp The kernel of Ajax Request Object The XMLHttpRequest object allows client-side JavaScript to make HTTP requests (both GET and POST) to the server without reloading pages in the browser. This JavaScript object was originally introduced in Internet Explorer 5 by Microsoft and it is the enabling technology that allows asynchronous requests Page 17
- 18. XMLHttpRequest • By performing screen updates on the client, you have a great amount of flexibility when it comes to creating your Web site : Eliminate page refreshes every time there is user input Edit data directly in place, without requiring the user to navigate to a new page to edit the data Increase site performance by reducing the amount of data downloaded from the server • The possibilities are endless! Page 18
- 19. JavaScript JavaScript is one of the world's most popular programming languages Its popularity is due entirely to its role as the scripting language of the WWW along with VBScript JavaScript has a syntax similar to Java but: It is not a real programming language (it is script) It was developed at Netscape and not Sun. It was originally called LiveScript Page 19
- 20. JavaScript • JavaScript binds all the mentioned technologies together to create the Ajax “pattern”. When a user clicks a button, you can use JavaScript and XHTML to immediately update the UI Spawn an asynchronous request to the server using the XMLHttpRequest object via JavaScript to perform an update or query a database. When the request returns as XML, you can then use JavaScript, CSS, DOM to update your UI accordingly without refreshing the entire page. Most importantly, users don't even know your code is communicating with the server: the Web site feels like it's instantly responding ("desktop-like" usability) Page 20
- 21. THE PROCESS CYCLE Page 21
- 22. BENEFITS OF USING AJAX • Helps to build fast, dynamic websites. • Ajax allows to perform processing on client computer (in JavaScript) with data taken from the server thereby reducing server load by moving a part of server functionality to client side. • Ajax can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus etc. This bridges the gap between desktop and web applications. • Saves bandwidth by only transmitting new information • Creates possibility of entirely new types of user interfaces not possible in traditional model. Page 22
- 23. AJAX DISADVANTAGES Poor compatibility with very old or obscure browsers, and many mobile devices. Limited Capabilities like multimedia, interaction with web-cams and printers, local data storage and real time graphics. Not everyone have JavaScript enabled. If JavaScript is not activated, Ajax can't works. The user must be asked to set JavaScript from within options of the browser, with the "noscript" tag. Too much code makes the browser slow. Page 23
- 24. • The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this doesn not hold. • Possible network latency problems. People should be given feedback about the processing. • Does not run on all browsers. Page 24
- 25. XMLHTTPREQUEST OBJECT Important Methods Open(“method”,”url”,boolean) to send a request to server method - GET or POST url - address of the target file boolean - to denote whether the request is synchronous or asynchronous. If true, asynchronous. Send(content) to send data to server for processing content - may be string or DOM type of document. Page 25
- 26. IMPORTANT PROPERTIES readystate - used to identify the state of the request. Possible values 0-4. onreadystatechange - event handler for an event that fires at every state change. status -Numeric code return by server.Eg.404,200 responseText - the string data returned by the server process. responseXML - the DOM type of document returned by the server process. Page 26
- 27. CREATE XMLHTTPREQUEST OBJECT var request; if (window.ActiveXObject) { /*supperted in IE*/ request = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { /* supported in Safari and Mozilla*/ request = new XMLHttpRequest(); } else { request = null; } Page 27
- 28. CREATE XMLHTTPREQUEST OBJECT request.open("GET", "message.html", true); request.onreadystatechange = function() { if (request.readyState == 4) { if(request.status == 200) { /*in the case of string data*/ var str = request.responseText; document.getElementById(‘tag id’).innerHTML = str ; /*in the case of XML document*/ var response = request.responseXML; var doc = response.documentElement; var data1 = doc.getElementByTagName(‘tagname’)[0].firstchild.nodeValue; } } } request.send(null); Page 28
- 29. JAVASCRIPT LIBRARY A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX. Some popular javascript libraries are jQuery, MooTools, Prototype, Dojo. With the help of the javascript library functions dynamic web page development will be easier. Page 29
- 30. THANK YOU… Page 30