ajaxx - iba-f12-ict512

cornawakeSoftware and s/w Development

Nov 4, 2013 (3 years and 8 months ago)

69 views

ajax

ajax



Asynchronous JavaScript and
XML


Umbrella term for technologies that often:

•Use client
-
side scripting for
layout and formatting

•Use less than full page
reloads

to change content

•Use
data formats other
than HTML

•Interact
asynchronously

with the server



Not
necessarily JavaScript or XML, but we’ll use
the term for convenience


So what is
ajax
?


The
XmlHttpRequest


XML & JSON


The
DOM



Q: So what does “asynchronous” mean?

In

Ajax,

you

can

make

requests

to

the

server

without

making

your

user

wait

around

for

a

response
.

That’s

called

an

asynchronous

request,

and

it’s

the

core

of

what

Ajax

is

all

about
.

Ajax Properties


Asynchronous requests allow
more than one
thing
to happen at the same time.



Only
the part of a web page that needs to
change gets updated.



The
page isn’t frozen while the server is
returning data to the browser.


Google Maps Traffic


Request:

GET
http://maps.google.com:80/maps?spn=0.001247,0.00
2427&z=19&t=k&vp=37.871279
,

-
122.251825&ev=ziHTTP/1.0


Response
:

GAddCopyright
("k","483",37.4855,
-
122.6324,38.1363
,

-
122.2355,12,"");

GAddCopyright
("k","484",37.4825,
-
122.2761,38.1346
,

-
121.8590,12,"");

ajax History





Before there was browser support for asynchronous calls:


There were hidden <
IFrame
>


IFramestraditionally

used to dynamically


IFrameset

to 0px, invisible to the user

•Used to GET/POST form fields to the
server



Example
:

<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute;

TOP: 0px"
src
="http://www.badguy.com/"
frameBorder
="
0“ scrolling
="no">

<form action=‘evil.cgi' method='POST'>

<input type='text' name='field1' value='
foo
'>

<input type='text' name='field2' value='bar'>

</form>

</
iframe
>

Real ajax Started with…


XMLHttpRequestObject

(often called XHR)

•In Internet Explorer,
XMLHttpobject
, part of
MSXML


ActiveX object,
vs

native
object in Firefox




XMLHttpRequest

(
XHR
) is a

DOM

API

that can be
used inside a

web browser

scripting language,
such as

JavaScript, to send an

HTTP

or
an
HTTPS

request directly to a

web server

and load
the

server response

data directly back into
the

scripting language
.


Once
the data is within the scripting language, it
is available as both an

XML

document, if the
response was valid XML markup
,

and as

plain
text
.










The

Document Object Model

(
DOM
) is
a

cross
-
platform

and

language
-
independent
convention for representing and interacting
with
objects

in

HTML
,

XHTML

and

XML

docum
ents. Aspects of the DOM (such as its
"Elements") may be addressed and
manipulated within the syntax of the
programming language in use

Ajax in 5 steps




Opening XMLRequest Object


open("
method", "URL"[,
asyncFlag
[, "
userName
"[, "password"]]])












XMLHttpRequestObject.open
(“GET”,
datasource
);