AJAX and PHP

Christian Wenz, <chw@hauser-wenz.de>

AJAX
• • • • • • A Dutch soccer team A cleaner Two characters from Iliad A city in Canada A mountain in Colorado ... „Asynchronous JavaScript + XML“
1

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
2

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!

3

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
4

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

5

3

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

6

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) { } } }

7

4

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

8

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

9

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/tikiindex.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-phpwithout-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

Sign up to vote on this title
UsefulNot useful