What is the problem with this ajax(with prototype)?

Question

Hello i have the next code: php side:

<?php
print_r($_POST);
print_r($_GET);
die();
?>

In javascript:

voteAjax = function(typez, actionz, idz){
    new Ajax.Request(
        'http://localhost/reporeade/Vote/Ajax/?rand='+Math.random()*500000, 
        {asynchronous:true, 
         evalScripts:true,
         method:'post',
         parameters:'contentType='+typez+'&action='+actionz+'&id='+idz 
        });
    return false; 
}

And in some part of my html:

<a class="button" onclick="voteAjax('content','up','89');">

You can see im running on localhost... the problem i have is that the POST somehow gets mixed up SOMETIMES, i get the next answer 90% of the time:

Array
(
    [contentType] => content
    [action] => up
    [id] => 89
)

Array
(
    [rand] => 449701.9597706424
)

And the other 10% of the time i get:

Array
(
)

Array
(
    [rand] => 468905.44804602925
)

Now, i have tried everything, changed computer, tried on a server with a full url(thinking maybe localhost was the trouble), read somewhere that using http://localhost/reporeade/Vote/Ajax/?rand= instade of http://localhost/reporeade/Vote/Ajax?rand= solved the trouble but tried both and really cant undertand what would make the post get lost.... any ideas?

Edit: Well after playing with all this, i got it working(like it is) in our production server, but in all of our wamp instalations it will not work(well fail like 50% of the time). Its really important for me to solve this so we can keep on developing all the ajax functionality of the product, so...

• I tried xampp but its not compatible with our framework
• I tried going to apache 2.0 instead of 2.2 in wamp
• I tried with diferent configurations of the httpd.conf and php.ini

Any ideas of why wamp would fail like this?

Update: I'm sure the problem is the wamp instalation that is not sending the POST correctly some times, any help that would lead to solving this will get the correct answer and the bounty!

Answer 1

I'd suggest installing WireShark and monitoring your HTTP traffic to see if you can isolate the problem that way.

Answer 2

If its a POST request you don't need to set the rand parameter, POST isn't cached, maybe that helps.

EDIT Can't really understand what's causing this without seeing more code in detail. What I would do is:

1) Try passing an object to the parameters attribute like this:

parameters: {
    contentType, typez,
    action: actionz,
    id: idz
}

instead of a string:

parameters:'contentType='+typez+'&action='+actionz+'&id='+idz

2) Why do you need evalScripts ? For purpose of testing remove it.

3) Debug the hell out of this, seems like the problem is with the parameters being sent with Javascript, so use Firebug's console.log() to debug this more in depth.

Answer 3

Try new Date(), instead of random:

voteAjax = function(typez, actionz, idz){
    new Ajax.Request(
        'http://localhost/reporeade/Vote/Ajax/', 
        {asynchronous:true, 
         evalScripts:true,
         method:'post',
         parameters:'contentType='+typez+'&action='+actionz+'&id='+idz+'&now='+new Date() 
        });

    //alert("params" + typez.toString() + actionz.toString() + idz.toString());
    return false; 
}

Answer 4

What happens if you use a GET instead. I mean, if you concatenate the other parameters in the URL too? Like this

voteAjax = function(typez, actionz, idz){
    new Ajax.Request(
        'http://localhost/reporeade/Vote/Ajax?'+'contentType='+typez+'&action='+actionz+'&id='+idz+'&now='+new Date(), 
        {asynchronous:true, 
         evalScripts:true,
         method:'post',
         parameters:'' 
        });
    return false; 
}

I think you can use GET.
Hope this help.

Answer 5

try this:

voteAjax = function(typez, actionz, idz){
    new Ajax.Request(
        'http://localhost/reporeade/Vote/Ajax/', 
        {
           parameters: {
             contentType: typez,
             action: actionz,
             id: idz,
             rand: new Date()
           }
        });
    return false; 
}

notice that I've removed the other options since they aren't necesary, due to they are on it's default values :)

asynchronous:true, 
evalScripts:true,      -----> this one is "evalJS" not "evalScripts" :)
method:'post',

yo can see it here http://www.prototypejs.org/api/ajax/options

hope its helps!

Answer 6

Have you tried another version of Prototype? It seems to me, there's a weird bug in constructing the post request body effectively creating invalid (partly) request the server cannot properly parse. Use Fiddler (easy to grasp http sniffer) and see what exactly is being sent to the server.

If this is not the case (I admit it would be really weird if Prototype would be broken), try reading raw post data via the PHP (should be enabled in php.ini). If you can and they are not populated into the $_POST collection, try $_REQUEST instead.

Also, try to consult the following thread, maybe this is your case: http://bugs.php.net/bug.php?id=41349 .

Answer 7

I'm running wampserver, too, so I just tried your code, and I could not reproduce the problem -- I always get the POST values. My install is Apache 2.2.8 and PHP 5.2.6, and I just grabbed the latest prototype.js. My wampserver configuration is pretty much the default.

+1 to Fiddler and/or Firebug. Looking at the raw headers that are being sent will probably be enlightening!

Answer 8

What browser are you using? This fails when using FF and IE? Or only one browser.

Sometime ago I read about IE and Apache gzip module problems. It was occurring only on local installations where a server response was very fast. However your case is different.

It is definitely worth trying WireShark as others already suggested. It isn't that hard. At least you'll known on which side there is a bug.

Answer 9

Maybe some component where the request passes through (Php, webserver, firewall, ...) gets confused that you use a POST request with GET parameters. Does it change anything if you leave out the ?rand=... part?

Answer 10

This is a long shot, but without more information and seeing more of your code I have to ask this so you could rule it out: Could it have something to do with the user double-clicking on the link and creating two rapid requests? (Once upon a time I got bitten by <input type="image" onclick="submit();"> both run the onclick and submitted the form)

function test() {
    voteAjax('content','up','89');
    voteAjax('content','up','89');
}

(have your link call the test function above)

Normally you want to use asynchronous connections since that won't lock the UI, however this is a case where you could try synchronous to make sure you only do one request at the time. (a nonblocking solution is to set a flag or disable the link/button while the request is processed)

BTW, I too suggest that you send an object instead of a string as the parameters, since prototype will URIEncode it and put all & at the right places.

Answer 11

I also suggest you should monitor your network traffic through Wireshark:

1. Start it on either server or client.
2. Start capturing your network interface.
3. Use the AJAX and
4. when it fails stop the capture and
5. type http in Wireshark to help you find the request.
6. Right-click and select "Follow TCP Stream".

If POST data in the request does not show up it's something with the browser. You could check HTTP headers for possible errors (like GZip in conjunction with IE has been mentioned before).

Maybe your WAMP setup uses Fast-CGI or similar to call PHP, so it is not using the actual PHP module for Apache? Sometimes this can cause such errors if not set up correctly. If you do not necessarily need it I recommend switching to PHP module or look for possible configuration mistakes.

What WAMP is it, anyway? Pre-configured or custom?

Answer 12

I'd do the Ajax call like this:

voteAjax = function(typez, actionz, idz){
    var rndVal = Math.random()*500000;

    new Ajax.Request( 'http://localhost/reporeade/Vote/Ajax/', {
         method:  'post',
         parameters: {contentType: typez, action: actionz, id: idz, rand: rndVal}, 
         onSuccess:  function(response) {
               //do stuff
         },
         onFailure:  function() {
               alert('Something went wrong.');
         }
        });
     return false;
  }