1. ajax

2. –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

3. 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: www.myspace.com/oskibear randomseed= Date.parse(newDate()); …. …

4. 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,"");

5. ajax History Before there was browser support for asynchronous calls: –There were hidden 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">

6. 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"); }}

7. 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.

8. 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; }

9. 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

18. 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 usecross-platformlanguageobjectsHTMLXHTMLXML