AJAX and PHP

Christian Wenz, <[email protected]>

AJAX
• A Dutch soccer team
• A cleaner
• Two characters from Iliad
• A city in Canada
• A mountain in Colorado
• ...

„Asynchronous JavaScript + XML“

1
 What is AJAX?
• „Asynchronous JavaScript + XML“
• Ajax isn’t a technology. It’s really several
technologies, each flourishing in its own right,
coming together in powerful new ways.
• XHTML/CSS
• DOM
• XML/XSLT
• JavaScript
• http://www.adaptivepath.com/publications/
essays/archives/000385.php

What really is AJAX?

• A concept, no technology
• JavaScript can do things in the
background!
• Contact a server
• Retrieve data
• Integrate them in the page (thanks to
"DHTML")
• Main advantage: no page refresh!

2
 How come?
• Circa 1998: Microsoft integrates the ActiveX object
XMLHttpRequest in Internet Explorer 5.0
• Request from the team responsible for Outlook
Web Access
• After a couple of years, Mozilla project ported
object (without ActiveX, but almost identical API)
• Integrated in Safari
• Backported to Konqueror
• Integrated in Opera
• Native object (no ActiveX) in Internet Explorer 7

Who/what is „Adaptive Path“?

• Jesse James Garrett invented the term
„AJAX“ (not the technology)
• Tipping point
• However the technology has been made
popular by Google
• Used AJAX in a browser-agnostic fashion
before the term was coined at all

3
 AJAX Examples in the Web
• Google Suggest
• Various webmail providers
• Gmail
• Hotmail (Beta)
• Yahoo! Mail (Beta)

Step 1: Create object

var xmlHttp = false;

if (window.ActiveXObject) {
try {
XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHTTP = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}

4
 Step 1a: Create object
else if (window.XMLHttpRequest) {
try {
XMLHTTP = new XMLHttpRequest();
} catch (e) {
}
}

Step 2: Send request

if (xmlHttp) {
xmlHttp.open('GET', 'http://...', true);
xmlHttp.onreadystatechange = FUNCTIONNAME;
xmlHttp.send(null);
}

5
 Step 3: Evaluate response
function FUNCTIONNAME() {
if (xmlHttp.readyState == 4) {
alert("Return value: " +
xmlHttp.responseText);
}
};

10

The next steps

• Server-side
• Communication with server-side technology
• Serializing objects and data
• JSON (http://json.org/ comes in very handy)
• Client-side
• Working with Text
• Working with XML
• Working with XPath and XSL

11

6
 Issues
• No bookmarks possible
• You have to implement you own persistence
mechanism
• Using the querystring (JavaScript:
location.search) does not work, causes
reload
• Using the hash (JavaScript:
location.hash) does work, no reload
• However, some Safari/Konqueror issues

12

More Issues
• The browser´s back button does not work
as expected
• Some browsers write new URLs that do not
generate HTTP requests (e.g. adding
something to the hash) to the history, some
don´t
• Can work nicely in combination with
bookmark hacks
• But greatly increases the effort needed for
the site

13

7
 Frameworks vs. DIY Code
• AJAX itself is just a few of lines of code
• However extensions or frameworks can
help integrate this in the whole project
• Nice-to-have features
• Extension encapsulates the
XMLHttpRequest call
• Extension facilitates binding the data
returned from the server to client elements
• Extension takes care of bookmark/back
button issues

14

AJAX Frameworks for PHP

• Sajax
• PEAR::HTML_AJAX
• JPSpan
• Xajax
• phAtJAX
• MyBIC
• ...

15

8
 Sajax
• Simple Ajax Toolkit
• http://www.modernmethod.com/sajax/
• Also available for other technologies

16

Demo
•User registration: When a user enters a
name, the application checks in the
background whether it already exists or not
•Note: This could be abused to brute-force a
list of user names on your site

17

9
 Sajax Basics (1)
<?php
include 'user.inc.php';
include 'Sajax.php';

sajax_init();
sajax_export('searchUser');
sajax_handle_client_request();
?>
• Sajax creates x_FunctionName() for every
exported function FunctionName().

18

Sajax Basics (2)

<script language="JavaScript"
type="text/javascript"><!--
<?php sajax_show_javascript();
?>
...
//--></script>
• This loads the basic JavaScript code for
Sajax

19

10
 Using Sajax Functions
Name: <input type="text" name="username"
onchange="x_searchUser(this.value,
searchUser_callback);" />
• Callback function:
function searchUser_callback(result) {
if (result == 1) {
alert("Username already exists!");
document.forms[0].elements["username"]
.value = "";
document.forms[0].elements["username"]
.focus();
}
}

20

PEAR::HTML_AJAX
• AJAX package in PEAR
• http://pear.php.net/package/
HTML_AJAX
• Currently in alpha state
• Documentation could require some help
• A lot of intersting, advanced features

21

11
 Differences to Sajax
• Registers JavaScript function in a class
• A specific file contains the class
information

22

Simple Example (1)

• Client
<html>
<script type="text/javascript"
src="pear_server.php?client=all">
</script>
<div id="output">Hello</div>
<script type="text/javascript">
HTML_AJAX.replace('output',
'pear_output.php');
</script>
</html>

23

12
 Simple Example (2)
• Server
<?php
include
'HTML/AJAX/Server.php';
$server = new
HTML_AJAX_Server();
$server->handleRequest();
?>

24

Simple Example (3)

• PHP Server
<?php
echo 'AJAX';
?>

25

13
 JPSpan
• JavaScript PHP Span
• http://sourceforge.net/projects/jpspan
• Other projects base on JPSpan,
e.g.JPWM, a window manager
• http://sourceforge.net/projects/jpwm
• Very mighty and quite convenient to use

26

Xajax
• Very easy to use library
• http://xajax.sourceforge.net/
• Quite similar to Sajax

27

14
 phAtJAX
• Yet another AJAX project
• http://www.fudnik.com/main/tiki-
index.php?page=phAtJAX+Client
• Includes debugging – i.e. shows the
transmitted data

28

MyBIC
• Yet another framework
• "MyBic AJAX/PHP framework in top 1% of
SourceForge projects in 4 days!"
• http://sourceforge.net/projects/mybic
• Offers visual debugging

29

15
 Further Examples and Sources
• AJAX Shopping Cart
http://www.thaxtertewksbury.com/2005/11/2
9/ajax-shopping-cart/
• AJAX Blog: http://blog.joshuaeichorn.com/
• AJAX Reports: http://ajax.phpmagazine.net/
• AJAX without AJAX
• http://www.phpit.net/article/ajax-php-
without-xmlhttprequest/
• http://www.phpied.com/javascript-include/

30

Caveats
• It just won´t work without JavaScript
• 10% of users do not support JavaScript
• Old, deprecated browsers are a problem
• Accessibility issues (screenreader, ...)
• Some effects are also possible without
„AJAX“ (but with JavaScript of course),
for instance using hidden (i)frames

31

16
 Thank You!
Questions?

http://www.hauser-wenz.de/
http://www.hauser-wenz.de/blog/

http://javascript.phrasebook.org/
http://php.phrasebook.org/

32

17