Clean, old school ajax

I'm writing a userscript which calls a php script which uses an API to get information and send it back up to the userscript. Because of inconsistent use of javascript libraries on the page the userscript is working on I need to use old school ajax.

So my ajax looks like this

function skLoadXMLDoc(method, url, data) {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
            if(xmlhttp.status == 200){
                console.log(xmlhttp.responseText);
            }
            else if(xmlhttp.status == 400) {
                console.log('There was an error 400');
            }
            else {
                console.log('something else other than 200 was returned ['+xmlhttp.status+']');
            }
        }
    }
console.log(data);
    xmlhttp.open(method, url, true);
    xmlhttp.send(data);
}

Code (markup):

and in the console I see this

So I can see my 62 invoice ids sitting in the data variable but when I ask my php script to var_dump out the $_POST variable I get an empty array.

What do I need to change to get this working?

 

I think I have it nutted out. Found a bit of code that looks like this

var data = new FormData();
data.append('invoice_id', customercodes);

Code (markup):

My customercodes array becomes comma separated which is fine for the data I'm working with.