Submission Throttling and the Browser-Server Dialogue

Lace Chat

Brett Stimmerman's Lace Chat (http://www.socket7.net/lace/) is an Ajax chat application. Lace users type the entire message and then explicitly submit with a Say button. You can also hit Enter after typing the message. Most chat applications work this way. It's a little more efficient, but the main benefit is actually for the user. It might be confusing to other users to see a partially constructed message, so the composer of that message should rectify any errors before posting the message.

The Fonz

"The Fonz" text adventure (http://www.mrspeaker.webeisteddfod.com/2005/04/17/the-fonz-and-ajax/) is a command-line game (Figure 10-7). In typical command-line fashion, you type something and submit the whole command at once. Interestingly, command lines don't have to work that way--it's feasible to provide hints or some validation support as the user types. The Assistive Search Demo (http://ajaxify.com/run/assistiveSearch/) illustrates this point.

Figure 1-7.  The Fonz

A9

A9 (http://a9.com), as with many search engines, requires Explicit Submission before it searches for the user's query (Figure 10-8).

Figure 10-8.  A9 search

Code Refactoring: AjaxPatterns Form-Based Sum

The Basic Sum Demo (http://ajaxify.com/run/sum) illustrates Explicit Submission. In the basic case, there are some input fields and a button, just sitting in a div:

  <div>

    <div id="figure">
      <input type="text" class="figure" id="figure1"
              name="figure1" size="3" value="4"/><br/>
      <input type="text" class="figure" id="figure2"
              name="figure2" size="3" value="6"/><br/>
      <input type="text" class="figure" id="figure3"
              name="figure3" size="3" value="" /><br/>
    </div>

    <input type="button" id="addButton" value="Add" />

  </div>

The button is configured to submit the form when it is clicked, an example of Explicit Submission:

  $("addButton").onclick = function() {
    submitSum();
  }

We now refactor to an alternative form of Explicit Submission, in which a standard form (http://ajaxify.com/run/sum/form) makes the submission. It's still an "Ajax submission" involving no page refresh, but it leverages the standard form mechanism. There are two reasons you might do this in real life: it's a step towards graceful degradation, since non-JavaScript browsers will require the data to be held in a standard form; it will "feel" more like a form to the user--e.g., the Enter key will automatically submit, and any CSS styling for forms will apply to it.

The initial HTML has been wrapped by a form tag. With standard JavaScript enabled, the action URL makes no difference because it will never be accessed, but if we want, we could point it to a conventional server-side script that would process the form in the event that JavaScript is turned off. The regular button control has been replaced by a submit button:

  <form action="http://ajaxify.com/run/sum/form/">

    <div id="figure">
      <input type="text" class="figure" id="figure1"
              name="figure1" size="3" value="4"/><br/>
      <input type="text" class="figure" id="figure2"
              name="figure2" size="3" value="6"/><br/>
      <input type="text" class="figure" id="figure3"
              name="figure3" size="3" value="" /><br/>
    </div>

    <input type="submit" id="addButton" value="Add" />

  </form>

The script hooks into onsubmit , which will be called when the new submit button is clicked. It arranges for an XMLHttpRequest submission via submitSum() , then returns false to prevent a conventional form submission and page refresh.

  $("sumForm").onsubmit = function() {
    submitSum();
    return false;
  }