Progressive enhancement with Ajax

Many times now we have encountered the concept of progressive enhancement. To reiterate, this philosophy ensures a positive user experience for all users by mandating that a working product be put in place first, before additional embellishments are added for users with modern browsers.

Ajax-heavy applications run a particular risk of being unusable without JavaScript enabled. To combat this, we can initially construct a traditional client-server page architecture using forms, and then change these forms to be more efficient if JavaScript is there to help us.

As an example, we'll build a form that searches the jQuery API documentation. As a form already exists for this purpose on the jQuery site, we can piggy-back on that form for our own purposes:

<form id="ajax-form"
    action="http://api.jquery.com/" method="get">
  <fieldset>
    <div class="text">
      <label for="title">Search</label>
      <input type="text" id="title...