1 / 22

AJAX

AJAX. asynchronous server-client communication. Test. Ajax / AJAX / Web 2.0. Ajax (the word) :: asynchronous web technology AJAX (the acronym) :: Asynchronous Javascript and Xml Web 2.0 :: nonsense word ( Tim Berners-Lee, 2006 ) we’ll refrain from using in this class. Why AJAX?.

teness
Download Presentation

AJAX

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. AJAX asynchronous server-client communication

  2. Test

  3. Ajax / AJAX / Web 2.0 • Ajax (the word) :: asynchronous web technology • AJAX (the acronym) :: Asynchronous Javascript and Xml • Web 2.0 :: nonsense word (Tim Berners-Lee, 2006) we’ll refrain from using in this class

  4. Why AJAX? • Provide a desktop like experience over the web • Because browsers are powerful enough

  5. Where is AJAX? • Google Maps, Mail, &c • Flickr • Facebook • Predictive text searches

  6. Viewing / Debugging AJAX • Turn on Firebug • Go to the NET tab • Load a page web page • What you See: • A list of each GET request performed by your browser • What is a browser getting on a traditional website?

  7. Observing AJAX requests • Clear the Firebug NET pane • Start doing something that causes an AJAX action to happen • Ex: start typing in the Google search bar • Watch the NET pane

  8. Parameters Sent

  9. Headers (sent + received)

  10. See the Response

  11. HTTP GET & POST • Get • Used by client to request data from the server • Post • Used by client to send data to server

  12. The XMLHttpRequest object • Makes asynchronous http requests using JS • The backbone of AJAX • You can receive plain XML, HTML, JSON…what ever you want

  13. Testing Browser Type…. if (window.XMLHttpRequest)     { ajax = new XMLHttpRequest();  } else if (window.ActiveXObject)    { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }

  14. XMLHttpRequest Methods • Open(mode, url, async) • Mode: GET or POST • Url: Http://..... • Async (true for async, false for sync.) • Send(str) • In GET mode, str=NULL • In POST mode, str is name/value pairs that you are posting to the service

  15. Async / Synchronous • Synchronous: • JS function hangs until there is a response from the server • Async: • Creates the request and continues executing the next bit JS code • Creates listeners that are executed when the server responds • Is the right way to do AJAX requests

  16. XMLHttpRequest Attributes • readyState • 0: not initialized • 1: connection established • 2: request received • 3: answer in process • 4: done • Status • http status…200: OK, 404: file not found, &c

  17. XMLHttpRequest Properties • responseText • Response as plain text • responseXml • Response as an object (on which you may use DOM methods) • onreadystatechange • Function to call when ready state changes • setRequestHeader • Tell the client how to configure the outgoing http headers

  18. GET with XMLHttpRequest var url = ‘http://www.example.com/search.php?s=blah’; ajax.onreadystatechange=function(){if(ajax.readyState==4)  { var disp = document.getElementById('test'); disp.innerHTML=xmlhttp.responseText }}ajax.open("GET",url,true);ajax.send(null);

  19. POST with XMLHttpRequest var mypost = “var1=blah&var2=blahblah”; ajax.onreadystatechange=function() { if(ajax.readyState == 4) { alert(“done”); } }; ajax.open("POST", url, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(mypost);

  20. In Class Work • Create a PHP page that outputs ‘Hello World’ followed by the current time. • (as plan text, no need for <html>,<head>, or <body> • Create an HTML/JS page that makes an AJAX (GET) request to the PHP page above • Test for each of the readyStates, writing out to a div on the page the state number + a description of the state. • In state 4, also print out the responseText

More Related