javascript - Spring MVC: xml DOM をコントローラーに送信できません

Question

フォーム値から xml を構築しようとしています。以前は、jQuery を使用してビルドしていました。jQuery にはバグがあり、プレーンな JavaScript で XML を構築する必要があります。しかし、フォームを送信すると、ブラウザーがハングし、リクエストがコントローラーに到達しません。
コントローラ

@RequestMapping(value="/save",method=RequestMethod.POST,consumes={"application/json", "application/xml", "text/xml", "text/plain"})
        @ResponseBody public String handleSave(@RequestBody String formData)
        {

            System.out.println("comes here");
            System.out.println(formData);



        return "SUCCESS";

    }

jQuery

$('form').submit(function () {
                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        data: collectFormData(),
                        headers: {
                            "Content-Type":"application/xml"
                        },
                        dataType: 'application/xml',
                        success: function (data) {
                            alert('Success:'+data)
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log('jqXHR:'+jqXHR+'\n'+'textStatus:'+'\n'+textStatus+'errorThrown:'+errorThrown);
                        }
                    });

                    return false;
                });

CollectFormData

function collectFormData()
            {
                $rootElement = $('<FormXMLDoxument/>');
                xmlDoc = document.implementation.createDocument("", "", null);
                root = xmlDoc.createElement($('form').attr('name'));
                $('form').find('div.section').each(function(index, section) {
                    sectionElement = xmlDoc.createElement($(section).attr('name'));
                    $(section).find('input').each(function(i, field) {
                        fieldElement  = xmlDoc.createElement($(field).attr('name'));
                        fieldText=xmlDoc.createTextNode($(field).val());
                        fieldElement.appendChild(fieldText);
                        sectionElement.appendChild(fieldElement);
                    });
                    root.appendChild(sectionElement);
                });
                console.log((new XMLSerializer()).serializeToString(root));
                return root;                    
            }

jQuery を使用して collectFormData を実装すると、すべて正常に機能しますが、要素名のキャメル ケースが失われます。
古い collectFormData

function collectFormData()
            {
                $rootElement = $('<FormXMLDoxument/>');
                $formElement = $.createElement($('form').attr('name'));
                $('form').find('div.section').each(function(index, section) {
                    var $sectionElement = $.createElement($(section).attr('name'));
                    $(section).find('input').each(function(i, field) {
                        console.log($(field).attr('name'));
                        var $fieldName  = $.createElement($(field).attr('name'));
                        $fieldName.text($(field).val());
                        $sectionElement.append($fieldName);
                    });
                    $formElement.append($sectionElement);
                });
                $rootElement.append($formElement);
                console.log('Form XML is '+$rootElement.html());
                return $rootElement.html();                 
            }

jQueryのバグに関する私の質問