1 / 11

ECA 225

ECA 225. Applied Online Programming. ajax. AJAX. XHTML (compliant with standards) CSS DOM XML XSLT XMLHttpRequest Object JavaScript. Classic Web Application. browser client. user interface. request. response. web server. database, backend processing, etc. server-side.

blithe
Download Presentation

ECA 225

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 225 AppliedOnline Programming ajax ECA 225 Applied Interactive Programming

  2. AJAX • XHTML (compliant with standards) • CSS • DOM • XML • XSLT • XMLHttpRequest Object • JavaScript ECA 225 Applied Interactive Programming

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

  4. 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 JavaScript. </data> </root> ECA 225 Applied Interactive Programming

  5. XHTML document    <h1>Developing Web Applications with Ajax</h1>    <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 JavaScript enabled. </p>    <p id="xmlObj"> This is some sample data. It is the default data for this web page. <a href="data.xml“ title="View the XML data." onclick= "ajaxRead('data.xml'); this.style.display='none'; return false">View XML data.</a> </p> ECA 225 Applied Interactive Programming

  6. define XMLHttpRequest Object if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } ECA 225 Applied Interactive Programming

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

  8. check state of XMLHttpRequest xmlObj.onreadystatechange = function( ){ if(xmlObj.readyState = = 4){ updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data); } } ECA 225 Applied Interactive Programming

  9. update the Object function updateObj(obj, data){ document.getElementById(obj).firstChild.data = data; } // end function updateObj ECA 225 Applied Interactive Programming

  10. update the Object function updateObj(obj, data){ document.getElementById( obj ).innerHTML = data; } // end function updateObj ECA 225 Applied Interactive Programming

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

More Related