1

A S Y N C H R O N O U S
J A V A S C R I P T
A N D X M L

A J A X
 2

What is AJAX?
AJAX stands for Asynchronous JavaScript
and XML. AJAX is a new technique for
creating better, faster, and more
interactive web applications with the help
of XML, HTML, CSS, and Java Script.

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
 3

How it works?
 4

AJAX TECHNOLOGIES
AJAX cannot work independently.
It is used in combination with
other technologies to create
interactive webpages.
 5

AJAX TECHNOLOGIES
JavaScript DOM CSS XMLHttpRequest
Loosely typed scripting API for accessing and Allows for a clear JavaScript object that
language. manipulating structured separation of the performs asynchronous
documents. presentation style from interaction with the
the content and may server.
be changed
programmatically by
JavaScript.
JavaScript function is Represents the structure
called when an event of XML and HTML
occurs in a page. documents.
Glue for the whole AJAX
operation.
 6

AJAX EXAMPLE
Google Maps
A user can drag an entire map by using the mouse,
rather than clicking on a button.
http://maps.google.com/
 7

AJAX EXAMPLE
Google Suggest
As you type, Google offers suggestions. Use the
arrow keys to navigate the results.
http://www.google.com/webhp?complete=1&hl=en
 8

AJAX EXAMPLE
Gmail
Gmail is a webmail built on the idea that emails
can be more intuitive, efficient, and useful.
http://gmail.com/
 9

AJAX- BROWSER SUPPORT

All the available browsers cannot support
AJAX. Here is a list of major browsers that
support AJAX.

• Mozilla Firefox 1.0 and above.

• Netscape version 7.1 and above.
• Apple Safari 1.2 and above.
• Microsoft Internet Explorer 5 and above.
• Konqueror.
• Opera 7.6 and above object.
 10

When you write your next application,

do consider the browsers that do not
support AJAX.

NOTE: When we say that a browser does not

support AJAX, it simply means that the
browser does not support the creation of
Javascript object – XMLHttpRequest object.
 11

XMLHttpRequest Object
The XMLHttpRequest object is the key
to AJAX. XMLHttpRequest (XHR) is an API that
can be used by JavaScript, JScript, VBScript,
and other web browser scripting languages to
transfer and manipulate XML data to and from a
webserver using HTTP, establishing an
independent connection channel between a
webpage's Client-Side and Server-Side.
 12

All modern browsers have a built-in XMLHttpRequest

Object. Here is the syntax for creating an
XMLHttpRequest object.

variable = new XMLHttpRequest ();

Not all browsers support the XMLHttpRequest object,

in that case, the user needs to built an
ActiveXObject

variable = new
13
14
 15

XMLHttpRequest object methods

Method Description
New XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information

Open(method,url,async,user,psw) Specifies the request

method: the request type GET or POST

url: the file location
async: true(asynchronous) or false
(synchronous)
user: optional user name
psw: optional password
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header
to be sent
 16

XMLHttpRequest object Properties

Property Description
onreadystatechange Defines a function to be called when
the readyState property changes
readyState Holds the status of the
XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is
ready
responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number of a

request
200: “OK”
403: “Forbidden”
404: “Not found”
 17

Status Text
1xx: Information
 18

2xx: Successful
 19

3xx: Redirection
 20

4xx: Client Error

 21

5xx: Server Error

 22

AJAX – Send a Request to a Server

To send a request to a server, the open() and

send() method will be used.
Method Descrription
open (method, url, async) Specifies the type of request

method: the type of request: GET or

POST
url: the server(file) location
async: true(asynchronous) or
false(synchronous)
send() Sends the request to the server
(used for GET)

send(string) Sends the request to the server

(used for POST)
 23

GET or POST

GET - Requests data from a specified

resource.

POST - Submits data to be processed to

a specified resource.
 24

GET or POST
GET is FASTER THAN POST. However, always use
POST requests when:
A cached file is not an option (update a file
or database on the server).
Sending a large amount of data to the server
(POST has no size limitations).
Sending user input (which can contain unknown
characters), POST is more robust and secure
than GET.
25
26
27
28
 29

The URL – a file on a server

The url parameter of an open method is an

address of a file on a server. The file can be any kind
of file, like .txt and .xml, or server scripting files
like .asp and .php (which can perform actions on the
server before sending the response back).
 30

Asynchronous
To send the request asynchronously, the async parameter
of the open method has to be set to true.

By sending asynchronously, the JavaScript does not have

to wait for the server response, but can instead:

execute other scripts while waiting for server response

deal with the response when the response ready

To send the file synchronously, the async must be turn

to false. When it is set to false, there is no need for an
onreadystatechange function.
31
 32

AJAX – A Server Response

Server Response Properties

Property Description

responseText get the response data

as a string

responseXML get the response data

as XML data
33
 34

Server Response Methods

Methods Description

getResponseHeader() Returns specific header

information from the server
resource
getAllResponseHeaders() Returns all the header
information from the server
resource
35
36
BLACKMAI
AJAX SECURITY
L
 SERVER SIDE
 CLIENT SIDE
 BLACKMAI
AJAX SECURITY
L
 SERVER SIDE
1. AJAX-based Web applications use the same
server-side security schemes of regular Web
applications.
2. AJAX-based Web applications are subject to the
same security threats as regular Web
applications.
3. It specify authentication, authorization, and
data protection requiremnets in web.xml file or
in program.
 BLACKMAI
AJAX SECURITY
L
 CLIENT SIDE
1. JavaScript code is visible to a user/hacker.
Hacker can use JavaScipt code for inferring
server-side weaknesses.
2. JavaScrIpt code is downloaded from the server
and executed at the client and can compromise the
client by mal-intended code.

3. Downloaded JavaScript code is constrained by

the sand-box security and can be relaxed for
signed JavaScript.
BLACKMAI
AJAX ISSUES
L
1. Complexity is increased.
2. AJAX-based applications can be difficult to
debug, test, and maintain.
3. Toolkits/Framework are not yet mature.
4. No support of XMLHttpRequest in old
browser.
5. JavaScript technology dependency and
incompatibility.
6. JavaScript code is visible to a hacker.
BLACKMAI
AJAX XML
L
XML FILE
- Stand for extensible markup language
- It was designed to store and transport data.

AJAX can be used for interactive communication

with an XML File.

Using AJAX it will demonstrate how a webpage can

fetch information from an XML file.
BLACKMAI
L

AJAX XML EXAMPLE

BLACKMAI cd_catalog.xml
L

XML FILE
BLACKMAI cd_catalog.x
L ml

XML FILE
BLACKMAI
L
BLACKMAI
L
AJAX- PHP
• PHP is a programming language that
allows web developers to create dynamic
content that interacts with databases.
• Ajax uses XHTML for content, CSS for
presentation, along with Document Object
Model and JavaScript for dynamic content
display.
AJAX- PHP
Using
Array

1.Function
5.
2.
7.
3.
4. Var
6.
8. (this.readyState
xmlhttp.send();
xmlhttp =<input
xmlhttp.open("GET",
xmlhttp.onreadystatechange == "gethint.php?q="
new XMLHttpRequest(); 4 && this.status
= function()
type="text" +
{
crs,
==
} The200)
true);
Document.getElementById(“txtHint”).innerH
onkeyup="showHint(this.value)">
send()
readyState
open(method,
Function()
-
new 4:
function request
keyup()- Function
finished
async)
XMLHttpRequest(); and response
document.getElementById(elementID)
url,
functionName(parameters)
expressions
method triggers will execute
the keyup { is ready
event, automatically if the expression
or attaches a function is followed
to run when a keyupby (), "self-invoking".
event occurs.
Sends a request
code to to
be the server
executed (used for GET)
TML=“”;
status
Specifies
}
Creates
.innterHtml
-
onreadystatechange
the type
200:a new
of - A XMLHttpRequest
request
OK -
function to
way
method: the type of request: GET or POST
be
to object
called
modify when
the the readyState
content of an property
HTML changes
element

url: the file location || async: true (asynchronous) or false (synchronous)

AJAX- PHP
Using Array

5.
1. $len=strlen($q);
2.
4.
3. q=$_REQUEST[“q”];
$q = strtolower($q);
foreach($a (stristr($q,
as $name) {
substr($name,
…The }
$_REQUEST
strlen() is afunction
stristr(string,search)
foreach function
strtolower()
loop HTTP
Theonly
returns
works 0,
Request
stristr()
the
converts
on $len))
avariables
function
length of
string
arrays, andato and
usedused
searches
string.
islowercase.
to to
forloop
the
collect data
eachafter
first occurrence
through ofsubmitting
a string
key/value anan
pairinside
in HTML
array.form.
another Notice:
string.
xmlhttp.open("GET", "gethint.php?q="
substr(string,start,length) The substr()+function
crs, true);returns a
part of a string.
AJAX- PHP
Using Database

4.Retrieving
6.
5.
3.Connecting
2.
1. Link Css
Create data
Connecting
Creating new from
New
& form
Database
Databasefor
Jquery the
Comment database
to the
new comments
and Create and
the
Performing
Database
Script Ajax
 A S Y N C H R O N O U S
J A V A S C R I P T
A N D X M L

THANK YOU

A J A X