Apache Con Asia 2006 Ajax
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Apache Con Asia 2006 Ajax as PDF for free.
More details
- Words: 954
- Pages: 17
AJAX and PHP Christian Wenz,
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) • Sajax creates x_FunctionName() for every exported function FunctionName(). 18
Sajax Basics (2) <script language="JavaScript" type="text/javascript"> ... //--> • This loads the basic JavaScript code for Sajax 19
10
Using Sajax Functions Name: • 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 <script type="text/javascript" src="pear_server.php?client=all">
12
Simple Example (2) • Server handleRequest(); ?> 24
Simple Example (3) • PHP Server
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
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) • Sajax creates x_FunctionName() for every exported function FunctionName(). 18
Sajax Basics (2) <script language="JavaScript" type="text/javascript"> ... //--> • This loads the basic JavaScript code for Sajax 19
10
Using Sajax Functions Name: • 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 <script type="text/javascript" src="pear_server.php?client=all">
Hello
<script type="text/javascript"> HTML_AJAX.replace('output', 'pear_output.php'); 2312
Simple Example (2) • Server handleRequest(); ?> 24
Simple Example (3) • PHP Server
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
Related Documents
Apache Con Asia 2006 Ajax
July 2020 11
Manual-ajax Con Jquery.docx
October 2019 14
Ajax
December 2019 56
Ajax
May 2020 36
Apache
November 2019 38
Apache
November 2019 36More Documents from ""
02 Networking Basics
May 2020 13
Lecture 6 - Flexure: September 13, 2002 Cven 444
June 2020 11
Vb Script Reference
July 2020 4
Apache Con Asia 2006 Ajax
July 2020 11
Co Mod3.pdf
November 2019 14