This presentation will guide you about * AJAX, * flow of its Inner core and * its possible uses

1. By: Muhammad Junaid
What is AjaxWhat is Ajax
 Asynchronous Java scripting
 Can also be used in synchronous mode
 Also sometimes called as Remote Scripting
 Integrated seamlessly with the browser
Advantage: High Performance Web Based Applications

2. By: Muhammad Junaid
Ajax- Under theAjax- Under the
Hood…Hood…
Continued…

3. By: Muhammad Junaid
Ajax- Under the HoodAjax- Under the Hood
 Uses JavaScript Engine
 Uses http/https protocol
 Uses http/https request / response
mechanism
 Runs in the address space of Browser
 Get the data, fires a http request
 Get and read the server response
 Render the required form area

4. By: Muhammad Junaid
Ajax- Possible UsesAjax- Possible Uses
 Real time data validation
 Updating form data without the refreshing /
redrawing the page
 Background request – response
 Update page at specific intervals e.g. Cricket
Score board
 Possibilities are limitless
 Browser based desktop applications

5. By: Muhammad Junaid
Ajax- BrowserAjax- Browser
SupportSupport
 Popular browser like FireFox, Mozilla, Safari,
Netscape and IE supports Ajax

6. By: Muhammad Junaid
Ajax- Who are using?Ajax- Who are using?
 Gmail
 Facebook
 Google maps
 Web based Map applications
 Web based Business applications
 And many more…

7. By: Muhammad Junaid
Ajax- In ActionAjax- In Action
 Conventional Approach
 When user requests for a page
 Browser re-renders the complete page
 With Ajax Implemented
 Browser renders only the selection list

8. By: Muhammad Junaid
Ajax- The Inner CoreAjax- The Inner Core
 At the core of AJAX is xmlHttpRequest Object
 This object is used
 To send a http request
 Get the server response
 Like other objects this object too have its
methods and properties
Continued…

9. By: Muhammad Junaid
Ajax- The Inner CoreAjax- The Inner Core

10. By: Muhammad Junaid
xmlHttpRequest objectxmlHttpRequest object
Method Description
abort() Stops/aborts the current request
send() Transmit the data/request
open() Opens a connection to the giver URL
getAllResponseHeaders() Returns the complete set of Headers
getResponseHeader() Returns the specified header value
Common xmlHttpRequest object Methods
Continued…

11. By: Muhammad Junaid
xmlHttpRequest objectxmlHttpRequest object
Properties Description
onreadystatechanged Event handler for and event that fires
at every state change
readyState Object’s current state (integer)
0=un-initialized
1=loading
2=loaded
3=interactive
4=complete
responseText String version of data returned by
server
Common xmlHttpRequest object Properties
Continued…

12. By: Muhammad Junaid
responseXML DOM compatible document object of
data returned by server
status Numeric code returned by the server
statusText String message related to status code
Common xmlHttpRequest object Properties
xmlHttpRequest objectxmlHttpRequest object

13. By: Muhammad Junaid
Ajax- The FlowAjax- The Flow
 Create the XMLHttpRequest Object
 Open the connection to server
 object.open(method,url,sync-flag);
 Register the function for handling input
 object.onreadystatechange=function;
 Send the data/request to the server
 object.send();
 Process the data
 Get server data
 Parse if required
 Update the DOM (Display the result)

14. By: Muhammad Junaid
Brief OverviewBrief Overview
 Conventional Approach
 Request
 Response
 Refresh
 AJAX Approach
 Request
 Response
 Refresh DOM
 Web Application can behave like a native
application

15. By: Muhammad Junaid
Ajax- ApplicationAjax- Application
ModesModes
 Hybrid application
 Application starts up like a normal web
application
 Uses AJAX some where in the successive web
pages
e.g. Data reflection, Display morphing, Page
rearrangement
 Fully Ajax application
 Application starts with AJAX
 Application uses AJAX through its life cycle
e.g. An editor