JQuery Ajax Call funktioniert aber nicht nativ JavaScript

Question

Ich habe zwei AJAX-Aufrufe, eine in nativem JavaScript und eine andere mit JQuery, die ein PHP-Skript aufrufen. Der JQuery funktioniert, aber der JavaScript nicht. Hier geht der Code:

JQuery:

$.ajax({ 
    url: "/Tests/index.php", 
    method: "POST", 
    data: {'Id': "2"} 
}); 

Mutter JavaScript:

var Data = {Id: "2"}; 
XHR = new XMLHttpRequest(); 
XHR.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     console.log(XHR.responseText); 
    } 
} 
XHR.open("POST", "/Tests/index.php", true); 
XHR.setRequestHeader("Content-Type", "application/json"); 
XHR.send(JSON.stringify(Data)); 

PHP Script:

echo var_dump($_POST); 

Der mit JQuery kehrt 2, aber das JavaScript ein, gibt nichts zurück. Alle Daten werden über die Konsole des Webbrowsers angezeigt.

Answer 1

diesen Code Versuchen:

var Data = {"Id": "2"}; 
var XHR = new XMLHttpRequest(); // declared XHR var 

XHR.open("POST", "/Tests/index.php", true); 
XHR.setRequestHeader("Content-Type", "application/json"); 

XHR.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    console.log(XHR.responseText); 
    } 
} 
XHR.send(Data); // sending data without converting to string 

Referenz: https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp