ajax & reverse ajax presenation

Click here to load reader

Post on 08-Feb-2017

768 views

Category:

Technology

4 download

Embed Size (px)

TRANSCRIPT

  • SEMINAR LABTOPIC: 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 thathelps in loading the contents of a web page.)

    In the year 1998, Microsoft introduces another technique, called Microsofts RemoteScripting as a replacement to the older techniques.

    A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveXcontrol, in IE 5.

    The term AJAX is coined on February 18, 2005, by Jesse James Garret in a shortessay 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 richas more traditional Windows Forms applications while taking advantage of theWeb's innate ease of deployment and heterogeneous, cross-platform nature.

    These benefits have been shown to dramatically reduce software maintenance costsand increase its reach. You can use AJAX to load specific portions of a page thatneed 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 initialized1: server connection established2: request received3: processing request4: 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.

  • LETS 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?