Transcript ajax - iba-f12

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
withobjects 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);