EC201 – WEB TECHNOLOGIES

Ajax and PHP

http://freepdf-books.com
What is Ajax?
Asynchronous JavaScript And XML
† Jesse James Garett coined term AJAX in his article:
„ “AJAX : A new approach h for
f a new application”
li i ”
† Term used in 2005, technologies existed earlier
† Ajax is just a new style of designing application
Manipulation of GUI elements
Saving state in the background
† Drag portal sub‐window, position saved automatically
Loading new state in the background
† Refresh a feed every 10min
† Switch to a different portal tab
Basically app in the browser
† See http://docs.google.com
Web Tech 1. AJAX 2
http://freepdf-books.com
Ajax is based on
HTML (or XHTML) and CSS
† Presenting
g information
DOM ‐ Document Object Model
† Dynamic display and interaction with the information
XML, XSLT (Optional)
† Data interchange and manipulation
XMLHttpRequest
† Asynchronous data retrieval object

All run in JavaScript

Web Tech 1. AJAX 3
http://freepdf-books.com
Uses of Ajax Paradigm
Real‐Time Form Data Validation
† Form data that require server‐side validation can be validated in a
form “before”
before the user submits it.
Auto completion
† A specific portion of form data may be auto‐completed as the user
types.
types
Master Details Operations
† Based on a client event, an HTML page can fetch more detailed
information on data without refreshing the page
page.
Sophisticated UI Controls
† Controls such as tree controls, menus, and progress bars may be
provided without page refreshes.
refreshes
Making Web apps like desktop apps
† User interaction should not stop
† Making
k the h browser
b a thicker
h k client
l

Web Tech 1. AJAX 4

http://freepdf-books.com
 Source:
5

http
p://adaptivepath
h.com/publications/essays/arch
hives/000385.ph
hp
Classical Web Apps vs. Ajax (1)

http://freepdf-books.com
Web Tech 1. AJAX
XMLHttpRequest (1)
Keystone of Ajax is XMLHttpRequest object.
XMLHttpRequest
p q object
j in JavaScript
p
† Client‐side
component
† Makes HTTP requests (both GET and POST) without
bl ki the
blocking h user
Introduced in MS Internet Explorer 5
† Being standardized by W3C
† Now widely supported in most of the browsers
† Mozilla Firefox, Safari 1.2, Opera 7.6

Not limited to XML

† Can be used to request or send any kind of data
Web Tech 1. AJAX 6
http://freepdf-books.com
XMLHttpRequest (2)
Must be instantiated before use.
† Browser specific
p object
j implementation
p
Use open() method to connect and retrieve response
p
from the specified URL.
Handle onreadystatechange Event

Web Tech 1. AJAX 7

http://freepdf-books.com
Example using XMLHttpRequest – Step 1
Create Object
† Worry
y about Browser Specific
p Creation!

Example
p
† var req = new XMLHttpRequest(); // Non‐IE
† var req
q = new ActiveXObject("Microsoft.XMLHTTP");
j ( );

Web Tech 1. AJAX 8

http://freepdf-books.com
Example using XMLHttpRequest – Step 2
Transferring data to Server
† open()
p () to initialize connection to Server
† send() to send the actual Data

Example
† req.open("POST",
q p ( , "phone.php")
p p p)
† req.send("name=Tanveer&city=Rawalpindi");

Web Tech 1. AJAX 9

http://freepdf-books.com
What happens after sending data?
XMLHttpRequest contacts the server and retrieves the
data
† Can take indeterminate amount of time

Event Listener to determine when the object has

finished retrievingg data
† Specifically listen for changes in “readyState” variable

Web Tech 1. AJAX 10

http://freepdf-books.com
Example using XMLHttpRequest – Step 3
Set up a function to handle the event when the
y
readyState is changed
g

Example
† req.onreadystatechange = stateHandler;

Web Tech 1. AJAX 11

http://freepdf-books.com
Example using XMLHttpRequest – Step 4
Check whether the XMLHttpRequest object successfully
retrieved the data, or was given an error code
† 0 – Un
Un‐initialized
initialized
† 1 – Loading
† 2 – Loaded
† 3 – Interactive
† 4 – Completed

Example:
if (req.readyState == 4) {
if (req
(req.status
status == 200) { //200 means OK (no error)
success();
}
}
Web Tech 1. AJAX 12
http://freepdf-books.com
 Ajax
j Example
p ‐1
<body>
<form>
Select a User:
<select name="users" onChange="showUser(this.value)">
<option value="0">Select Contact Group</option>
<option value="1">Friends</option>
<option value="2">Family</option>
<option value="3">Classfellows</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

Web Tech 1. AJAX 13

http://freepdf-books.com
 Ajax
j Example
p ‐2
var xmlhttp; function stateChanged()
function showUser(str) {
{ if (xmlhttp.readyState==4)
xmlhttp=GetXmlHttpObject(); document.getElementById("txtHint").innerHTML=
p p ;
xmlhttp.responseText;
if ((xmlhttp==null)
mlhttp n ll)
}
{
alert ("Browser does not support HTTP Request"); function GetXmlHttpObject()
{
return;
// code for IE7+, Firefox, Chrome, Opera, Safari
}
var url="getuser.php“ + “?q=“ + str; if (window.XMLHttpRequest)
return new XMLHttpRequest();
xmlhttp.open("GET",url,true);
// code for IE6, IE5
xmlhttp.send();
xmlhttp.onreadystatechange=stateChanged; if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
}

return null;
}
Web Tech 1. AJAX 14
http://freepdf-books.com
 Ajax
j Example
p ‐3
<?php
$q=$_GET["q"]; while($row = mysql_fetch_array($result))
$con = mysql_connect('localhost', 'root', ''); {
mysql_select_db("addressbook", $con); echo "<tr>";
$sql="SELECT
$sql "SELECT * FROM contacts WHERE groupid
gro pid = ' echo "<td>" . $ro
$row['firstname']
['firstname'] . "</td>";
"</td>"
".$q."‘ ";
echo "<td>" . $row['lastname'] . "</td>";
$result = mysql_query($sql); echo "<td>" . $row['city'] . "</td>";
echo "<td>"
<td> . $row['email']
$row[ email ] . "</td>";
</td> ;
echo "<table border='1'>
// echo "<td>" . $row['Job'] . "</td>";
<tr> echo "</tr>";
<th>Firstname</th>
}
<th>Lastname</th>
echo "</table>";
<th>City</th>
<th>E‐mail</th>
mysql_close($con);
</tr>"
</tr>";
?>

Web Tech 1. AJAX 15

http://freepdf-books.com
Where has AJAX been used?
Google Maps
† http://maps.google.com
p // p g g
Google Suggest
† http://www.google.com/webhp?complete
http://www.google.com/webhp?complete=1&hl=en
1&hl en
GMail
Flickr

Many other…
other

Web Tech 1. AJAX 16

http://freepdf-books.com
Conclusion
Learning Outcomes
† Ajax
j and PHP
Essential Reading
† http://adaptivepath.com/publications/essays/archives/000385.php
„ http://en.wikipedia.org/wiki/Ajax_(programming)
„ http://www.ajaxpatterns.org
„ http://w3schools.com/ajax/
h // h l / j /

Web Tech 1. AJAX 17

http://freepdf-books.com