SlideShare a Scribd company logo

Ajax & Reverse Ajax Presenation

•
•
R
Rishabh Garg

Introduction to AJAX, Reverse Ajax for beginners. A presentation on Ajax, Reverse Ajax suitable for college level presentations and seminars.Contains 30 slides with example

Related slideshows

ShEx by Example
ShEx by ExampleShEx by Example
ShEx by Example
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
What Wikidata teaches us about knowledge engineering
What Wikidata teaches us about knowledge engineeringWhat Wikidata teaches us about knowledge engineering
What Wikidata teaches us about knowledge engineering
 
1 of 30
Download to read offline
SEMINAR LAB TOPIC: AJAX
INTRODUCTION AJAX : Asynchronous JavaScript And XML AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.
BACK THEN: Click Search
AND YOU GET THIS:
THESE DAYS :
THE MAGIC SPELL BEHIND THIS IS : AJAX
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 
ORDER OF DEVELOPMENTS Internet Explorer introduces the concept of IFrame element in 1996.(a technique that helps in loading the contents of a web page.) In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s Remote Scripting’ as a replacement to the older techniques. A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveX control, in IE 5. 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. Finally, in the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which includes the specification for the object (XHR) and makes it an official web standard.
WHY AJAX IS IMPORTANT ? AJAX enables a much better user experience for Web sites and applications. Developers can now provide user interfaces that are nearly as responsive and rich as more traditional Windows Forms applications while taking advantage of the Web's innate ease of deployment and heterogeneous, cross-platform nature. These benefits have been shown to dramatically reduce software maintenance costs and increase its reach. You can use AJAX to load specific portions of a page that need to be changed. It further reduces network traffic.
THE CORE COMPONENTS: HTML & CSS - for presenting. JavaScript - for local processing. Document Object Model (DOM) – to access data inside the page or to access elements of an XML file on the server. XMLHttpRequest (XHR) object – to read/send data to the server asynchronously.
THE PROCESS CYCLE
A LITTLE ABOUT XHR OBJECT
CONT.…
A FEW STATUS VALUES Status Description 200 OK 400 Bad Request 404 File Not Found 500 Internal Server Error 505 HTTP version not supported
THE ONREADYSTATECHANGE EVENT Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found
HOW AJAX WORKS ?
REVERSE AJAX •Reverse Ajax is essentially a concept for sending data from the server to the client. •It can be simulated with a repeated Ajax request from client – simple polling, piggyback polling. •Comet – umbrella term for various techniques for Reverse Ajax •Coined by Alex Russel in 2006. •It can be simulated with a long-held Ajax request from client. •Server can send events to the client without the client specifically requesting it. •Also known as Ajax Push, Two-way-web, HTTP Streaming, and HTTP server push, •First implementations appeared in 2000 with Pushlets and LightStreamer media server
REVERSE AJAX – SIMPLE POLLING
REVERSE AJAX – SIMPLE POLLING •Basic Ajax with regular interval requests (every few seconds). •To get the server events as soon as possible, the polling interval (time between requests) must be as low as possible. •If interval is reduced, the client will issue many more requests, many of which won't return any useful data, and will consume bandwidth and processing resources for nothing. •Advantages: It's really easy to implement and does not require any special features on the server side. It also works in all browsers. •Disadvantages: This method is rarely employed because it does not scale at all. Example: 100 clients each issuing polling requests for 2 seconds, where 30% of the requests returns no data.
REVERSE AJAX – PIGGYBACK POLLING
REVERSE AJAX – PIGGYBACK POLLING •Piggyback polling removes all redundant requests (which return no data) •There is no interval •Requests are sent when the client needs to send a request to the server •The difference lies in the response, which is split into two parts: i. the response for the requested data ii. server events, if any •Advantages: Less resource consumption. Works in all browsers, does not require special features on the server side. •Disadvantages: You have no clue when the events accumulated on the server side will be delivered to the client.
REVERSE AJAX – COMET
REVERSE AJAX – COMET •Request is sent to the server and kept alive for a long time, until a time-out or a server event occurs. •When the request is completed, another long-lived Ajax request is sent to wait for other server events. •With Comet, web servers can send the data to the client without having to explicitly request it. •The server can push events on the clients by immediately committing (completing) the responses, or it can accumulate them and send bursts. •Special features are required on the server side to handle all of these long-lived requests (Servlet 3.0 or Websockets) •Implementations of Comet can be separated into two types: those using streaming mode, and those using long polling.
LET’S GET TO SOME WORK  EXAMPLE…
AJAX CODE
AJAX CODE WITH OUTPUT
XML FILE
 BENEFITS OF USING AJAX  Helps to build fast, dynamic websites. Improves sharing of resources : it facilitates to use the power of all the client computers rather than just a unique server and network. 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.
 A FEW DRAWBACKS  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 "no script" tag. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines. The asynchronous mode may change the page with delays (when the processing on the server takes more time), this may be disturbing. The back button may be deactivated.
THANK YOU! Any Questions?

More Related Content

Ajax & Reverse Ajax Presenation

  • 2. INTRODUCTION AJAX : Asynchronous JavaScript And XML AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.
  • 4. AND YOU GET THIS:
  • 6. THE MAGIC SPELL BEHIND THIS IS : AJAX
  • 7. 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 
  • 8. ORDER OF DEVELOPMENTS Internet Explorer introduces the concept of IFrame element in 1996.(a technique that helps in loading the contents of a web page.) In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s Remote Scripting’ as a replacement to the older techniques. A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveX control, in IE 5. 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. Finally, in the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which includes the specification for the object (XHR) and makes it an official web standard.
  • 9. WHY AJAX IS IMPORTANT ? AJAX enables a much better user experience for Web sites and applications. Developers can now provide user interfaces that are nearly as responsive and rich as more traditional Windows Forms applications while taking advantage of the Web's innate ease of deployment and heterogeneous, cross-platform nature. These benefits have been shown to dramatically reduce software maintenance costs and increase its reach. You can use AJAX to load specific portions of a page that need to be changed. It further reduces network traffic.
  • 10. THE CORE COMPONENTS: HTML & CSS - for presenting. JavaScript - for local processing. Document Object Model (DOM) – to access data inside the page or to access elements of an XML file on the server. XMLHttpRequest (XHR) object – to read/send data to the server asynchronously.
  • 12. A LITTLE ABOUT XHR OBJECT
  • 14. A FEW STATUS VALUES Status Description 200 OK 400 Bad Request 404 File Not Found 500 Internal Server Error 505 HTTP version not supported
  • 15. THE ONREADYSTATECHANGE EVENT Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found
  • 17. REVERSE AJAX •Reverse Ajax is essentially a concept for sending data from the server to the client. •It can be simulated with a repeated Ajax request from client – simple polling, piggyback polling. •Comet – umbrella term for various techniques for Reverse Ajax •Coined by Alex Russel in 2006. •It can be simulated with a long-held Ajax request from client. •Server can send events to the client without the client specifically requesting it. •Also known as Ajax Push, Two-way-web, HTTP Streaming, and HTTP server push, •First implementations appeared in 2000 with Pushlets and LightStreamer media server
  • 18. REVERSE AJAX – SIMPLE POLLING
  • 19. REVERSE AJAX – SIMPLE POLLING •Basic Ajax with regular interval requests (every few seconds). •To get the server events as soon as possible, the polling interval (time between requests) must be as low as possible. •If interval is reduced, the client will issue many more requests, many of which won't return any useful data, and will consume bandwidth and processing resources for nothing. •Advantages: It's really easy to implement and does not require any special features on the server side. It also works in all browsers. •Disadvantages: This method is rarely employed because it does not scale at all. Example: 100 clients each issuing polling requests for 2 seconds, where 30% of the requests returns no data.
  • 20. REVERSE AJAX – PIGGYBACK POLLING
  • 21. REVERSE AJAX – PIGGYBACK POLLING •Piggyback polling removes all redundant requests (which return no data) •There is no interval •Requests are sent when the client needs to send a request to the server •The difference lies in the response, which is split into two parts: i. the response for the requested data ii. server events, if any •Advantages: Less resource consumption. Works in all browsers, does not require special features on the server side. •Disadvantages: You have no clue when the events accumulated on the server side will be delivered to the client.
  • 23. REVERSE AJAX – COMET •Request is sent to the server and kept alive for a long time, until a time-out or a server event occurs. •When the request is completed, another long-lived Ajax request is sent to wait for other server events. •With Comet, web servers can send the data to the client without having to explicitly request it. •The server can push events on the clients by immediately committing (completing) the responses, or it can accumulate them and send bursts. •Special features are required on the server side to handle all of these long-lived requests (Servlet 3.0 or Websockets) •Implementations of Comet can be separated into two types: those using streaming mode, and those using long polling.
  • 24. LET’S GET TO SOME WORK  EXAMPLE…
  • 26. AJAX CODE WITH OUTPUT
  • 28.  BENEFITS OF USING AJAX  Helps to build fast, dynamic websites. Improves sharing of resources : it facilitates to use the power of all the client computers rather than just a unique server and network. 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.
  • 29.  A FEW DRAWBACKS  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 "no script" tag. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines. The asynchronous mode may change the page with delays (when the processing on the server takes more time), this may be disturbing. The back button may be deactivated.