javascript with XMLHttpRequest's open method: using post and its parameters

Question

Users of my website will, ideally, be sending a few hundred posts to a db server over the course of about an hour (basically its an online-experiment). The experiment is implemented in js, so I'm trying to use an XMLHttpRequest object to post the data the script collects.

The thing I'm uncertain about is how to use the POST parameter. I want to set about 8 different key/value pairs to the $_POST variable so it can be accessible to a .php page for processing before sent to the db server. I'm not interested in retrieving any information from the server itself, only sending it (which is why, and I'm not sure whether it's the correct approach, I'm setting the readyState conditional to '1'/open).

Here's the script I'm working with at the moment:

function postData(dataList) {

 var xmlhttp = new XMLHttpRequest();
 var processingUrl = "process_exercise_data.php";
 var POSTBody = "";
 POSTBody+="block_type="+encodeURIComponent(dataList[0]);
 POSTBody+="&block_number="+encodeURIComponent(dataList[1]);
 POSTBody+="&trial_type="+encodeURIComponent(dataList[2]);
 POSTBody+="&trial_number="+encodeURIComponent(dataList[3]);
 POSTBody+="&input_value="+encodeURIComponent(dataList[4]);
 POSTBody+="&output_value="+encodeURIComponent(dataList[5]);
 POSTBody+="&prediction_value="+encodeURIComponent(dataList[6]);
 POSTBody+="&error="+encodeURIComponent(dataList[7]);


 xmlhttp.open("POST",processingUrl,true);
 if (xmlhttp.readyState==4) {
  xmlhttp.send(POSTBody);
 }

}

The main goal is to send the key/value pairs to the .php page using POST while remaining on the current page(simple AJAX request, if I'm not mistaken). Any comments or suggestions are very appreciated!

Remember, all I'm trying to accomplish is having the user, when he/she acts in a certain way under a certain condition (outside of the scope of this function), to call this function and POST this data to the server. A server response text isn't needed.

EDIT:

Now my question is this: Will I still be able to access the $_POST array in at the processing php page? Here's an example:

$block_type = $_POST['block.type'];

Answer 1

You don't want to set request headers. What you want is to send request body along. And the body should be like

'block_type='+encodeURIComponent(dataList[0])+'&block_number='+encodeURIComponent(dataList[1])

etc. Guess you got the idea. Body is what you pass to the send() method of XMLHTTPRequest object.

Answer 2

You must call send before readyState will change.

Replace

xmlhttp.open("POST",processingUrl,true);
if (xmlhttp.readyState=4) {
  xmlhttp.send(POSTBody);
}

with

xmlhttp.open("POST", processingUrl, false);
xmlhttp.send(POSTBody);

If you want to handle a response, add define xmlhttp.onreadystatechange:

xmlhttp.open("POST", processingUrl, false);
xmlhttp.onreadystatechange = function () {
  if (this.readyState === 4) {
    // handle response
  }
};
xmlhttp.send(POSTBody);

Edit: I would also like to mention that = is not the JavaScript equality operator, it's the assignment operator. Use === for equality checking and == for type-converting equality checking.

Answer 3

Consider using jQuery, it will make your task so much easier. Using the jQuery.post method you only have to provide the data hash, you don't have to worry about serialization, correct escaping or readyState.