FormData

现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单及创建与表单格式相同的数据提供了遍历。下面的代码创建了一个FormData对象，并向其中添加了一些数据。

var data =newFormData();

data.append("name","Nicholas");

这个append()方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对儿：

var data =newFormData(document.forms[0]);

创建了FormData的实例后，可以将它直接传给XHR的send()方法，如下所示：

<formid="user-info">

    <labelfor="user-name">Name:</label><inputtype="text"id="user-name"name="user-name"/><br/>

    <labelfor="user-email">Email:</label><inputtype="text"id="user-email"name="user-email"/><br/>

    <inputtype="button"value="Submit"onclick="submitData()"/></form><scripttype="text/javascript">

    function createXHR(){

        if(typeofXMLHttpRequest!="undefined"){

            returnnewXMLHttpRequest();

        }elseif(typeofActiveXObject!="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 =newActiveXObject(versions[i]);

                        arguments.callee.activeXString = versions[i];

                        return xhr;

                    }catch(ex){

                        //跳过

                    }

                }

            }

            returnnewActiveXObject(arguments.callee.activeXString);

        }else{

            thrownewError("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(newFormData(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。