AJAX Basics

1
AJAX Basics

• Web 2.0 and Rich Internet Applications
• Dr. Suthikshn Kumar

2
Contents ( Chapter 2 of Professional AJAX)

• HTTP Primer
• HTTP Requests and Responses
• AJAX Communication Techniques
• The hidden frame technique
• XMLHTTP Requests
• Further Considerations
• Same Origin Policy
• Cache Control

3
The Problem with Web Apps
4
What is AJAX?

• Development technique that allows us to build
  better user interfaces

AJAX
JavaScript
XHR
XHTML
CSS
XML
5
Remember This

• AJAX is about
• Usability
• User experience

6
Potentially Measurable Benefits

• Less waiting for pages
• Complete tasks quicker
• Bandwidth savings
• Less steps per task
• Familiar interfaces
• More responsive

7
Bytes Transferred
73 More Compact
8
Get it Done
32 Faster
9
Less Waiting
68 Faster
10
Sample Calculation
Hourly Labor Rate X Time Saved per Transaction
X Number of Transactions per year

• Assumptions
• Hosted web app, high speed or LAN
• Hourly Labor Rate 20
• Seconds Saved per Transaction 36 Seconds
• Number of Transactions per year 50,000
• Savings
• 10,000
• 500 Person Hours

11
HTTP Primer

• Central to a good grasp of AJAX techniques is
  HTTP Hypertext Transmission Protocol
• URL has prefix http// indicating use of HTTP
• HTTP Consists of two parts a request and a
  response
• When you type a URL in a browser, the browser
  creates and sends a request to server.
• The server receives this request and sends back a
  response.

12
HTTP Requests

• The format of an HTTP request is as follows
• Two request types of interest to AJAX developers
  are GET and POST.
• Heres a GET request
• GET / HTTP/1.1
• Host www.wrox.com
• User-Agent Mozilla/5.0 (Windows U Windows NT
  5.1 en-US rv1.7.6) Gecko/20050225
  Firefox/1.0.1
• Connection Keep-Alive

13
HTTP requests

• Sending parameters for a GET request requires
  that the extra info be appended to the URL
  itself.
• The format looks like this
• URL ? Name1value1name2value2
• This information is called query string, is
  duplicated in the request line of the HTTP
  request
• GET /books/?nameProfessional20Ajax HTTP/1.1
• Host www.wrox.com
• User-Agent Mozilla/5.0 (Windows U Windows NT
  5.1 en-US rv1.7.6) Gecko/20050225
  Firefox/1.0.1
• Connection Keep-Alive
• Note the text Professional Ajax had be encoded
  replacing the space with 20. This is called URL
  encoding.

14
HTTP POST Request

• The POST request provides additional information
  to the server in the request body.
• Typically when you fill out a form and submit it,
  that data is being sent through a POST request.
• Typical POST request
• POST / HTTP/1.1
• Host www.wrox.com
• User-Agent Mozilla/5.0 (Windows U Windows NT
  5.1 en-US rv1.7.6) Gecko/20050225
  Firefox/1.0.1
• Content-Type application/x-www-form-urlencoded
• Content-Length 40
• Connection Keep-Alive
• NameProfessional20AjaxpublisherWiley

15
HTTP Responses

• The format of the HTTP Response
• The status line gives info about the requested
  resource by providing a status code.
• Heres a sample HTTP response
• HTTP/1.1 200 OK
• Date Sat, 31 Dec 2005 235959 GMT
• Content-Type text/htmlcharsetISO-8859-1
• Content-Length 122
• Wrox Homepage

16
HTTP Status codes

• 200(OK) the resource was found and all is well
• 304 ( NOT Modified)The resource has not been
  modified since the last request. This is used for
  Browser cache mechanisms
• 401( Unauthorised) The client is not authorized
  to access the resource.
• 403 ( Forbidden) The client failed to gain
  authorization)
• 404 ( Not Found) The resource does not exist at
  the given location.

17
AJAX Communication Techniques

• The Hidden Frame Technique
• Hidden IFrames
• XMLHTTP

18
Hidden Frame Technique

• With the introduction of HTML frames, the hidden
  frames technique was born.
• The basic idea is to create a frameset that has a
  hidden frame that is used for client-server
  communication.
• A frame can be hidden by setting its width or
  height to 0 pixels, effectively removing it from
  display.

19
Hidden Frame Technique Pattern

• This technique follows a very specific, four step
  pattern
• The first step always begins with the visible
  frame, where the user is interacting with a web
  page. User is unaware that there is a hidden
  frame. At some point, user performs an action
  that requires additional data from the server.
  This triggers a JavaScript function call to the
  hidden frame.
• Second step in the process is a request made to
  the server by the hidden frame.
• The third step in the patter is a response
  received from the server.
• Since we are dealing with frames, the response
  must be another web page.
• This web page must contain the data requested
  from the server as well as some JavaScript to
  transfer that data to the visible frame.
• The fourth step is done by assigning an Onload
  event handler in the returned web page that calls
  a function in the visible frame after it has been
  fully loaded

20
Hidden Frame Technique Patterns
Web Browser
Javascript Call
Visible Frame
JavaScript Call
4
1
Request
Web Server
Hidden Frame
2
Database
3
Web page
21
Hidden Frame GET Requests

• We use an example to illustrate this technique
• A simple lookup page is created where a customer
  service representative can look up for
  information about a customer
• The user will enter the customer ID and receive
  in return he information about the customer.
• Some client side and server side programming is
  necessary
• In this example- server side scripting is done
  using open source PHP and MySQL

22
Frameset

• Transitional//EN"
• hidden Frame Example 1
• noresize"noresize" /
• noresize"noresize" /

23
Client Web page and JavaScript

• Transitional//EN"
• Customer Account Information
• function requestCustomerInfo()
• var sId document.getElementById("txt
  CustomerId").value
• top.frames"hiddenFrame".location
  "GetCustomerData.php?id" sId
• function displayCustomerInfo(sText)
• var divCustomerInfo
  document.getElementById("divCustomerInfo")
• divCustomerInfo.innerHTML sText
• Enter customer ID number to retrieve
  information

24
MySQL Table

• Table structure for table Customers
• CREATE TABLE Customers (
• CustomerId int(11) NOT NULL auto_increment,
• Name varchar(255) NOT NULL default '',
• Address varchar(255) NOT NULL default '',
• City varchar(255) NOT NULL default '',
• State varchar(255) NOT NULL default '',
• Zip varchar(255) NOT NULL default '',
• Phone varchar(255) NOT NULL default '',
• E-mail varchar(255) NOT NULL default '',
• PRIMARY KEY (CustomerId)
• ) TYPEMyISAM COMMENT'Sample Customer Data'

25
PHP Script
//make the database connection oLink
mysql_connect(sDBServer,sDBUsername,sDBPassword
) _at_mysql_select_db(sDBName) or sInfo
"Unable to open database" if(sInfo '')
if(oResult mysql_query(sQuery) and
mysql_num_rows(oResult) 0)
aValues mysql_fetch_array(oResult,MYSQL_ASSOC)
sInfo aValues'Name'."
/".aValues'Address'."
".
aValues'City'."
".aValues'State'."

". aValues'Zip'."
/
Phone ".aValues'Phone'."
".
"ail'."\"".aValues'E-mail'.""
else sInfo "Customer with ID
sID doesn't exist."
mysql_close(oLink) ?

• Transitional//EN"
• Get Customer Data
• //customer ID
• sID _GET"id"
• //variable to hold customer info
• sInfo ""
• //database information
• sDBServer "your.database.server"
• sDBName "your_db_name"
• sDBUsername "your_db_username"
• sDBPassword "your_db_password"
• //create the SQL query string

26
PHP Script with JavaScript

• window.onload function ()
• var divInfoToReturn
  document.getElementById("divInfoToReturn")
• top.frames"displayFrame".displayCust
  omerInfo(divInfoToReturn.innerHTML)
• ?

27
Hidden Frame Post Requests