FormData

现代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。