IE: Sending POST data with AJAX

Question

I'm sending POST data with AJAX :

const form = d.getElementById('form');
form.addEventListener('submit', SendData);

function SendData(e) {
    e.preventDefault();
    var data = e.target.getElementsByTagName('input')[0].value.trim();

    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', function(event){
        console.log(event.target.responseText);
    });

    xhr.addEventListener('error', function(event){
        console.log(event.target.statusText);
    });
    xhr.open('POST', '/db', true);
    xhr.send('data=' + data);
}

But when I use IE11 , server receives data only once in every two requests:

1:

POST http://localhost:99/db HTTP/1.1
Accept: */*
Referer: http://localhost:99/
Accept-Language: ru
Content-Type: text/plain;charset=UTF-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like 
Gecko
Host: localhost:99
Content-Length: 13
Connection: Keep-Alive
Cache-Control: no-cache

data=01234567

2:

POST http://localhost:99/db HTTP/1.1
Accept: */*
Referer: http://localhost:99/
Accept-Language: ru
Content-Type: text/plain;charset=UTF-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like 
Gecko
Host: localhost:99
Content-Length: 13
Connection: Keep-Alive
Cache-Control: no-cache

I noticed, when I use Fiddler for debugging, server receives data every time. Couldn't anybody explain to me this behavior, and how to fix it?

Answer 1

Did you try to use jQuery ajax functionality? This has the advantage that it is working across browsers flawlessly, and needs only one syntax. I know, that most people do not like to use additional frameworks, but this one simplifies coding a lot.

eg:

    $.ajax({
      url:'https://my.server.com/myscript.php,
      type:'post',
      data: {
         var1: "x",
         var2: "y",
      },
      success: function(data) {
         // here goes the data, returned from your php script e.g.
      }
    });