• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajax in depth
 

Ajax in depth

on

  • 4,830 views

 

Statistics

Views

Total Views
4,830
Views on SlideShare
4,621
Embed Views
209

Actions

Likes
1
Downloads
70
Comments
0

3 Embeds 209

http://rohitghatol.com 201
http://www.linkedin.com 5
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax in depth Ajax in depth Presentation Transcript

    • Ajax in Depth
      By Rohit Ghatol
    • About Me
      Technology Evangelist and Agile Evangelist
      Architect @ QuickOffice
      Project Manager @ Synerzip
      Certified Scrum Master
      Founder Pune Google Technology User Group
      Corporate Speaker
      Motivational Speaker and Counselor
      Reach me at rohitsghatol@gmail.com
    • Topics
      Typical Web Page Flow
      What is Ajax?
      Ajax Application flow
      Ajax Components
      Server Side
      Client Side
      Javascript Ajax libraries
      JSON web applications
    • Typical Web Page Flow
    • HTTP Transport Protocol
      HTTP Request has following part
      Request Line
      HTTP Headers
      Optional Message Body
      Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • HTTP Transport Protocol
      HTTP Request example
      GET /index.html HTTP/1.1
      Host: www.example.com
      POST /path/script.cgi HTTP/1.0
      User-Agent: HTTPTool/1.0
      Content-Type: application/x-www-form-urlencoded
      Content-Length: 32
      home=Cosby&favorite+flavor=flies
      Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • HTTP Transport Protocol
      HTTP supports following Methods
      GET
      POST
      PUT
      DELETE
      HEAD
      Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • HTTP Transport Protocol
      HTTP Response has following part
      Status Line
      HTTP Headers
      Optional Message Body
      Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • HTTP Transport Protocol
      HTTP Response example
      HTTP/1.1 200 OK
      Date: Mon, 23 May 2005 22:38:34 GMT
      Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
      Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
      Accept-Ranges: bytes
      Content-Length: 438
      Connection: close
      Content-Type: text/html; charset=UTF-8
      <html>

      </html>
      Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • HTTP Transport Protocol
      HTTP Status codes examples are
      200:The most standard of all the results.  It simply states that there has been a successful request of the page or file.
      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.
      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.
      500: Just a generic Server error message, this comes up when there is nothing else to explain a problem.
      Reference - http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
    • So What’s the issue?
    • Heavy Traffic
      Register User
      First Name
      Web Server
      Last Name
      Email Address
      Password
      Submit
      Reset
    • Online data fetch
    • Inline data editing
    • What is Ajax?
      • Asynchronous JavaScript and XML(AJAX)
      • Web development technique for creating web applications
      • Makes web pages more responsive by exchanging small amounts of data
      • Allows the web page to change its content without refreshing the whole page
      • A web browser technology independent of web server software
    • Benefits
      • Improves the user experience
      • Analyzing information typed into browser in real time
      • Provide a richer experience
      • Increases responsiveness of web pages
      • Improve bandwidth utilization
      • Only data which is required is retrieved from the server
    • How it works
      • AJAX runs in your browser
      • Works with asynchronous data transfers(HTTP requests) between the browser and the web server
      • Http requests are sent by javascript calls without having to submit a form
      • XML is commonly used as the format for receiving server data but plain text may be used as well
    • 1 – XMLHttpRequest object
      • A page element must make a javascript call
      • The javascript function must create an XMLHttpRequest object which is used to contact the server
      • Javascript must determine whether the client is IE or Firefox
      http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)
      OR
      http = new XMLHttpRequest(); (Mozilla)
    • 2 - Sending the request
      • Once the XMLHttpRequest object has been created it must be set up to call the server
      http.onreadystatechange= onResponse;
      http.open("GET", serverurl, true);
      http.send();
      • The code above utilizes the XMLHttpRequest object to contact the server and retrieve server data
      • When the response returns the javascript method jsMethodToHandleResponse can update the page
    • 3 - Handling the Response
      • Implementation of the javascript method which will be used to handle the response (Event Handler)
      function onResponse(str)
      {
      if (http.readyState==4 &&http.status==200)
      {
      document.getElementById("result").innerHTML = str;
      }
      }
      • Now the page has communicated with the server without having to refresh the entire page
    • readyState property
      • The XMLHttpRequest readyState property defines the current state of the XMLHttpRequest object
      • Possible values for the readyState
      • Usually we are usually only concerned with state 4
    • Code Time
      Try live code - http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
    • Server Side
      On Server side the only change is
      Instead of a PHP/Java Servlet/CGI script returning an HTML
      We now return either XML or JSON
      Ideal situation is that RESTful Web Service is implemented using PHP/Java Servlet/CGI script
    • Restful WebService
    • Client Side
      Instead of writing ajax calls directly using JavaScript one needs to use JavaScript AJAX Library
      Popular JavaScript Libraries are
      Jquery - http://docs.jquery.com/Tutorials
      script.aculo.us - http://madrobby.github.com/scriptaculous/
      Yahoo UI - http://developer.yahoo.com/yui/
    • Introduction to JSON
      Read here - http://en.wikipedia.org/wiki/JSON
      JSON Example
      {
      "firstName": "John",
      "lastName": "Smith",
      "age": 25,
      "address":
      {
      "streetAddress": "21 2nd Street",
      "city": "New York",
      "state": "NY",
      "postalCode": "10021"
      }
      }
    • JSON Libraries
      Read More here - http://json.org/
    • PHP Introduction
      What is PHP?
      PHP stands for PHP: Hypertext Preprocessor
      PHP is a server-side scripting language, like ASP
      PHP scripts are executed on the server
      PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
      PHP is an open source software
      PHP is free to download and use
      Learn PHP here - http://www.w3schools.com/PHP/php_intro.asp
    • Install PHP, Apache & MySQL
      Easiest way is - http://www.wampserver.com/en/
      Wamp Server is all in one, Apache, Mysql with PHP Support, quickest way to getting started
    • Ajax & PHP
      Lets do a Code Walk Through - http://www.w3schools.com/PHP/php_ajax_database.asp
    • Q & A s
      Question and Answers