AJAX: AJAX: AJAX: AJAX: The The The The Return of JavaScript ...
Upcoming SlideShare
Loading in...5
×
 

AJAX: AJAX: AJAX: AJAX: The The The The Return of JavaScript ...

on

  • 645 views

 

Statistics

Views

Total Views
645
Views on SlideShare
645
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AJAX: AJAX: AJAX: AJAX: The The The The Return of JavaScript ... AJAX: AJAX: AJAX: AJAX: The The The The Return of JavaScript ... Document Transcript

    • 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 – Used AJAX in a browser-agnostic fashion browser- 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