How to I post a value through the XMLHTTPRequest Object?

Question

I have a set of links dynamically generated in a table. Each of the rows has a unique "id" property on it's tag. The goal is to get XMLHTTPRequest to tell the page 'deletepost.php' which record to remove from an outside database.

It changes a hidden input value to the value of the row (a number), and then submits that form

    <script type="text/javascript">
        var http = false ;

        // instance the request object!!!!
        if(navigator.appName == "Microsoft Internet Explorer") {
          http = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
          http = new XMLHttpRequest();
        } 
        /////////////////////////////////////////////////

        function rdel(num) {
        document.getElementById("pid_to_del").value = num; 
        //this element is a hidden <input> tag. this line changes the value.

        http.open("POST", "deletepost.php", true); //this _SHOULD_ post the form 
        http.onreadystatechange = function() {

         if(http.readyState == 4) {
            $("tr#r" + num).fadeOut("slow"); // jquery fadeout animation
            alert(http.responseText); // this alerts whatever deletepost.php says
         }      
        }

        http.send(null);
    } 


</script>

This function rdel() is called by one of the links, which looks like this:

<a href="javascript:rdel('7');"> delete </a>

This is what deletepost.php looks like:

<?php
   print_r($_POST);
?>

The page that makes the request alerts:

Array ( )

An empty array. :( Why?!

Answer 1

Two things here, the first is that you actually have to put your post string (very similar to a query string) into the

http.send(null);

call. So you would do:

http.send('field1=value1')

Secondly, in order for to actually notify the server that there are values being posted, you must set the content type for your request using:

http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Hope that helps

EDIT:

I see now that you are trying to use this request to sent a serialized copy of an html form to the server asynchronously. Javascript does not contain the functionality to do this, but certain libraries and plugins (such as JQuery and AjaxForm) do.

For your example, however, you should be able to accomplish this using:

http.send('pid_to_del=' + pid);

Answer 2

The quickest fix would be:

where you open the XMLHttpRequest object: http.open("POST", "deletepost.php", true) change the url to be "deletepost.php?number="+num

then in you php page change the POST to a GET. $number = $_GET['number']

POST allows you to send large amounts of parameters/options around but unless your numbers are going to be more than 140 characters long, this will make no difference. There appears to be a common mis-conception that POST is more secure than GET, simply because it seems more obvious how to get a browser to manipulate the post variable. However, it is a very very small stretch to do the same thing with POST variables so security should not depend on POSTing rather than GETting. There's nothing wrong with using POST except that you don't seem to be able to get it to work easily. I would never do this directly in javascript. I would always use something like jquery. You could replace the whole script with the following and it would work in most browsers:

function rdel(num) {
    $.post("/webroot/deletepost.php", {number: num},
        function(dat){
            $("tr#r" + num).fadeOut("slow"); // jquery fadeout animation
            alert(dat.responseText); // this alerts whatever deletepost.php 
    });
}

by the way, in your selector $('tr#r'+num), the tr is unnecessary since the id's on a page are unique so the result will be the same as $('#r'+num) but would take longer to calculate the selector. Reference by id is the fastest, the former finds all tr tags and then finds the id within that collection, rather than using the 'native' getElementById function by just using id in the selector. In short, don't make jquery do anything you don't need it to do ;)