31
Ajax in Depth By Rohit Ghatol

Ajax in depth

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Ajax in depth

Ajax in DepthBy Rohit Ghatol

Page 2: Ajax in depth

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 [email protected]

Page 3: Ajax in depth

Topics• Typical Web Page Flow• What is Ajax?• Ajax Application flow• Ajax Components

• Server Side• Client Side

• Javascript Ajax libraries• JSON web applications

Page 4: Ajax in depth

Typical Web Page Flow

Page 5: Ajax in depth

HTTP Transport Protocol• HTTP Request has following part

• Request Line• HTTP Headers• Optional Message Body

Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Page 6: Ajax in depth

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

Page 7: Ajax in depth

HTTP Transport Protocol• HTTP supports following Methods

• GET• POST• PUT• DELETE• HEAD

Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Page 8: Ajax in depth

HTTP Transport Protocol• HTTP Response has following part

• Status Line• HTTP Headers• Optional Message Body

Reference - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Page 9: Ajax in depth

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>

Page 10: Ajax in depth

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

Page 11: Ajax in depth

So What’s the issue?

Page 12: Ajax in depth

Heavy Traffic

First Name

Last Name

Email Address

Password

Submit Reset

Register User

Web Server

Page 13: Ajax in depth

Online data fetch

Page 14: Ajax in depth

Inline data editing

Page 15: Ajax in depth

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

Page 16: Ajax in depth

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

Page 17: Ajax in depth

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

Page 18: Ajax in depth

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)

Page 19: Ajax in depth

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

Page 20: Ajax in depth

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

Page 21: Ajax in depth

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

Page 22: Ajax in depth

Code Time• Try live code -

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Page 23: Ajax in depth

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

Page 24: Ajax in depth

Restful WebService

Page 25: Ajax in depth

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/

Page 26: Ajax in depth

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" }}

Page 27: Ajax in depth

JSON Libraries• Read More here - http://json.org/

Page 28: Ajax in depth

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

Page 29: Ajax in depth

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

Page 30: Ajax in depth

Ajax & PHP• Lets do a Code Walk Through -

http://www.w3schools.com/PHP/php_ajax_database.asp

Page 31: Ajax in depth

Q & A s• Question and Answers