Submission Throttling and the Browser-Server Dialogue - Real-World Examples of Explicit Submission
(Page 6 of 7 )
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;
}
Next: Alternatives to Explicit Submission >>
More JavaScript Articles
More By O'Reilly Media
|
 This article is excerpted from chapter 10 of the book Ajax Design Patterns, written by Michael Mahemoff (O'Reilly, 2006; ISBN: 0596101805). Check it out today at your favorite bookstore. Buy this book now.
|
|
