AJAX CS422 Dick Steflik What is AJAX Asynchronous

AJAX CS-422 Dick Steflik

What is AJAX • Asynchronous Javascript And XML – allows the updating of a web page without doing a page reload • creates much nicer user experience • AJAX is not really a technology by itself – combination of Javascript, XML and some server-side scripting to create the XML • server-side scripting could be done in PHP, . NET, Java Servlet or Java Server Page (JSP)

General Technique Server-side Web Page Script requests server-side script to be run info parsed from XML and used to update DOM by Javascript run, XML created XML document returned

Sending a request for a URL • xml. Http. Request Object – mozilla • obj. XMLHttp=new XMLHttp. Request() – IE • obj. XMLHttp=new Active. XObject("Microsoft. XMLHTTP") • create the URL • tell the browser the name of the function to handle the response • send the url to the server

example var url="servertime. php" xml. Http. onreadystatechange=state. Changed xml. Http. open("GET", url, true) xml. Http. send(null)

The server-side script • creates a “well formed XML document” • sets the content type to text/xml • can be written in any language – PHP – ASP –. NET – Java – JSP

sample PHP script <? // a time document header("Content-type: text/xml"); print("<time>"); print("<currtime>". time(). "</currtime>"); print("</time>"); ? >

state. Change • when the document is received by the browser control is transferred to where ever we told it to – xml. Http. onreadystatechange=state. Changed – in this case the function named state. Changed

state. Changed function state. Changed() { if (xml. Http. ready. State==4 || xml. Http. ready. State=="complete") { //update the DOM with the data document. get. Element. By. Id("time"). inner. HTML=xml. Http. response. Text } }

XMLHttp. Request Object • Methods: – abort() - stop the current request – get. All. Response. Headers - Returns complete set of headers (labels and values) as a string – get. Response. Header(: header. Label”) – returns the string value of the requested header field – open(“method”, ”URL”) sets a pending request – send(content) – transmits the request – set. Request. Header(“label”, ”value”) – sets label/value in the header

(continued) • Properties – onreadystatechange - event handler to use – ready. State (0 -uninitialized, 1 -loading, 2 -loaded, 3 interactive, 4 - complete) – response. Text – string version of the data returned – response. XML – DOM compatible document object returned by server – status – http response header code (200 – good) – status. Text – string message of status code

Popular Ajax Frameworks • Prototype – http: //www. prototypejs. org/ – free • Script. aculo. us – http: //script. aculo. us/ – Used with the Prototype Framework, mainly for animations and interface development – free • Backbase – Enterprise Ajax Framework – not free