call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
Inner core of Ajax
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
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…
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