ict512_lecture12_ajax_introx - iba-f09-ict512

nostalgicisolatedΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

70 εμφανίσεις

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


MySpaceTraffic


Request:

GET
http://profile.myspace.com:80/index.cfm?fuseaction=user.viewprofile&friendid=32732620&
MyToken=fcf392cd
-
2a35
-
4cc2
-
86fa
-
cb24b7a330dd HTTP/1.0


Response
:



<!
---
***
WEBPROFILE045 ***
---
>

<html>

<head><title>

www.myspace.com/oskibear

</title><meta name="keywords" content="friends networking sharing photos finding friends
blogsjournals

bloggingjournaling

bands music
rate
picsjoin

groups forums classifieds online social networking" /><meta name="description" content="
MySpaceProfile

-
Oski
, 64 years old,
Male, Berkeley, CALIFORNIA, US,
Grrrrrrah
!" /><meta http
-
equiv="expires" content="0" /><meta http
-
equiv="
Pragma
" content="no
-
cache"
/><link
rel
="STYLESHEET" type="text/
css
"
href
="http://x.myspace.com/js/myspace.css" />

<script language="JavaScript">

randomseed
=
Date.parse
(
newDate
());

</script>

<script language="JavaScript" type="text/
javascript
"
src
="http://x.myspace.com/js/myspaceJS011.js"></script>

<BASE HREF="http://www.myspace.com/" TARGET="_self"></BASE>

</head>

<body
bgcolor
="e5e5e5"
alink
="4e607b" link="4e607b"
vlink
="4e607b"
bottommargin
="0"
leftmargin
="0"
rightmargin
="0"
topmargin
="0"
style="
visibility:visible
;
display:block
">….










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,
vsnative

object in Firefox


Will be implemented as a
native object
in IE 71


•Instantiation:

if
(
window.XMLHttpRequest
){

//
If IE7, Mozilla, Safari, etc: Use native object

varxmlHttp
= new
XMLHttpRequest
()

}

else

{

if (
window.ActiveXObject
){

// ...otherwise, use the ActiveX control for IE5.x and IE6

varxmlHttp
= new
ActiveXObject
("
Microsoft.XMLHTTP
");

}}


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
.


Example AJAX request

xmlHttp
= new
XMLHttpRequest
();

xmlHttp.open
("GET", “http://www.example.com”);

xmlHttp.onreadystatechange
=
updatePage
;

xmlHttp.send
(null);


Example
AJAX response handling

function
updatePage
() {


if
(
xmlHttp.readyState
== 4) {


if
(
request.status
== 200) {


varresponse

=
xmlHttp.responseText
;



}


}

}

Downstream Options


The real beauty of XHR


Arbitrary structure of content

•Not restricted like HTML Forms


Asynchronous Communication, including callbacks


XHR can handle many types of downstream (from
server) data


XML


Full JavaScript


JavaScript Arrays


JSON


Custom Serialization Frameworks

•Atlas

•Google Web Toolkit










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