| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>Chapter 4. Ajax</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="index.html" title="Apache Click"><link rel="prev" href="ch03s08.html" title="3.8. Behavior"><link rel="next" href="ch04s02.html" title="4.2. AjaxBehavior"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Chapter 4. Ajax</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s08.html">Prev</a> </td><th width="60%" align="center"> </th><td width="20%" align="right"> <a accesskey="n" href="ch04s02.html">Next</a></td></tr></table><hr></div><div class="chapter" title="Chapter 4. Ajax"><div class="titlepage"><div><div><h2 class="title"><a name="chapter-ajax"></a>Chapter 4. Ajax</h2></div></div></div><div class="toc"><dl><dt><span class="sect1"><a href="ch04.html#ajax-overview">4.1. Ajax Overview</a></span></dt><dt><span class="sect1"><a href="ch04s02.html">4.2. AjaxBehavior</a></span></dt><dt><span class="sect1"><a href="ch04s03.html">4.3. AjaxBehavior Execution</a></span></dt><dt><span class="sect1"><a href="ch04s04.html">4.4. First Ajax Example</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch04s04.html#ajax-trace-log">4.4.1. Ajax Trace Log</a></span></dt><dt><span class="sect2"><a href="ch04s04.html#ajax-trace-log-no-target-control">4.4.2. Ajax Trace Log - No Ajax Target Control Found</a></span></dt><dt><span class="sect2"><a href="ch04s04.html#ajax-trace-log-no-target-ajax-behavior">4.4.3. Ajax Trace Log - No Target AjaxBehavior Found</a></span></dt></dl></dd><dt><span class="sect1"><a href="ch04s05.html">4.5. Ajax Page Action</a></span></dt><dt><span class="sect1"><a href="ch04s06.html">4.6. Ajax Response Types</a></span></dt><dt><span class="sect1"><a href="ch04s07.html">4.7. Ajax Error Handling</a></span></dt></dl></div><div class="sect1" title="4.1. Ajax Overview"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="ajax-overview"></a>4.1. Ajax Overview</h2></div></div></div><p>Ajax is a method of using JavaScript to perform a GET or POST request |
| and return a result without reloading the whole page. |
| </p><p>For an introduction on Ajax please see the following articles:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p><a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.w3schools.com/Ajax/default.asp" target="_blank">http://www.w3schools.com/Ajax/default.asp</a></p></li><li class="listitem"><p><a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://en.wikipedia.org/wiki/AJAX" target="_blank">http://en.wikipedia.org/wiki/AJAX</a></p></li></ul></div><p>Ajax is a client-side technology for creating interactive web applications. |
| The JavaScript <code class="literal">XMLHttpRequest</code> object is used to perform GET |
| and POST requests and the server can send back a response that can be processed |
| in the browser. |
| </p><p>Click on the other hand is a server-side technology that can handle and |
| process incoming Ajax requests and send a response back to the browser. |
| </p><p><span class="bold"><strong>Please note:</strong></span> Click is responsible |
| for handling server-side requests. It is up to you to develop the client-side |
| logic necessary to make the Ajax request, process the server response |
| and handle errors. This is easier than it sounds though as there is a wide |
| range of free JavaScript libraries and plugins available to help develop |
| rich HTML front-ened. Since Click is a stateless framework and Page URLs |
| are bookmarkable, it is easy to integrate Click with existing JavaScript |
| technologies such as: |
| |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.jquery.com" target="_blank">jQuery</a>, |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.prototypejs.org/" target="_blank">Prototype</a> and |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://mootools.net/" target="_blank">MooTools</a> to name a few. |
| </p><p>It is also possible to write custom |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/ajax/AjaxBehavior.html" target="_blank">AjaxBehaviors</a> |
| (covered later) that renders the client-side code necessary to initiate Ajax |
| requests and handle Ajax responses and errors. In fact once you become familiar |
| Click's Ajax handling, you will likely create custom AjaxBehaviors to |
| streamline and encapsulate your client-side code. |
| </p><p>In this chapter we'll look at the Ajax support provided by Click. There |
| are two basic ways to handle and process Ajax requests: |
| </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p><a class="link" href="ch04s02.html" title="4.2. AjaxBehavior">AjaxBehavior</a> - AjaxBehavior |
| is a specialized |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Behavior.html" target="_blank">Behavior</a> |
| that enables Controls to handle and respond to Ajax requests |
| </p></li><li class="listitem"><p><a class="link" href="ch04s05.html" title="4.5. Ajax Page Action">Page Actions</a> - Page Actions |
| was covered <a class="link" href="ch02s07.html" title="2.7. Page Actions">earlier</a> and provides a |
| simple way to handle and respond to Ajax requests |
| </p></li></ul></div></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03s08.html">Prev</a> </td><td width="20%" align="center"> </td><td width="40%" align="right"> <a accesskey="n" href="ch04s02.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.8. Behavior </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 4.2. AjaxBehavior</td></tr></table></div></body></html> |
