Get documents about "php_tek 2006 - AJAX
Document Sample
AJAX
• A Dutch soccer team
AJAX: • A cleaner
The Return of JavaScript • Two characters from Iliad
• A city in Canada
Christian Wenz • A mountain in Colorado
• ...
chw@hauser-wenz.de
„Asynchronous JavaScript + XML“
Orlando, Florida 2
April 25-28, 2006
What is AJAX? What really is AJAX?
• „Asynchronous JavaScript + XML“ • A concept, no technology
• Ajax isn’t a technology. It’s really several • JavaScript can do things in the
technologies, each flourishing in its own background!
right, coming together in powerful new ways. – Contact a server
– XHTML/CSS – Retrieve data
– DOM – Integrate them in the page (thanks to
– XML/XSLT "DHTML")
– JavaScript • Main advantage: no page refresh!
• http://www.adaptivepath.com/publications/
essays/archives/000385.php
Orlando, Florida 3 Orlando, Florida 4
April 25-28, 2006 April 25-28, 2006
How come? Path“
Who/what is „Adaptive Path“?
• Circa 1998: Microsoft integrates the ActiveX • Jesse James Garrett invented the term
object XMLHttpRequest in Internet Explorer 5.0 „AJAX“ (not the technology)
– Request from the team responsible for – Tipping point
Outlook Web Access
• However the technology has been made
• After a couple of years, Mozilla project ported
object (without ActiveX, but almost identical API)
popular by Google
• Integrated in Safari browser-
– Used AJAX in a browser-agnostic fashion
before the term was coined at all
– Backported to Konqueror
• Integrated in Opera
• Native object (no ActiveX) in Internet Explorer 7
Orlando, Florida 5 Orlando, Florida 6
April 25-28, 2006 April 25-28, 2006
1
AJAX Examples in the Web
• Google Suggest
• Various webmail providers
– Gmail
– Hotmail (Beta)
– Yahoo! Mail (Beta)
Orlando, Florida 7 Orlando, Florida 8
April 25-28, 2006 April 25-28, 2006
Step 1: Create object Step 1a: Create object
else if (window.XMLHttpRequest) {
var xmlHttp = false;
try {
if (window.ActiveXObject) { XMLHTTP = new XMLHttpRequest();
try { } catch (e) {
XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP"); }
} catch (e) { }
try {
XMLHTTP = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
Orlando, Florida 9 Orlando, Florida 10
April 25-28, 2006 April 25-28, 2006
Step 2: Send request Step 3: Evaluate response
if (xmlHttp) {
function FUNCTIONNAME() {
xmlHttp.open('GET', 'http://...', true);
if (xmlHttp.readyState == 4) {
xmlHttp.onreadystatechange = FUNCTIONNAME;
alert("Return value: " +
xmlHttp.send(null); xmlHttp.responseText);
} }
};
Orlando, Florida 11 Orlando, Florida 12
April 25-28, 2006 April 25-28, 2006
2
The next steps Issues
• Server-side • No bookmarks possible
– Communication with server-side – You have to implement you own
technology persistence mechanism
– Serializing objects and data – Using the querystring (JavaScript:
• JSON (http://json.org/ comes in very handy) location.search) does not work, causes
• Client-side reload
– Working with Text – Using the hash (JavaScript:
location.hash) does work, no reload
– Working with XML
• However, some Safari/Konqueror issues
– Working with XPath and XSL
Orlando, Florida 13 Orlando, Florida 14
April 25-28, 2006 April 25-28, 2006
More Issues Frameworks vs. DIY Code
• The browser´s back button does not • AJAX itself is just a few of lines of code
work as expected • However extensions or frameworks can
– Some browsers write new URLs that do not help integrate this in the whole project
generate HTTP requests (e.g. adding
• Nice-to-have features
something to the hash) to the history,
some don´t – Extension encapsulates the
XMLHttpRequest call
– Can work nicely in combination with
bookmark hacks – Extension facilitates binding the data
returned from the server to client elements
– But greatly increases the effort needed for
the site – Extension takes care of bookmark/back
button issues
Orlando, Florida 15 Orlando, Florida 16
April 25-28, 2006 April 25-28, 2006
AJAX Frameworks for PHP Sajax
• Sajax • Simple Ajax Toolkit
• PEAR::HTML_AJAX • http://www.modernmethod.com/sajax/
• JPSpan • Also available for other technologies
• Xajax
• phAtJAX
• MyBIC
• ...
Orlando, Florida 17 Orlando, Florida 18
April 25-28, 2006 April 25-28, 2006
3
Demo Sajax Basics (1)
•User registration: When a user enters a <?php
name, the application checks in the include 'user.inc.php';
background whether it already exists or include 'Sajax.php';
not
•Note: This could be abused to brute- sajax_init();
force a list of user names on your site sajax_export('searchUser');
sajax_handle_client_request();
?>
• Sajax creates x_FunctionName() for every
exported function FunctionName().
Orlando, Florida 19 Orlando, Florida 20
April 25-28, 2006 April 25-28, 2006
Sajax Basics (2) Using Sajax Functions
<script language="JavaScript" Name: <input type="text" name="username"
onchange="x_searchUser(this.value,
type="text/javascript"><!-- searchUser_callback);" />
<?php sajax_show_javascript(); • Callback function:
function searchUser_callback(result) {
?> if (result == 1) {
... alert("Username already exists!");
document.forms[0].elements["username"]
//--></script> .value = "";
• This loads the basic JavaScript code for document.forms[0].elements["username"]
.focus();
Sajax
}
}
Orlando, Florida 21 Orlando, Florida 22
April 25-28, 2006 April 25-28, 2006
PEAR::HTML_AJAX Differences to Sajax
• AJAX package in PEAR • Registers JavaScript function in a class
• http://pear.php.net/package/ • A specific file contains the class
HTML_AJAX information
• Currently in alpha state
• Documentation could require some
help
• A lot of intersting, advanced features
Orlando, Florida 23 Orlando, Florida 24
April 25-28, 2006 April 25-28, 2006
4
Simple Example (1) Simple Example (2)
• Client • Server
<html> <?php
<script type="text/javascript" include 'HTML/AJAX/Server.php';
src="pear_server.php?client=all">
</script> $server = new
<div id="output">Hello</div> HTML_AJAX_Server();
<script type="text/javascript"> $server->handleRequest();
HTML_AJAX.replace('output', ?>
'pear_output.php');
</script>
</html>
Orlando, Florida Orlando, Florida
25 26
April 25-28, 2006 April 25-28, 2006
Simple Example (3) JPSpan
• PHP Server • JavaScript PHP Span
<?php • http://sourceforge.net/projects/jpspan
echo 'AJAX'; • Other projects base on JPSpan,
?> e.g.JPWM, a window manager
– http://sourceforge.net/projects/jpwm
• Very mighty and quite convenient to
use
Orlando, Florida 27 Orlando, Florida 28
April 25-28, 2006 April 25-28, 2006
Xajax phAtJAX
• Very easy to use library • Yet another AJAX project
• http://xajax.sourceforge.net/ • http://www.fudnik.com/main/tiki-
• Quite similar to Sajax index.php?page=phAtJAX+Client
• Includes debugging – i.e. shows the
transmitted data
Orlando, Florida 29 Orlando, Florida 30
April 25-28, 2006 April 25-28, 2006
5
MyBIC Further Examples and Sources
• Yet another framework • AJAX Shopping Cart
http://www.thaxtertewksbury.com/2005/11
• "MyBic AJAX/PHP framework in top 1%
/29/ajax-shopping-cart/
of SourceForge projects in 4 days!"
• AJAX Blog: http://blog.joshuaeichorn.com/
• http://sourceforge.net/projects/mybic • AJAX Reports: http://ajax.phpmagazine.net/
• Offers visual debugging • AJAX without AJAX
– http://www.phpit.net/article/ajax-php-
without-xmlhttprequest/
– http://www.phpied.com/javascript-
include/
Orlando, Florida 31 Orlando, Florida 32
April 25-28, 2006 April 25-28, 2006
Caveats
• It just won´t work without JavaScript Thank you!
– 10% of users do not support JavaScript
– Old, deprecated browsers are a problem Questions?
– Accessibility issues (screenreader, ...)
• Some effects are also possible without
„AJAX“ (but with JavaScript of course), Thanks to Tobias Hauser for his input!
for instance using hidden (i)frames
http://www.hauser-wenz.de/
http://www.hauser-wenz.de/blog/
http://php.phrasebook.org/
Orlando, Florida 33
April 25-28, 2006
6
Related docs
