Prototype Javascript Framework - Fetching PHP response

So I am using Prototype JavaScript Framework, I have no choice, so other frameworks/library unfortunately will not help.

In brief, using Prototype.js I am sending a request to a PHP page like this:

<input type="button" value="submit by AJAX" onclick="sendRequest();" />
<script>
        function sendRequest(){
            var url = "a_php_page.php";
            var pars = "param={\"some JSON parameters\"}";
            //alert(pars);
            var codeAjax = new Ajax.Request(url, {
                method :'post',
                parameters :pars,
                asynchronous :true,
                onSuccess : function(result){
                    document.write(JSON.stringify(result.responseText));
                }
            });
        }
</script>

and the PHP is like this:

<?php
header('Content-Type:text/plain');
echo "Hello this is a response!!";
?>

I have spent hoursss and yet I cannot get the plain text in the php as a response. I have also tried JSON.stringify(result) and all I see is a rather complex object with request and all kinds of text embedded into it and nowhere does it contains "Hello this is a response!"

Here is JSON.stringify(result):

{
    "request" : {
        "options" : {
            "method" : "post",
            "asynchronous" : true,
    开发者_如何学JAVA        "contentType" : "application/x-www-form-urlencoded",
            "encoding" : "UTF-8",
            "parameters" : "param={\"xxxxxx"]}",
            "evalJSON" : true,
            "evalJS" : true
        },
        "transport" : {
            "statusText" : "",
            "responseText" : "",
            "response" : "",
            "onabort" : null,
            "readyState" : 4,
            "upload" : {
                "onloadstart" : null,
                "onabort" : null,
                "onerror" : null,
                "onload" : null,
                "onprogress" : null
            },
            "onerror" : null,
            "status" : 0,
            "responseXML" : null,
            "onprogress" : null,
            "onload" : null,
            "withCredentials" : false,
            "onloadstart" : null,
            "responseType" : ""
        },
        "url" : "http://xxxxx/xxxxx.php",
        "method" : "post",
        "parameters" : {
            "param" : "{xxxxxx}"
        },
        "body" : "param={xxxxxx}",
        "_complete" : true
    },
    "transport" : {
        "statusText" : "",
        "responseText" : "",
        "response" : "",
        "onabort" : null,
        "readyState" : 4,
        "upload" : {
            "onloadstart" : null,
            "onabort" : null,
            "onerror" : null,
            "onload" : null,
            "onprogress" : null
        },
        "onerror" : null,
        "status" : 0,
        "responseXML" : null,
        "onprogress" : null,
        "onload" : null,
        "withCredentials" : false,
        "onloadstart" : null,
        "responseType" : ""
    },
    "readyState" : 4,
    "status" : 0,
    "statusText" : "",
    "responseText" : "",
    "headerJSON" : null,
    "responseXML" : null,
    "responseJSON" : null
}

If you try this, you are not able to get a plain text result from PHP?

onSuccess : function(result){
    $('some_id').update(result.responseText);
}

result.responseText should just be a string representing everything that was returned from your PHP script back to prototype's Ajax.Request.

The problem with document.write() is it writes out where the script executes but on a callback from an asynchronous action that is... where? I can't be sure so prefer to name an element to write to.

function sendRequest() {
    var url = "a_php_page.php";
    new Ajax.Updater('element_id', url, {
        parameters: { param: "some value" },
        insertion: 'bottom'
    });
}

Also, I like to pass an object to parameters because Prototype can then encode the data in the best way - it is less work & worry for you.

When debugging AJAX get something like Firebug and watch the network tab, filter by XHR (XmlHttpRequest) and your PHP output will be listed along with the HTTP status code. The status code is important because if it isn't "200" then it's not successful and the page will not update.

The result dump says "responseText" : "" several times which suggests no content is being returned at all. Make sure to check the content in Firebug too.

result.status is 0. This indicates your Ajax request could not contact the server. Check your URL and network connection.

Interestingly, prototype.js does not treat response code 0 as failure, so you need to test for it:

onSuccess : function(result){
    if (result.status == 0) {
        // report error
    } else {
        // true success, handle response
    }
}