Ajax应用之表单提交

Ajax中提交表单，实际上是手动获取表单的数据，然后对数据进行封装，再通过异步请求对象提交到服务端的过程。

Ajax异步请求对象的创建（可参考http://blog.youkuaiyun.com/lixianlin/archive/2009/12/14/5001923.aspx），需要考虑一下浏览器兼容性，IE和非IE浏览器下创建方式不同。返回结果的处理，其实也就是异步请求对象的回调函数的构建。这两步操作只要明白了异步请求对象的工作原理，实现起来都不难，难的是如何获取表单的数据并对数据进行封装。

获取表单数据的思路：对表单中的所有元素（当然是能够提交数据的元素，不能提交数据的元素无须考虑）进行遍历，获取每个元素的name属性和value值，这其中就需要考虑怎样获取value值，比如象select元素，并不是所有option的value值都有效，只有被选中的option才是有效的，这个不用多说，因为select元素的作用就是那样的。

表单数据封装：换种方法说也说是编码，凡提到数据传输，必然会提到编码，因为只有编码和解码采用同一种机制（或者说协议），才能保证传输数据的正确性。正常情况下的表单提交，如GET方式，默认是采用“application/x-www-form-urlencoded“编码方式对数据封装的，得到的结果是以&连接的键值对的形式，其中的键和值需要进行编码处理，结果形如：key1=val1&key2=val2&key3=val3。可以用encodeURIComponent方法对键和值进行编码，也可以自定义编码方式，只要让服务器操作方便就行。

需要注意的事，对于file文件上传类型，是无法直接通过Ajax来处理的，因为在设计JS的时候，出于安全性考虑，网页中的JS被设计成不能访问文件的。网上所说的Ajax上传文件（严格意义上这种说法是不正确的），都是通过其他方式来上传文件的。

提供一个简单遍历表单数据的方法：

function GetRequestString(frm) { frm=$(frm); var e; var arr=[]; for(var i=0;i<frm.length;++i) { e=frm[i]; if(!e.name || e.disabled) { continue; } if(e.type=='select-one') { arr.push(encodeURIComponent(e.name)+'='+encodeURIComponent(e.options[e.selectedIndex].value)); } else if(e.type=='select-multiple') { for(var j=0;j<e.length;++j) { if(e.options[j].selected) { arr.push(encodeURIComponent(e.name)+'='+encodeURIComponent(e.options[j].value)); } } } else if(e.type=='checkbox' || e.type=='radio') { if(e.checked) { arr.push(encodeURIComponent(e.name)+'='+encodeURIComponent(e.value)); } } else if(typeof(e.value)!='undefined') { arr.push(encodeURIComponent(e.name)+'='+encodeURIComponent(e.value)); } } return arr.join('&'); }

参数为表单对象，或表单的id。

代码中用到的$()函数的定义：

function $(s) { if(typeof(s)=="string") { return document.getElementById(s); } else if(typeof(s)=="object") { return s; } else { return document; } }