Download
eca 225 n.
Skip this Video
Loading SlideShow in 5 Seconds..
ECA 225 PowerPoint Presentation

ECA 225

118 Vues Download Presentation
Télécharger la présentation

ECA 225

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