ECA 225 Applied Online Programming ajax ECA 225

ECA 225 Applied Online Programming ajax ECA 225 Applied Interactive Programming 1

AJAX v XHTML (compliant with standards) v CSS v DOM v XML v XSLT v XMLHttp. Request Object v Java. Script ECA 225 Applied Interactive Programming 2

Classic Web Application browser client user interface request response web server database, backend processing, etc server-side ECA 225 Applied Interactive Programming 3

XML document <? xml version="1. 0" encoding="UTF-8"? > <root> <data>And here is the new data. It is stored in an XML file and retrieved by Java. Script. </data> </root> ECA 225 Applied Interactive Programming 4

XHTML document <h 1>Developing Web Applications with Ajax</h 1> <p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to update a web page's content by reading from a remote file dynamically -- no page reloading is required. Note that this operation does not work for users without Java. Script enabled. </p> <p id="xml. Obj"> This is some sample data. It is the default data for this web page. <a href="data. xml“ title="View the XML data. " onclick= "ajax. Read('data. xml'); this. style. display='none'; return false">View XML data. </a> </p> ECA 225 Applied Interactive Programming 5

define XMLHttp. Request Object if(window. XMLHttp. Request){ xml. Obj = new XMLHttp. Request(); } else if(window. Active. XObject){ xml. Obj = new Active. XObject("Microsoft. XMLHTTP"); } else { return; } ECA 225 Applied Interactive Programming 6

XMLHttp. Request states 0: uninitiated (before the XMLHttp. Request begins) 1: loading (one the XMLHttp. Request has been initialized) 2: loaded: (once the XMLHttp. Request has gotten a response from the server) 3: interactive (while the XMLHttp. Request object is connected to the server) 4: complete (after the XMLHttp. Request object is finished working) ECA 225 Applied Interactive Programming 7

check state of XMLHttp. Request xml. Obj. onreadystatechange = function( ){ if(xml. Obj. ready. State = = 4){ update. Obj('xml. Obj', xml. Obj. response. XML. get. Elements. By. Tag. Name('data')[0]. first. Child. data); } } ECA 225 Applied Interactive Programming 8

update the Object function update. Obj(obj, data){ document. get. Element. By. Id(obj). first. Child. data = data; } // end function update. Obj ECA 225 Applied Interactive Programming 9

update the Object function update. Obj(obj, data){ document. get. Element. By. Id( obj ). inner. HTML = data; } // end function update. Obj ECA 225 Applied Interactive Programming 10

open connection to server xml. Obj. open ('GET', file, true); xml. Obj. send (''); ECA 225 Applied Interactive Programming 11