ajax in depth
Post on 13-Jan-2015
5.903 Views
Preview:
DESCRIPTION
TRANSCRIPT
Ajax in DepthBy 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
Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
GET /index.html HTTP/1.1Host: www.example.com
POST /path/script.cgi HTTP/1.0User-Agent: HTTPTool/1.0Content-Type: application/x-www-form-urlencodedContent-Length: 32
home=Cosby&favorite+flavor=flies
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
Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
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>
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
First Name
Last Name
Email Address
Password
Submit Reset
Register User
Web Server
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)ORhttp = 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
State Description
0 The request is not initialized
1 The request has been setup
2 The request has been submitted
3 The request is in process
4 The request is completed
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" }}
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
top related