Implementing progressive enhancement with Ajax

Throughout this book, 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. Since a form already exists for this purpose on the jQuery site, we can piggyback 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...