php_tek 2006 - AJAX by zwj23860

VIEWS: 11 PAGES: 6

									                                                              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

								
To top