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 well 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. Thats called an asynchronous request, and its 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 isnt 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);