Jquery $.post - From server to client - how does it knows what response to get?

Question

So we have this:

$.post('testeUpdate.php', 'someValue'
        function(dadosResposta) {
            $('#ns-nome').val(dadosResposta.nsName);
            $('#ns-endereco').val(dadosResposta.nsAddress);
        },
"json");

From client to server: Is sends 'sameValue' to testeUpdate.php using POST.

On success, it receives the data returned by the server side script and do something with that on the client side. Correct?

There is something between the Server Side script and this Client Side script that I'm not getting.

Question: How does dadosResposta gets filled with the data returned from the serverside script ? How does it knows? How does it work? Perhaps the question may also be posed: how do jquery knows when something is "on success" ?

Or trying on another way: The server side executes the script, returns some encoded data in json. Until here ok. After this, what happens? How do we jump into the client side part again?

[update] Trying again: I know that: dadosResposta contains whatever the server-side script returns my question is, HOW does it knows about that? How does he do that? [/update]

Thanks a lot, MEM

Answer 1

The jQuery .post function uses an XMLHttpRequest object to access the URL you passed to it. The server responds with either a 200 OK (success) or some other response (presumably failure).

On success, the XMLHttpRequest object has its responseText (or responseXML) property set to the data returned by the server. The behind-the-scenes jQuery function that handles the response then looks at your dataType argument to determine what to do with the returned data. In the case of your example, it attempts to parse it into an object.

Assuming the response is a valid JSON string, it then passes that newly created object to your callback function as its first (and only) argument, which you've named dadosResposta.

That is how jQuery gets your data into dadosResposta.

Edit: Here's some code that's probably vaguely akin to what's going on:

$.post = function([arguments])
{
    var xhr = new XMLHttpRequest(); // not cross browser compatible, but good enough for demonstration
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4 && xhr.status === 200)
        {
            switch (your_dataType)  // check your data type
            {
                case 'json':
                    your_callback(json_decode(xhr.responseText));    // call your function with JSON object
                    break;
                case 'xml':
                    your_callback(xhr.responseXML);    // call your function with XML
                case ... (etc)
            }
        }
    }

    xhr.open('POST', your_URL, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send();
}

Answer 2

The parameter in the callback function (dadosResposta in this case) contains whatever the server-side script returns. For example, if the server side script was just returning the word "completed" in plain text, dadosResposta would be the string "completed".

In this particular case, the data is JSON, which allows the data to be better organized so that specific fields can be accessed as in dadosResposta.nsName.

Answer 3

jQuery knows the call was succesfull when the request returns a http status code of 200. If the server fails to process the request, an error code (ie 500) should be returned.

Answer 4

$.post takes a callback function. That callback takes one argument, which is the data returned from the server. So, in your case, dadosResposta is the data returned from the server.

It knows whether it was successful or not because of the status code in the HTTP header returned (200 OK in this case). You can include a second argument in your callback which will contain the status.

EDIT: It knows because that's how jQuery works. jQuery gets the response, and passes it as a parameter to your callback. If you want to know more about the internals, read up on XMLHttpRequest.