Sending an XMLHttpRequest in PHP causes a blank array to be returned

Question

Sending an XMLHttpRequest in PHP causes a blank array to be returned

> xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       var jsondata = xmlhttp.responseText;
        console.log(xmlhttp.responseText);
        document.getElementById("jsondata").value = jsondata;


        console.log(innerHTML = jsondata.word);
        document.getElementById("approved").innerHTML = "Thank you! We will get back to you.";
    }
};
xmlhttp.open("POST", url,false);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
xmlhttp.send("a="+a+ "&b="+b);

}

PHP:

<?php
header('Access-Control-Allow-Origin: *');


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');
    }
    exit;
}


$req = file_get_contents("php://input");
$req = json_decode($req);

javascript php ajax

Answer 1

Answer №1

To start, there is a redundancy in sending CORS response headers during a request - this action serves no purpose other than triggering a preflight check due to non-standard headers. Therefore, it is recommended to eliminate the following lines:

xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");

Additionally, the use of onreadystatechange with a synchronous (deprecated) request is not efficient. In the amended code below, the request is made asynchronous and switches to the more contemporary onload.

The comments provided should shed light on the remaining modifications.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText); // parsing JSON response
        console.log(xmlhttp.responseText);
        document.getElementById("jsondata").value = data;
        //console.log(innerHTML = jsondata.word); removed for unclear functionality
    }
};
xmlhttp.open("POST", url, true); // utilizing ASYNCHRONOUS request as per modern standards
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send("a="+a+ "&b="+b);

As for the PHP snippet:

<?php
// Potential removal of pre-flight request! Retaining code just in case
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With, content-type');
    }
    exit;
}
// Placed after conditional exit to prevent duplication in an OPTIONS request
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=UTF-8'); // Optional but courteous
$a = $_POST["a"];
$b = $_POST["b"];
// Returning JSON response requested by client code
echo json_encode(array('result'=>$a + $b));
?>

Answer 2

To start, there is a redundancy in sending CORS response headers during a request - this action serves no purpose other than triggering a preflight check due to non-standard headers. Therefore, it is recommended to eliminate the following lines:

xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");

Additionally, the use of onreadystatechange with a synchronous (deprecated) request is not efficient. In the amended code below, the request is made asynchronous and switches to the more contemporary onload.

The comments provided should shed light on the remaining modifications.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText); // parsing JSON response
        console.log(xmlhttp.responseText);
        document.getElementById("jsondata").value = data;
        //console.log(innerHTML = jsondata.word); removed for unclear functionality
    }
};
xmlhttp.open("POST", url, true); // utilizing ASYNCHRONOUS request as per modern standards
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send("a="+a+ "&b="+b);

As for the PHP snippet:

<?php
// Potential removal of pre-flight request! Retaining code just in case
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With, content-type');
    }
    exit;
}
// Placed after conditional exit to prevent duplication in an OPTIONS request
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=UTF-8'); // Optional but courteous
$a = $_POST["a"];
$b = $_POST["b"];
// Returning JSON response requested by client code
echo json_encode(array('result'=>$a + $b));
?>

Answer 3

Answer №2

It seems like your XMLhttprequest.send is not sending a blank request, but actually values of 'a' and 'b'. I tested your code by setting random values to 'a' and 'b', and found that the $req variable does get populated with the values of 'a' and 'b.

<script>
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://localhost/test/test.php';
    var a= 5;
    var b=6;
  xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsondata = xmlhttp.responseText;
            console.log(xmlhttp.responseText);
            document.getElementById("jsondata").value = jsondata;


            console.log(innerHTML = jsondata.word);
            document.getElementById("approved").innerHTML = "Thank you! We will get back to you.";
        }
    };
    xmlhttp.open("POST", url,false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
    xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
    xmlhttp.send("a="+a+ "&b="+b);

</script>

Upon running this code, I received a=5&b=6. One issue I noticed in your code is that you are not echoing the results. To fix this, add the following:

$req = file_get_contents("php://input");
echo $req;

In response to Jaromanda X's suggestion, it should be noted that there is no JSON data being sent to the PHP script, so trying to decode it would result in errors.

Answer 4

It seems like your XMLhttprequest.send is not sending a blank request, but actually values of 'a' and 'b'. I tested your code by setting random values to 'a' and 'b', and found that the $req variable does get populated with the values of 'a' and 'b.

<script>
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://localhost/test/test.php';
    var a= 5;
    var b=6;
  xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsondata = xmlhttp.responseText;
            console.log(xmlhttp.responseText);
            document.getElementById("jsondata").value = jsondata;


            console.log(innerHTML = jsondata.word);
            document.getElementById("approved").innerHTML = "Thank you! We will get back to you.";
        }
    };
    xmlhttp.open("POST", url,false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
    xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
    xmlhttp.send("a="+a+ "&b="+b);

</script>

Upon running this code, I received a=5&b=6. One issue I noticed in your code is that you are not echoing the results. To fix this, add the following:

$req = file_get_contents("php://input");
echo $req;

In response to Jaromanda X's suggestion, it should be noted that there is no JSON data being sent to the PHP script, so trying to decode it would result in errors.

Sending an XMLHttpRequest in PHP causes a blank array to be returned

Answer №1

Answer №2

Similar questions

Issue in Laravel: Unable to catch exceptions from a specific package using try-catch block

What is the best method for clearing all cookies in PHP?

A basic structure for a JSON array

Selenium encountered an error when trying to execute the 'querySelector' function on the document. The selector provided, my_selector, is not recognized as a valid selector

Guide on launching Selenium within an already open browser using manual settings

What is the best way to choose a key from a discriminated union type?

Guide on merging non-modular JavaScript files into a single file with webpack

Consider utilizing the return statement in a PHP function by incorporating an if statement

React - The ._id received by the Modal inside the map function is incorrect

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

There was an issue locating a declaration file for the module 'clarifai'

Retrieving data from Node.js within an Angular application

Selenium - How to pass a file path to a dynamically generated input element that is not visible in the DOM

Displaying the current time and total time of a custom video player using Javascript

Leveraging useContext to alter the state of a React component

Showing the values of selected checkboxes in a select dropdown - here's how!

Why does PHP external API access fail when requested from a different page on the same domain?

Tips for making an AJAX request using jQuery

Error: It is not possible to assign a value to the Request property of the Object since it only has a getter method

"Encountered npm error: JSON input ended unexpectedly" while trying to install express-mysql-session"