现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单及创建与表单格式相同的数据提供了遍历。下面的代码创建了一个FormData对象,并向其中添加了一些数据。
var data = new FormData(); data.append("name", "Nicholas");
这个append()方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。而通过向FormData构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对儿:
var data = new FormData(document.forms[0]);
创建了FormData的实例后,可以将它直接传给XHR的send()方法,如下所示:
<form id="user-info"> <label for="user-name">Name:</label><input type="text" id="user-name" name="user-name" /><br /> <label for="user-email">Email:</label><input type="text" id="user-email" name="user-email" /><br /> <input type="button" value="Submit" onclick="submitData()" /> </form> <script type="text/javascript"> function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { if (typeof arguments.callee.activeXString != "string") { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"]; for (var i = 0, len = versions.length; i < len; i++) { try { var xhr = new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; return xhr; } catch (ex) { //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("NO XHR object available.") } } function submitData() { var xhr = createXHR(); xhr.onreadystatechange = function (event) { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("post", "postexample.php", true); var form = document.getElementById("user-info"); xhr.send(new FormData(form)); } </script>
postexample.php文件代码:
<?php header("Content-Type: text/plain"); echo <<<EOF Name: {$_POST['user-name']} Email: {$_POST['user-email']} EOF; ?>
使用FormData的方便之处体现了不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。
支持FormData的浏览器有Firefox 4+、Safari 5+、Chrome和Android 3+版WebKit。