• Like
AJAX
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
753
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AJAX CS-422 Dick Steflik
  • 2. 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)
  • 3. General Technique Web Page Server-side Script requests server-side script to be run script run, XML created XML document returned info parsed from XML and used to update DOM by Javascript
  • 4. Sending a request for a URL
    • xmlHttpRequest Object
      • mozilla
        • objXMLHttp=new XMLHttpRequest()
      • IE
        • objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    • create the URL
    • tell the browser the name of the function to handle the response
    • send the url to the server
  • 5. example var url="servertime.php" xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null)
  • 6. 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
  • 7. sample PHP script <? // a time document header(&quot;Content-type: text/xml&quot;); print(&quot;<time>&quot;); print(&quot;<currtime>&quot;.time().&quot;</currtime>&quot;); print(&quot;</time>&quot;); ?>
  • 8. stateChange
    • when the document is received by the browser control is transferred to where ever we told it to
      • xmlHttp.onreadystatechange=stateChanged
      • in this case the function named stateChanged
  • 9. stateChanged function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==&quot;complete&quot;) { //update the DOM with the data document.getElementById(&quot;time&quot;).innerHTML=xmlHttp.responseText } }
  • 10. XMLHttpRequest Object
    • Methods:
      • abort() - stop the current request
      • getAllResponseHeaders - Returns complete set of headers (labels and values) as a string
      • getResponseHeader(:headerLabel”) – returns the string value of the requested header field
      • open(“method”,”URL”) sets a pending request
      • send(content) – transmits the request
      • setRequestHeader(“label”,”value”) – sets label/value in the header
  • 11. (continued)
    • Properties
      • onreadystatechange - event handler to use
      • readyState (0-uninitialized, 1-loading, 2-loaded, 3-interactive, 4- complete)
      • responseText – string version of the data returned
      • responseXML – DOM compatible document object returned by server
      • status – http response header code (200 – good)
      • statusText – string message of status code
  • 12. 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