AJAX and PHP - a winning combination
Ajax (Asynchronous Javascript and XML) is a kind of web application architecture that, even in its simplest form, allows a web application to provide an enriched user experience. Some larger scale examples of Ajax are Google Maps and Microsoft Virtual Earth. These presentation slides will illustrate a fairly simple Ajax application implemented using PHP, that was created by the author. The goal is not to understand all the details of the application, but rather to give a general idea of some important Ajax concepts and the benefits such as improved usability, speed, and overall user experience.
Geoff Peters is a graduate from Simon Fraser University in computing science and business. He has experience creating web applications and web sites, both for business and pleasure, many of them using PHP. He has worked as a software developer at Nokia Mobile Phones, Inception Software, Canada Safeway, and Intime Solutions.
Contact: geoff.peters@gmail.com
Other presentations by Geoff Peters
Geoff Peters Homepage
Ajax and PHP
A Winning Combination
Geoff Peters
Vancouver PHP Users Association
November 10
th
, 2005
What is AJAX?
Asynchronous Javascript with XML
A web application architecture.
Make web applications more like
desktop applications.
A lot of hype, for good reason?
(yes!)
Ajax Overview
Internet
Web Server
Client / Browser
Javascript
XMLHttpRequest
PHP
HTML, CSS
Asynchronous
Asynchronous means "non blocking"
You can continue working while request
is being processed.
Examples:
Background Printing.
A Javascript spell checker that gives
suggestions as you are typing.
Asynchronous (2)
Old way (synchronous):
- Click link on web page
- WAIT until page loads, then do
something.
WAIT!! While server processes.
Make
request
Client
Request
Completes.
Server
Asynchronous (3)
New way (asynchronous):
Web page anticipates your actions.
Data is loaded in background as you are
working.
Pre-caching.
Asynchronous (3)
While server processes.
Make
request
Client
Request
Completes.
Server
Do
other
things.
Javascript
Modern web browsers (Firefox, IE)
Standardized Javascript and DOM
XMLHttpRequest
Allows Javascript code to exchange data
with the web server.
Sending Data through
XMLHttpRequest
What data format to use?
XML
Plain text
Or any format you want!!!!
Example Application
Show demo of "Internet Auto Typer"
Key Points about this
Example
Data is exchanged frequently with
server.
Advantages of AJAX
Web site behaves more like a
"desktop application".
Reduce user wait times.
Immediate feedback.
May reduce load on server.
AJAX concerns (1)
Search Engine Indexing (Robots)
Strategies
Deep linking, adding links.
Providing non-AJAX versions of pages
Analogy to Flash based sites
AJAX concerns (2)
Usability conventions
Back button on browser
IFRAMES technique
Bookmarking
Tracking state with URL#id
Design Considerations
Architecture
Dividing up work between server /
client.
When to make calls to server.
Precaching.
Usability
User feedback on click.
What to do if server unavailable?
Your Turn
How to create a basic AJAX
application in PHP with Javascript?
[PHP] Rasmus' 30 second AJAX
Tutorial
Following code examples from
Rasmus Lerdorf, creator of PHP.
Javascript Code (1)
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
Javascript Code (2)
function sndReq(action) {
http.open('get', 'rpc.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
Javascript code (3)
Calling the request:
<a href="javascript:sndReq('foo')">[foo]</a>
PHP Server Side Code
switch($_REQUEST['action']) {
case 'foo':
/* do something */
echo "foo|foo done";
break;
...
}
HTML Presentation Code
Create DIV tags where you want to
update the page:
<div id="foo"> </div>
In HandleResponse, update the <div>
contents using Javascript:
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
Making it More Complex
Making it more complex is easy, once
you know the basics.
Example Javascript: Passing more than
one parameter to server:
function sndReqArg(action,arg) {
http.open('get', 'rpc.php?action='+action+'&arg='+arg);
http.onreadystatechange = handleResponse;
http.send(null);
}
Some Frameworks
HTML_AJAX
(
Ajax
)
XOAD (
)
XAJAX (
)
SAJAX
(
x/
)
Dojo (
)
There are many more!!
Wrap Up
AJAX: Asynchronous, Javascript, XML
Benefits of AJAX
Example Application Auto Typer
Future directions
Best practices, standardization,
innovation.
Thanks
Questions and discussion.
How will AJAX impact you?
Other presentations by Geoff Peters
Geoff Peters Homepage
Note: This HTML page was generated from the original Powerpoint by pdftohtml 0.36 and then modified for web.
How did I generate this HTML page from the Powerpoint page? There is no good free tool for converting PPT to HTML.
The built in Microsoft one does not generate web standards, editable code. So I did the following:
In Powerpoint, Use Page Setup to set orientation to Portrait and Width 23cm Height 24cm.
(important that Width < Height or page will be rotated incorrectly.)
Then quickly scan through and make sure images look OK.
It will have some distortion.
Print using PDFCreator and save as PDF file.
Run pdftohtml:
set PATH=C:\Program Files\gs\gs8.51\bin;%path%
set GS_LIB=C:\Program Files\gs\gs8.51\lib;C:\Program Files\gs\fonts
c:\geoff\pdf2html\pdftohtml -noframes -zoom 1.0 -c C:\geoff\present\ajax-slides-low3.pdf C:\geoff\present\ajax-php-.html
Then add your adsense ads to the page. If you give lots of presentations on interesting topics and want to share them to
make money, then this is the way to do it.