X-Domain Post using XMLHttpRequest

Question

I have the following block of code:

console.log(1);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://anothersite.com/deal-with-data.php');
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            console.log(2);
            xhr.onreadystatechange = function () {
                console.log(3);
                if (this.status == 200 && this.readyState == 4) {
                       console.log(4);
                       xhr.send("formType="+thisFormType+
                        "&mediaCode="+3478+
                        "&car="+carID+
                        "&title="+$('#title').val()+
                        "&firstname="+$('#firstname').val()+
                        "&surname="+$('#lastname').val()+
                        "&tel="+$('#telephone').val()+
                        "&email="+$('#emailaddress').val()+
                        "&postcode="+$('#postcode').val()+
                        "&add1="+$('#add1').val()+
                        "&add2="+$('#add2').val()+
                        "&add3="+$('#add3').val()+
                        "&town="+""+
                        "&county="+""+
                        "&optin-post="+$('#optin-post').attr('checked')+
                        "&optin-tel="+$('#optin-tel').attr('checked')+
                        "&optin-email="+$('#optin-email').attr('checked')+
                        "&optin-sms="+$('#optin-sms').attr('checked')+
                        "&tarID="+targetID+
                        "&campID="+campaignID+
                        "&subID="+subjectID
                    );
                    console.log(5);
                }
            }
            console.log(6);

So, everything fires except for the xhr.onreadystatechange - I never get the console.log(4) - I have enabled Access-Control-Allow-Origin in PHP and the htaccess as well as trying a veritable plethora of Javascript post functions.

The problem is, as a requirement, I need to post data from a form on a server that has no support for Server side languages - to another domain to handle the data.

Any ideas? It's driving me insane!

edit: I've also tried it with $.ajax

$.ajax({
            url: 'http://anothersite.com/deal-with-data.php',
            type: "post",
            crossDomain: true,
            data: {
                "formType":thisFormType,
                "mediaCode":3478,
                "car":$('#car').val(),
                "title":$('#title').val(),
                "firstname":$('#firstname').val(),
                "surname":$('#surname').val(),
                "tel":$('#telephone').val(),
                "email":$('#email').val(),
                "postcode":$('#postcode').val(),
                "add1":$('#add1').val(),
                "add2":$('#add2').val(),
                "add3":$('#add3').val(),
                "town":"",
                "county":"",
                "optin-post":$('#opt-post').attr('checked'),
                "optin-tel":$('#opt-tel').attr('checked'),
                "optin-email":$('#opt-email').attr('checked'),
                "optin-sms":$('#opt-sms').attr('checked'),
                "tarID":targetID,
                "campID":campaignID,
                "subID":subjectID
            },
            beforeSend: function() {
                $('#submit').val('Sending...').attr('disabled','disabled');
            },
            success: function(data) {
                console.log("success call");
                console.log(data);
            },
            error: function(err) {
                console.log("error call");
                console.log(err);
            }
        });

And now I've tried to enable it in httpd.conf as well: https://serverfault.com/a/378776/36601

Answer 1

You should not pass xhr.send inside xhr.onreadystatechange. Do something like the following:

var xhr = new XMLHttpRequest();

xhr.open('POST', 'myurl', true);
xhr.onload = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // do some cool stuff
        console.log('You got a successfull request');
    }
};

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(); // pass your params here