Ajax in depth


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax in depth

  1. 1. Ajax in Depth<br />By Rohit Ghatol<br />
  2. 2. About Me<br />Technology Evangelist and Agile Evangelist<br />Architect @ QuickOffice<br />Project Manager @ Synerzip<br />Certified Scrum Master<br />Founder Pune Google Technology User Group<br />Corporate Speaker<br />Motivational Speaker and Counselor <br />Reach me at rohitsghatol@gmail.com<br />
  3. 3. Topics<br />Typical Web Page Flow<br />What is Ajax?<br />Ajax Application flow<br />Ajax Components<br />Server Side<br />Client Side<br />Javascript Ajax libraries<br />JSON web applications<br />
  4. 4. Typical Web Page Flow<br />
  5. 5. HTTP Transport Protocol<br />HTTP Request has following part<br />Request Line<br />HTTP Headers<br />Optional Message Body<br />Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol<br />
  6. 6. HTTP Transport Protocol<br />HTTP Request example<br />GET /index.html HTTP/1.1<br />Host: www.example.com<br />POST /path/script.cgi HTTP/1.0<br />User-Agent: HTTPTool/1.0<br />Content-Type: application/x-www-form-urlencoded<br />Content-Length: 32<br />home=Cosby&favorite+flavor=flies<br />Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol<br />
  7. 7. HTTP Transport Protocol<br />HTTP supports following Methods<br />GET<br />POST<br />PUT<br />DELETE<br />HEAD<br />Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol<br />
  8. 8. HTTP Transport Protocol<br />HTTP Response has following part<br />Status Line<br />HTTP Headers<br />Optional Message Body<br />Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol<br />
  9. 9. HTTP Transport Protocol<br />HTTP Response example<br /> HTTP/1.1 200 OK<br /> Date: Mon, 23 May 2005 22:38:34 GMT<br /> Server: Apache/ (Unix) (Red-Hat/Linux)<br /> Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT<br /> Accept-Ranges: bytes<br /> Content-Length: 438<br /> Connection: close<br /> Content-Type: text/html; charset=UTF-8<br /><html><br />…<br /></html><br />Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol<br />
  10. 10. HTTP Transport Protocol<br />HTTP Status codes examples are<br />200:The most standard of all the results.  It simply states that there has been a successful request of the page or file.<br />302: This code indicates that a page has been temporarily redirected to another URL.  This means that the page is still active, just temporarily moved to another URL.<br />404: The most common of the Broken Site Errors!  Basically this is where the URL no longer exists or cannot be found, so you will be redirected to a broken holding page.<br />500: Just a generic Server error message, this comes up when there is nothing else to explain a problem.<br />Reference - http://en.wikipedia.org/wiki/List_of_HTTP_status_codes<br />
  11. 11. So What’s the issue?<br />
  12. 12. Heavy Traffic<br />Register User<br />First Name<br />Web Server<br />Last Name<br />Email Address<br />Password<br />Submit<br />Reset<br />
  13. 13. Online data fetch<br />
  14. 14. Inline data editing<br />
  15. 15. What is Ajax?<br /><ul><li>Asynchronous JavaScript and XML(AJAX)
  16. 16. Web development technique for creating web applications
  17. 17. Makes web pages more responsive by exchanging small amounts of data
  18. 18. Allows the web page to change its content without refreshing the whole page
  19. 19. A web browser technology independent of web server software</li></li></ul><li>Benefits<br /><ul><li>Improves the user experience
  20. 20. Analyzing information typed into browser in real time
  21. 21. Provide a richer experience
  22. 22. Increases responsiveness of web pages
  23. 23. Improve bandwidth utilization
  24. 24. Only data which is required is retrieved from the server</li></li></ul><li>How it works<br /><ul><li>AJAX runs in your browser
  25. 25. Works with asynchronous data transfers(HTTP requests) between the browser and the web server
  26. 26. Http requests are sent by javascript calls without having to submit a form
  27. 27. XML is commonly used as the format for receiving server data but plain text may be used as well</li></li></ul><li>1 – XMLHttpRequest object<br /><ul><li>A page element must make a javascript call
  28. 28. The javascript function must create an XMLHttpRequest object which is used to contact the server
  29. 29. Javascript must determine whether the client is IE or Firefox</li></ul>http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)<br />OR<br />http = new XMLHttpRequest(); (Mozilla)<br />
  30. 30. 2 - Sending the request<br /><ul><li>Once the XMLHttpRequest object has been created it must be set up to call the server</li></ul>http.onreadystatechange= onResponse;<br />http.open("GET", serverurl, true);<br />http.send();<br /><ul><li>The code above utilizes the XMLHttpRequest object to contact the server and retrieve server data
  31. 31. When the response returns the javascript method jsMethodToHandleResponse can update the page</li></li></ul><li>3 - Handling the Response<br /><ul><li>Implementation of the javascript method which will be used to handle the response (Event Handler)</li></ul> function onResponse(str)<br />{<br /> if (http.readyState==4 &&http.status==200)<br /> {<br />document.getElementById("result").innerHTML = str;<br /> }<br /> }<br /><ul><li>Now the page has communicated with the server without having to refresh the entire page</li></li></ul><li>readyState property <br /><ul><li>The XMLHttpRequest readyState property defines the current state of the XMLHttpRequest object
  32. 32. Possible values for the readyState
  33. 33. Usually we are usually only concerned with state 4</li></li></ul><li>Code Time<br />Try live code - http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first<br />
  34. 34. Server Side <br />On Server side the only change is<br />Instead of a PHP/Java Servlet/CGI script returning an HTML<br />We now return either XML or JSON<br />Ideal situation is that RESTful Web Service is implemented using PHP/Java Servlet/CGI script<br />
  35. 35. Restful WebService<br />
  36. 36. Client Side<br />Instead of writing ajax calls directly using JavaScript one needs to use JavaScript AJAX Library<br />Popular JavaScript Libraries are<br />Jquery - http://docs.jquery.com/Tutorials<br />script.aculo.us - http://madrobby.github.com/scriptaculous/<br />Yahoo UI - http://developer.yahoo.com/yui/<br />
  37. 37. Introduction to JSON<br />Read here - http://en.wikipedia.org/wiki/JSON<br />JSON Example<br />{<br /> "firstName": "John",<br /> "lastName": "Smith",<br /> "age": 25,<br /> "address": <br /> {<br /> "streetAddress": "21 2nd Street",<br /> "city": "New York",<br /> "state": "NY",<br /> "postalCode": "10021"<br />}<br />}<br />
  38. 38. JSON Libraries<br />Read More here - http://json.org/<br />
  39. 39. PHP Introduction<br />What is PHP?<br />PHP stands for PHP: Hypertext Preprocessor<br />PHP is a server-side scripting language, like ASP<br />PHP scripts are executed on the server<br />PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)<br />PHP is an open source software<br />PHP is free to download and use<br />Learn PHP here - http://www.w3schools.com/PHP/php_intro.asp<br />
  40. 40. Install PHP, Apache & MySQL<br />Easiest way is - http://www.wampserver.com/en/<br />Wamp Server is all in one, Apache, Mysql with PHP Support, quickest way to getting started<br />
  41. 41. Ajax & PHP<br />Lets do a Code Walk Through - http://www.w3schools.com/PHP/php_ajax_database.asp<br />
  42. 42. Q & A s<br />Question and Answers<br />