Published on

AJAX Introduction
Lecture notes for TYBSc (Computer Science) and other similar courses

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Chap 1. Introduction to Ajax 1 1. Introduction to Ajax 1. What is Ajax? • The acronym Ajax stands for Asynchronous JavaScript and XML. • This term was coined by Jesse James Garrett in 2005. • Ajax is not a new programming language but a way of using existing technologies like JavaScript, PHP, XML, CSS and HTML. • Ajax is used for creating rich web applications. Ajax permits the exchange of data with a server and update parts of a web page without reloading or refreshing the whole page. • Web pages can be updated asynchronously by exchanging small amounts of data with the server, behind the scenes. A normal web page that does not use Ajax must reload the entire page if the page content is changed. • Ajax uses the XMLHttpRequest object to communicate with server-side scripts. • It can send and receive information in different formats such as text, XML, and HTML. • Some of the websites that use Ajax are: Google Maps, Gmail.com, Facebook, Google Suggest. • Components of Ajax are: HTML and CSS: These are used to style and present the document (how to display the data). In an Ajax application, the user interface can be modified interactively by CSS. XML: It provides a means of exchanging structured data between the web server and the client. The XMLHttpRequest object allows web programmers to retrieve data asynchronously from the web server (i.e., as a background activity). The data retrieved can be text or XML. The Document Object Model (DOM) presents the structure of the web page as a set of objects that can be manipulated by JavaScript. JavaScript: to make everything happen. Ajax applications are written in JavaScript. JavaScript is the glue that is used to hold the Ajax application together. 2. Write a note on applications of Ajax. Ajax applications are mostly executed on the user’s computer. Interactive web-based applications are built using Ajax. Some of the most popular applications of Ajax are: 1. Searching the Web in real time with live searches: With Ajax we get search results instantly as we enter the term we are searching for. E.g., in Google, as soon as we enter the term to search for, Ajax contacts Google behind the scenes and we see a drop-down menu that displays the common search terms from Google. 2. Getting answers with autocomplete: Autocomplete applications try to guess the word you are entering by getting a list of similar words from the server and displaying them. 3. Online Ajax dictionaries and ecommerce sites such as Amazon and NetFlix. 4. Chatting with friends: Ajax is a great choice for Web-based chat applications because it updates the Web page without refreshing the displayed page. 5. Getting instant login feedback: Suppose a user enters wrong username/password, he may get a page explaining the problem and then another page to login again. With Ajax, it is possible to get instant feedback on the login attempt. 6. Ajax-enabled pop-up menu: We can get data from the server as soon as the user needs it using Ajax. With Ajax we can set up an interactive menu system that responds to the user’s choices immediately. 7. Modifying Web pages on the fly: Ajax can update Web pages on the fly without page refreshes. For example, a news website can use Ajax techniques to update itself periodically by adding new article titles to the list on the Web page. 8. Google Maps: This is one of the most famous applications of Ajax. 9. Flickr: Photo management using Flickr 10. IM: Ajax instant message applications. 3. How does Ajax work? Ajax uses JavaScript, XML, HTML, and a server-side scripting language such as PHP. 1. The JavaScript code fetches data from the server as needed. 2. When more data is needed from the server, JavaScript uses the XMLHttpRequest object to send a request to the server behind the scenes – without causing a page refresh. 3. JavaScript does not have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and display it when the data appears. This is called asynchronous data retrieval.mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
  2. 2. 2 Introduction to Ajax 4. The data that comes back from the server can be XML or even plain text. The JavaScript code in the browser can read the data and use it immediately. 5. Thus, Ajax uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes. It also handles XML or other data sent back from the server. The complete process is shown below diagrammatically: 4. What is needed to make Ajax work? 1. Ajax uses the existing technologies such as JavaScript, XML, HTML, and PHP 2. We need JavaScript code to fetch data from the server. 3. An online server is needed to store the data. Data can be stored with XML. 4. We can put code on the server with which JavaScript can interact. We will use PHP for this purpose. PHP is a server-side scripting language. 5. What are the advantages and disadvantages of using Ajax? Advantages of Ajax: 1. Applications built with Ajax have more responsive interfaces. 2. Users experience changes that they feel are instantaneous. 3. Visitors do not have to wait for the entire page to be downloaded resent when they make new requests. Only part of the page changes and users can still interact with the web site. 4. There is also protection from errors. When an error is identified on a web page section, the rest of the page is unaffected and entered data is not lost. 5. Ajax use also reduces server traffic and bandwidth use because the entire information is not sent with every new request. Disadvantages of Ajax: 1. The main disadvantage is increased development time and costs, 2. If there is a very small change in the web page, it may not even be noticed by the user. 3. Ajax’s asynchronous nature can also cause conflict because it interferes with traditional ways of navigating the web. 4. For example, when parts of the page change, other parts of the page no longer correspond to the new page. This means bookmarks or web browser history will not be able to locate the page in an exact state. 5. Also, the ‘Back’ function will sometimes not work because the URL of the page hasn’t changed, even if sections of the page have. 6. All browsers do not support JavaScript or XMLHttpRequest. Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com