diff options
Diffstat (limited to 'offline-submit/jquery.malsup.com.htm')
| -rw-r--r-- | offline-submit/jquery.malsup.com.htm | 583 |
1 files changed, 0 insertions, 583 deletions
diff --git a/offline-submit/jquery.malsup.com.htm b/offline-submit/jquery.malsup.com.htm deleted file mode 100644 index b0008d7..0000000 --- a/offline-submit/jquery.malsup.com.htm +++ /dev/null @@ -1,583 +0,0 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>JavaScript Form Serialization Comparison</title>
-<link rel="stylesheet" type="text/css" media="screen" href="../../jq.css" />
-<style type="text/css">
-h1, #intro, #testForm td.hint { font-family: 'trebuchet ms', verdana, arial; }
-h1 { padding-left: 0 }
-#intro { background: #ffc; padding: 10px }
-#banner { text-align: left; }
-code.inline { background-color: #dfe0ff; color: #000 }
-ul { padding-left: 20px; margin: 10px 10px 10px 0 }
-#disclaimer { font-family: arial, sans-serif; font-size: small; font-style: italic; color: #555; margin-bottom: 5px}
-span.name { color: #c22 }
-span.dis { color: #f11 }
-#results { margin: 15px 0 }
-#results div { font-family: monospace; color: #888; }
-#results td { padding: 5px; }
-#testForm { border: 1px solid #888; background-color: #eee; padding: 0px }
-#testForm tr { background-color: #eee; }
-#testForm td { font-family: monospaced; padding: 2px 10px; }
-#testForm td.hint { color: #880; background: #ffc url(infoIcon.png) 5px 50% no-repeat; padding: 5px 5px 5px 30px }
-#toolbar { padding: 5px; border: 1px solid #aaa; border-width: 1px 0; background-color: #eee }
-#main { padding-top: 0; }
-legend, .wrong, span.dis { font-weight: bold }
-.wrong { color: #f00; }
-ul li { list-style-type: square }
-ol li { list-style-type: decimal }
-blockquote { padding: 10px; border: 1px dashed #aaa; line-height: 1.5em; font-family: sans-serif; background-color: #ffe }
-#footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #ddd; color: #888; }
-#main { padding: 15px }
-</style>
-<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
-<script type="text/javascript" src="../jquery.form.js"></script>
-<script type="text/javascript" src="mochi.base.js"></script>
-<script type="text/javascript" src="mochi.iter.js"></script>
-<script type="text/javascript" src="mochi.dom.js"></script>
-
-<script type="text/javascript" src="dojo.js"></script>
-<script type="text/javascript" src="dojo.xhr.js"></script>
-
-<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
-<!--<script type="text/javascript" src="mootools-1.2.1.js"></script>-->
-<script type="text/javascript" src="yahoo.js"></script>
-<script type="text/javascript" src="yui-event.js"></script>
-<script type="text/javascript" src="yui-connection.js"></script>
-
-<script type="text/javascript" src="firebug.js"></script>
-<script type="text/javascript" src="../../chili-1.7.pack.js"></script>
-<script type="text/javascript"><!--
-
-//
-// note that all usage of $ in this file is using Prototype's $ fn
-//
-var q, iter;
-
-// initialize test harness
-jQuery(init);
-
-function init() {
- // profiling in FF only
- if (!/Firefox/.test(navigator.userAgent)) {
- $('timer').checked = true;
- $('profiler').disabled = true;
- console.open();
- }
-
- // bind the Test buttons to the 'runTest' function
- jQuery('input.tester').click(function() { runTest(this); });
-
- // let's see browser's native form serialization too!
- var match = window.location.href.match(/\?([^#]+)/);
- if (!match) return;
- $('nativeOutput').innerHTML = match[1].escapeHTML();
-}
-
-function runTest(e) {
- $('S5').selectedIndex = -1; // for the S5 test - force selectedIndex to -1
- iter = $('iterations').value;
- var name = e.id;
- var n = '('+iter+') ' + name;
- var useTimer = jQuery('#toolbar :radio').fieldValue() == 1;
-
- // start clock
- useTimer ? console.time(n) : console.profile(n);
-
- try {
- // run the test
- window[name+'Test']();
- } catch(e) {
- q = 'ERROR: ' + e.message;
- }
-
- // stop clock
- useTimer ? console.timeEnd(n) : console.profileEnd(n);
-
- // highlight inaccurate results:
- // - there should not be any "NO" values, this includes the reset input, submit inputs and disabled inputs
- // - S5 should not be submitted (the selected index is -1)
- // - S3 should not be blank
- // - the query string should not have a trailing ampersand (dojo)
- // - the "My Name" input should have been converted to My+Name, not My%20Name
- q = q.replace(/(reset=NO|S5=|&$|sub(\d)=NO|D(\d)=NO)/g, '<span class="wrong">$1</span>');
- q = q.replace(/S3=&/, '<span class="wrong">S3=</span>&');
- q = q.replace(/My(%20)Name/,'<span class="wrong">$1</span>');
- $(name+'Output').innerHTML = q;
-}
-
-function jQueryNativeTest() {
- var form = jQuery('#testForm');
- for (var i=0; i < iter; i++)
- q = form.serialize();
-}
-
-function jQueryFormTest() {
- var form = jQuery('#testForm');
- for (var i=0; i < iter; i++)
- q = form.formSerialize();
-}
-
-function dojoTest() {
- var form = dojo.byId('testForm');
- for (var i=0; i < iter; i++)
- q = dojo.formToQuery(form);
-}
-
-function PrototypeTest() {
- var form = $('testForm');
- for (var i=0; i < iter; i++)
- q = Form.serialize(form);
-}
-
-/*
-function mooTest() {
- var form = $('testForm');
- for (var i=0; i < iter; i++)
- q = form.toQueryString();
-}
-*/
-
-function YUITest() {
- var form = $('testForm');
- for (var i=0; i < iter; i++)
- q = YAHOO.util.Connect.setForm(form);
-}
-
-function MochiKitTest() {
- var form = $('testForm');
- for (var i=0; i < iter; i++)
- q = MochiKit.Base.queryString(form);
-}
-// -->
-</script>
-
-</head>
-<body>
-<h1 id="banner">JavaScript Form Serialization Comparison: jQuery • dojo • Prototype • YUI • MochiKit</h1>
-<div id="intro">
- This page tests two things about JavaScript form serialization: <strong>quality</strong> and <strong>speed</strong>.
- <ul>
-
- <li>Quality is dertermined by analyzing the serialized output according to the <a href="http://www.w3.org/TR/html401/interact/forms.html">W3C Recommendation</a>.</li>
- <li>Speed is measured using <a href="http://www.getfirebug.com/">Firebug</a> to time (or profile in FireFox) numerous iterations of the serialization process.<sup>[1]</sup></li>
- </ul>
- <div id="disclaimer">If you believe the tests or comments on this page are inaccurate
- or unfair - please let me know. It is not my intent to misrepresent any of these libraries.
- Feedback can be sent to: forms at malsup dot com.
- </div>
- <div>»» Special thanks to Marius Feraru for adding support for native browser output and the EOL test!</div>
-</div>
-<div id="toolbar">
- <input type="radio" name="time" value="1" checked="checked" id="timer" />Timer <input type="radio" name="time" value="0" id="profiler" />Profiler
- <span style="margin-left: 15px">Iterations:</span>
- <select id="iterations" name="iterations" class="tester">
- <option value="1" selected="selected">1</option>
- <option value="25">25</option>
- <option value="50">50</option>
-
- <option value="100">100</option>
- <option value="200">200</option>
- </select>
- <p />
- <input id="jQueryNative" type="button" class="tester" value="jQuery 1.3.2 core" />
- <input id="jQueryForm" type="button" class="tester" value="jQuery 1.3.2 with Form Plugin" />
- <input id="dojo" type="button" class="tester" value="dojo 1.2.3" />
- <input id="YUI" type="button" class="tester" value="YUI 2.6.0" />
- <input id="MochiKit" type="button" class="tester" value="MochiKit 1.4.2" />
- <input id="Prototype" type="button" class="tester" value="Prototype 1.6.0.3" />
- <!-- <input id="moo" type="button" class="tester" value="Test moo" /> -->
-</div>
-<div id="main">
- <form id="results" action="#">
- <fieldset><legend>Output <span style="color:#666"><em>(errors in red)</em></span></legend>
- <table>
- <tr><td>NATIVE</td><td><div id="nativeOutput" class="output"><a href="#" onclick="$('S5').selectedIndex = -1; $('testForm').submit(); return false">check your browser's *native* form serialization</a></div></td></tr>
- <tr><td>jQuery</td><td><div id="jQueryNativeOutput" class="output"></div></td></tr>
- <tr><td>jQuery Form</td><td><div id="jQueryFormOutput" class="output"></div></td></tr>
- <tr><td>dojo</td><td><div id="dojoOutput" class="output"></div></td></tr>
- <tr><td>YUI</td><td><div id="YUIOutput" class="output"></div></td></tr>
- <tr><td>MochiKit</td><td><div id="MochiKitOutput" class="output"></div></td></tr>
- <tr><td>Prototype</td><td><div id="PrototypeOutput" class="output"></div></td></tr>
- <!--<tr><td>moo</td><td><div id="mooOutput" class="output"></div></td></tr> -->
-
- </table>
- </fieldset>
- </form>
-
- <p>
- The following form contains each of the possible elements that can be submitted (with the exception of <code class="inline"><input type="file"></code>).
- Which elements, and how they should be submitted, is specified here:
- <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13">http://www.w3.org/TR/html401/interact/forms.html#h-17.13</a>
- </p>
-
- <form id="testForm" action="#" method="get"><div>
-
- <table>
- <tr><td class="hint" colspan="2">Most enabled input elements and textareas are handled correctly by each of the libraries.</td></tr>
- <tr><td><code class="html"><textarea name="T3" rows="2" cols="15">?<br />Z</textarea></code></td><td><textarea name="T3" rows="2" cols="15">?Z</textarea></td></tr>
- <tr><td><code class="html"><input type="hidden" name="H1" value="x" /></code></td><td><input type="hidden" name="H1" value="x" /></td></tr>
- <tr><td><code class="html"><input type="hidden" name="H2" /></code></td><td><input type="hidden" name="H2" /></td></tr>
-
- <tr><td><code class="html"><input type="password" name="PWD" /></code></td><td><input name="PWD" type="password" value="" /></td></tr>
- <tr><td><code class="html"><input type="text" name="T1" /></code></td><td><input name="T1" type="text" /></td></tr>
- <tr><td><code class="html"><input type="text" name="T2" value="YES" readonly="readonly" /></code></td><td><input name="T2" type="text" value="YES" readonly="readonly" /></td></tr>
- <tr><td><code class="html"><input type="checkbox" name="C1" value="1" /></code></td><td><input type="checkbox" name="C1" value="1" /></td></tr>
- <tr><td><code class="html"><input type="checkbox" name="C2" /></code></td><td><input type="checkbox" name="C2" /></td></tr>
- <tr><td><code class="html"><input type="radio" name="R1" value="1" /></code></td><td><input type="radio" name="R1" value="1" /></td></tr>
-
- <tr><td><code class="html"><input type="radio" name="R1" value="2" /></code></td><td><input type="radio" name="R1" value="2" /></td></tr>
- <tr><td><code class="html"><input type="text" name="My Name" value="me" /></code></td><td><input type="text" name="My Name" value="me" /></td></tr>
-
- <tr><td class="hint" colspan="2">The reset input should never be serialized. Prototype and MochiKit get this wrong.</td></tr>
- <tr><td><code class="html"><input type="reset" name="reset" value="NO" /></code></td><td><input type="reset" name="reset" value="NO" /></td></tr>
-
- <tr><td class="hint" colspan="2">Normal <strong>Single</strong> select elements are handled correctly by each of the libraries.</td></tr>
-
- <tr><td><code class="html"><select name="S1"></code> <em>(100 options)</em></td><td>
- <select name="S1">
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- </select>
- </td></tr>
- <tr><td class="hint" colspan="2">Normal <strong>multiple</strong> select elements are handled correctly by each of the libraries.</td></tr>
- <tr><td><code class="html"><select name="S2" multiple="multiple" size="3"></code> <em>(100 options)</em></td><td>
- <select name="S2" multiple="multiple" size="3">
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
-
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- <option value="abc">ABC</option>
- </select></td></tr>
-
- <tr><td class="hint" colspan="2">The following select element has a selected option with no value attribute. The option text value should be submitted.
- <code class="inline">S3=YES</code> is correct. <code class="inline">S3=</code> is incorrect. dojo gets this wrong in IE.</td></tr>
-
- <tr><td><code class="html"><select name="S3"><option selected="selected">YES</option></select></code></td><td><select name="S3">
- <option selected="selected">YES</option>
- </select></td></tr>
- <tr><td class="hint" colspan="2">The following select element has a selected option with a value attribute set to "". <code class="inline">S4=</code> is correct. <code class="inline">S4=NO</code> is incorrect.
- </td></tr>
-
- <tr><td><code class="html"><select name="S4"><option value="" selected="selected">NO</option></select></code></td><td><select name="S4">
- <option value="" selected="selected">NO</option>
- </select></td></tr>
- <tr><td class="hint" colspan="2">The following select element has its <code class="inline">selectedIndex</code> property set to <code class="inline">-1</code> before serialization.
- It should not be submitted. dojo and MochiKit get this wrong.</td></tr>
-
- <tr><td><code class="html"><select name="S5"><option value="NO">NO</option></select></code></td>
- <td><select id="S5" name="S5"><option value="NO">NO</option></select></td></tr>
- <tr><td class="hint" colspan="2">Submit elements should only appear in the query string when they are the element used to submit the form. Only jQuery and dojo get this right.
- YUI always includes the first submit element. Prototype sends all the input submit elements (but not button submit elements).
- MochiKit sends them all.</td></tr>
- <tr><td><code class="html"><input type="submit" name="sub1" value="NO" /></code></td><td><input type="submit" name="sub1" value="NO" /></td></tr>
- <tr><td><code class="html"><input type="submit" name="sub2" value="NO" /></code></td><td><input type="submit" name="sub2" value="NO" /></td></tr>
-
- <tr><td><code class="html"><input type="image" name="sub3" src="submit.gif" value="NO" /></code></td><td><input type="image" name="sub3" value="NO" src="submit.gif" /></td></tr>
- <tr><td><code class="html"><button type="submit" name="sub4" value="NO">NO</button></code></td><td><button name="sub4" type="submit" value="NO">NO</button></td></tr>
-
- <tr><td class="hint" colspan="2">Disabled elements should never be submitted. MochiKit and mootools get this wrong.</td></tr>
- <tr><td><code class="html"><input type="text" name="D1" value="NO" <span class="dis">disabled="disabled"</span> /></code></td><td><input name="D1" type="text" value="NO" disabled="disabled" /></td></tr>
-
- <tr><td><code class="html"><input type="checkbox" name="D2" value="NO" checked="checked" <span class="dis">disabled="disabled"</span> /></code></td><td><input type="checkbox" checked="checked" disabled="disabled" name="D2" value="NO" /></td></tr>
- <tr><td><code class="html"><input type="radio" name="D3" value="NO" checked="checked" <span class="dis">disabled="disabled"</span> /></code></td><td><input type="radio" name="D3" value="NO" checked="checked" disabled="disabled" /></td></tr>
- <tr><td><code class="html"><select name="D4"><option selected="selected" value="NO" <span class="dis">disabled="disabled"</span>>NO</option></code></td><td><select name="D4" disabled="disabled">
-
- <option selected="selected" value="NO">NO</option>
- </select></td></tr>
- <tr><td class="hint" colspan="2">Inputs with a type attribute of something other than<br />
- PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON<br />
- should be treated as TEXT inputs.
- </td></tr>
- <tr><td><code class="html"><input type="bogus" name="TYPE-TEST" value="YES" /></code></td><td><input type="bogus" name="TYPE-TEST" value="YES" /></td></tr>
- <tr><td><code class="html"><input type="search" name="SEARCH" value="YES" /></code></td><td><input type="search" name="SEARCH" value="YES" /></td></tr>
- </table>
- </div></form>
- <p />
- <h1>Notes</h1>
- This test page does not expose serialization problems that occur during an actual form submit. These include:
- <p />
-
- <ul>
- <li>YUI, Prototype and MochiKit do not support input elements of <code class="inline">type="image"</code>.</li>
- <li>dojo does not capture the click coordinates of input elements of <code class="inline">type="image"</code>. However, it does correctly recognize it as the submitting element.</li>
- <li>dojo does not properly support semantic serialization when the form contains an input of <code class="inline">type="image"</code>. When such an element is used to submit
- the form, it will always appear last in the query string regardless of its semantic position. (This is likely a very
- low-percentage use case.)</li>
-
- <li>mootools is not compatible with Prototype and is not included on this test page. A test page that includes mootools can be found <a href="moo.html">here</a>.
- In summary, mootools does not support semantic serialization and it incorrectly submits disabled fields.
- </li>
- </ul>
- <p />
- <h1>Encoding</h1>
- Each of the libraries tested use JavaScript's <code class="inline">encodeURIComponent</code><sup>[2]</sup> function to encode form data.
- Technically, this does not conform to the HTML spec <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1">which
- states</a> the following
- about the <code class="inline">application/x-www-form-urlencoded</code> content type (emphasis added):
- <blockquote>
-
- This is the default content type. Forms submitted with this content type must be encoded as follows:<br />
- <ol>
- <li>Control names and values are escaped. <strong>Space characters are replaced by `+'</strong>, and then reserved
- characters are escaped as described in <a href="http://www.w3.org/TR/html401/references.html#ref-RFC1738">[RFC1738]</a>,
- section 2.2: Non-alphanumeric characters are
- replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character.
- <strong>Line breaks are represented as "CR LF" pairs (i.e., `%0D%0A')</strong>.</li>
- <li>The control names/values are listed in the order they appear in the document. The name is separated
- from the value by `=' and name/value pairs are separated from each other by '&'.</li>
-
- </ol>
- </blockquote>
- While this does not seem to cause any problems, it is interesting and noteworthy.
- <p />
- <h1>Links</h1>
- <ul>
- <li><a href="http://jquery.com">jQuery</a></li>
- <li><a href="http://www.dojotoolkit.com/">dojo</a></li>
-
- <li><a href="http://developer.yahoo.com/yui/">YUI</a></li>
- <li><a href="http://mochikit.com/">MochiKit</a></li>
- <li><a href="http://prototypejs.org/">Prototype</a></li>
- <li><a href="http://mootools.net/">mootools</a></li>
- </ul>
- <div id="footer">
- [1] Timing numerous iterations of the form serialization process is a contrived test case.
- This is not something that would ever be done with a real form (I hope). And this is why there
- is an option of 1 in the iterations combobox - so you can run only a single pass if you like.
- Running numerous iterations simply makes it easier to compare the relative performance
- of the libraries tested.
- <p />
-
- [2] dojo optionally will encode form data in ascii format (using dojo.string.encodeAscii).
- </div>
-</div>
-</body>
-</html>
|