[JS] implementatie van FormData voor IE

[Juup]

FormData is een handig object waarmee je je form aan een XMLHttpRequest kan meesturen, net als bij een gewone form post.
(zie ook Using FormData Objects).

Die FormData wordt zo gebruikt:

JavaScript:

var xhr = new XMLHttpRequest();  
xhr.open("POST", "/submitform");  
xhr.send(new FormData(document.forms[0])); 

Die xhr.send kan dus omgaan met een FormData object.
Nu probeer ik dit ook voor IE < 8 te implementeren maar daar kan je de XMLHttpRequest.prototype.send method niet overriden.

Code zover:

JavaScript:

(function(){

if (!('FormData' in window))
{
    var FD = function(form)
    {
        var result = [];
        for (var i = 0; i < form.elements.length; i++)
        {
            var input = form.elements[i];
            if (input.name && !input.disabled)
            {
                var type = input.type;
                var tagName = input.tagName;
                if (tagName == "SELECT")
                {
                    for (var j = 0; j < input.options.length; j++)
                    {
                        var opt = input.options[j];
                        if (opt.selected)
                            result.push(input.name + "=" + opt.value);
                    }
                }
                else if (type == "checkbox" && input.checked)
                {
                    result.push(input.name + "=on");
                }
                else if (type != "radio" || input.checked)
                {
                    result.push(input.name + "=" + input.value);
                }
            }
        }
        this.result = result;
    };
    FD.prototype =
    {
        toString: function()
        {
            return this.result.join("&");
        },
        append: function(key, val)
        {
            this.result.push(key + "=" + val);
        }
    };
    window.FormData = FD;

    //Change XMLHttpRequest to accept the new FormData
    var originalXHR_send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function(data)
    {
        if (data instanceof FD)
        {
            originalXHR_send.call(this, data.toString());
        }
        else
        {
            originalXHR_send.apply(this, arguments);
        }
    };
}

})();

Heeft iemand een idee hoe dit enigszins netjes voor IE7 (IE6?) te doen?

[crisp]

Je zal denk ik voor IE < 8 XMLHttpRequest compleet moeten herimplementeren in een native JS object; iets als http://www.ilinsky.com/articles/XMLHttpRequest/

Het probleem in IE < 8 is dat XMLHttpRequest geen native object is en dus inderdaad niet netjes mbv prototypes uit te breiden is. Voordeel van een wrapped native implementatie is wel dat je meteen bepaalde browser quirks kan fixen

Overigens is je form-serialisatie incompleet, en vergeet je netjes te encoden (form-serialisatie is overigens nogal tricky)

[ Voor 17% gewijzigd door crisp op 09-09-2011 22:43 ]

[Juup]

crisp schreef op vrijdag 09 september 2011 @ 22:40:
Je zal denk ik voor IE < 8 XMLHttpRequest compleet moeten herimplementeren in een native JS object; iets als http://www.ilinsky.com/articles/XMLHttpRequest/

Hee dat is een goed idee, dat gaan we doen.

Het probleem in IE < 8 is dat XMLHttpRequest geen native object is en dus inderdaad niet netjes mbv prototypes uit te breiden is. Voordeel van een wrapped native implementatie is wel dat je meteen bepaalde browser quirks kan fixen

Yup.

Overigens is je form-serialisatie incompleet, en vergeet je netjes te encoden (form-serialisatie is overigens nogal tricky)

Haha ik realiseerde me toen ik het gepost had dat ik het idd niet escape maar ik moest weg (echt waar!)
Niet de eerste keer
Ik zal 'n complete serialize-implementatie van iemand anders jatten includen dan zijn we daar ook vanaf.

Edit: die van jQuery lijkt dus de enige goede te zijn. Bedankt voor de link.

[ Voor 4% gewijzigd door Juup op 09-09-2011 23:00 ]