Scribd
Upload
53 views

Introduction To: By: Abhishek Rajpurohit

The document provides an introduction to AJAX (Asynchronous JavaScript and XML). It discusses that AJAX is a development technique that allows for web page updates without reloading the entire page. This is achieved through asynchronous HTTP requests in the background. The document outlines the history and roots of AJAX, how it enables rich user interfaces, and some advantages and challenges of the approach. Components used in AJAX like XMLHttpRequest, JavaScript, and DOM manipulation are explained. Examples of AJAX uses like auto-completion and live data updates are also covered.

Uploaded by

Vaibhav Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
53 views

Introduction To: By: Abhishek Rajpurohit

The document provides an introduction to AJAX (Asynchronous JavaScript and XML). It discusses that AJAX is a development technique that allows for web page updates without reloading the entire page. This is achieved through asynchronous HTTP requests in the background. The document outlines the history and roots of AJAX, how it enables rich user interfaces, and some advantages and challenges of the approach. Components used in AJAX like XMLHttpRequest, JavaScript, and DOM manipulation are explained. Examples of AJAX uses like auto-completion and live data updates are also covered.

Uploaded by

Vaibhav Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

INTRODUCTION TO

AJAX

By:
ABHISHEK RAJPUROHIT
B.Tech. Final Yr. (CS)
12/10/2014

AJAX

JIET, Jodhpur

Introduction
Stands for Asynchronous JavaScript
and XML
Development technique for creating
interactive web applications
Not a new Technology but more of a
Pattern
12/10/2014

AJAX

Motivation NEEDs
WebPages can be UPDATED without
RELOADING.
Single piece of data can be loaded
without reloading of entire webpage
Multiple HTTP request/response can
be processed.
12/10/2014

AJAX

Roots of AJAX
Originally developed by Microsoft as
XMLHttp for IE 5.0.
Mozilla 1.0 had the first native
implementation of XMLHttpRequest in
2002.
Soon followed by Opera and others.

12/10/2014

AJAX

Roots of AJAX contd..


This technique was named AJAX in
2005 by James Garret.
W3C standardized XMLHTTPRequest
object API in 2006.

12/10/2014

AJAX

Role of AJAX in Web 2.0


Core features of Web 2.0

Web as a Platform
Collective Intelligence
Above the level of Single Device
Services , not packaged software
Rich User experiences

AJAX
Assists in User Interfaces
Less machine readable / linkable webpages
12/10/2014

AJAX

Uses of AJAX Paradigm


Real-Time Form Data Validation
Form data that require server-side
validation can be validated in a form
before the user submits it.

Auto completion
A specific portion of form data may be autocompleted as the user types.

12/10/2014

AJAX

Uses of AJAX Paradigm contd..


On Demand Loading

Based on a client event, an HTML page can fetch


more detailed information on data without refreshing
the page.

Refreshing data and server push:

HTML pages may poll data from a server for up-todate data such as scores, stock quotes, weather, or
application-specific data.

Sophisticated UI Controls

Controls such as tree controls, menus, and progress


bars may be provided without page refreshes.
12/10/2014

AJAX

Components
HTML (or XHTML) and CSS
Presenting information

Document Object Model


Dynamic display and interaction with the information

XMLHttpRequest object
Retrieving data ASYNCHRONOUSLY from the web
server.

Javascript
Binding everything together
12/10/2014

AJAX

Web Application and AJAX

12/10/2014

AJAX

10

AJAX Architecture
Create an XMLHttpRequest object
Make a HTTP request to the server
Register your callback function for
handling the response
Handle the response, check for return
status
Parse the response on success, display
result
12/10/2014

AJAX

11

Using XMLHttpRequest
Transferring data to Server
Open() to initialize connection to Server
Send() to send the actual Data
METHOD

PATH

Example

CONNECTION
TYPE

requester.open("POST", "/query.cgi,true)
requester.send("name=Bob&email=bob@e
xample.com");
12/10/2014

AJAX

12

What happens after sending data ?


XMLHttpRequest contacts the server
and retrieves the data
Can take indeterminate amount of time

Event Listener to determine when the


object has finished retrieving data
Specifically listen for changes in
readyState variable
12/10/2014

AJAX

13

Using XMLHttpRequest Step 1


Set up a function to handle the event when
the readyState is changed to 4

0
1
2
3
4

Uninitialised
open
sent
receiving
Completed

Example
requester.onreadystatechange = stateHandler;

12/10/2014

AJAX

14

Using XMLHttpRequest Step 2


Contd
Check whether the XMLHttpRequest object
successfully retrieved the data, or give an error
code
Example
if (requester.readyState == 4)
{
if (requester.status == 200)
{
success();
}
}
12/10/2014

AJAX

15

Advantages

Rich User Interface


Highly Responsive
Lower Bandwidth Usage
Separation of content, formatting,
and behavior

12/10/2014

AJAX

16

Problems
Breaking the back button
Browsers record static page visits
Cant see previous content of same page.
Invisible IFrames can invoke changes
that populate the history

Book marking a particular State


becomes difficult
JavaScript generates the page NOT
found server error
12/10/2014

AJAX

17

Problems Contd..
Increase in the code size on browser
Response time affected

Difficult to debug

Processing logic both in client and server

Viewable Source

Open to hackers or plagiarism

Server Load

Asynchronous request is a heavy operation

12/10/2014

AJAX

18

Ajax Libraries and Frameworks

dojo Toolkit
Google Web Toolkit
Microsoft Atlas
Prototype
Script.aculo.us
YUI
and a lot more ...

12/10/2014

AJAX

19

Who is using AJAX ?

12/10/2014

AJAX

20

Reading Material

Overview

Original Article from Adaptive path

http://www.sitepoint.com/article/remote-scripting-ajax.html
http://www.mousewhisperer.co.uk/ajax_page.html
http://www.clearnova.com/ajax/
http://www.webpasties.com/xmlHttpRequest/

AJAX based Applications

http://www.adaptivepath.com/publications/essays/archives/000385.php

Examples

http://en.wikipedia.org/wiki/AJAX
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754

http://www.ajaxreview.com/
http://ajaxblog.com/

Issues/Problems

http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html

12/10/2014

AJAX

21

Thank You

Questions ?

12/10/2014

AJAX

22

You might also like