<html><head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Chapter&nbsp;4.&nbsp;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.&nbsp;Behavior"><link rel="next" href="ch04s02.html" title="4.2.&nbsp;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&nbsp;4.&nbsp;Ajax</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s08.html">Prev</a>&nbsp;</td><th width="60%" align="center">&nbsp;</th><td width="20%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Next</a></td></tr></table><hr></div><div class="chapter" title="Chapter&nbsp;4.&nbsp;Ajax"><div class="titlepage"><div><div><h2 class="title"><a name="chapter-ajax"></a>Chapter&nbsp;4.&nbsp;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.&nbsp;Ajax Overview"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="ajax-overview"></a>4.1.&nbsp;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.&nbsp;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.&nbsp;Ajax Page Action">Page Actions</a> - Page Actions
      was covered <a class="link" href="ch02s07.html" title="2.7.&nbsp;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>&nbsp;</td><td width="20%" align="center">&nbsp;</td><td width="40%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.8.&nbsp;Behavior&nbsp;</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">&nbsp;4.2.&nbsp;AjaxBehavior</td></tr></table></div></body></html>