逆向工程一些Javascript聊天室代码

Question

I am trying to understand the code some guy wrote for a chatroom. There is one line that I just can't seem to wrap my head around. What is this line doing:

params['id'] = r.insertID;

The line of code is at the end of the following code snippet:

    $('#submitForm').submit(function(){

        var text = $('#chatText').val();

        if(text.length == 0){
            return false;
        }

        if(working) return false;
        working = true;

        // Assigning a temporary ID to the chat:
        var tempID = 't'+Math.round(Math.random()*1000000),
            params = {
                id          : tempID,
                author      : chat.data.name,
                gravatar    : chat.data.gravatar,
                text        : text.replace(/</g,'&lt;').replace(/>/g,'&gt;')
            };

        // Using our addChatLine method to add the chat
        // to the screen immediately, without waiting for
        // the AJAX request to complete:

        chat.addChatLine($.extend({},params));

        // Using our tzPOST wrapper method to send the chat
        // via a POST AJAX request:

        $.tzPOST('submitChat',$(this).serialize(),function(r){
            working = false;

            $('#chatText').val('');
            $('div.chat-'+tempID).remove();//this is removing the temporary line :)

            params['id'] = r.insertID;
            chat.addChatLine($.extend({},params));
        });

        return false;
    });

MY CURRENT UNDERSTANDING:

The previous code is run after the html page is loaded. The code schedules an event handler for when a user submits a forum with id submitForm . So far so good. From there, a few verifications are done, and eventually the code gets to actually calling the function that will output the new line of text inside the chatroom chat.addChatLine($.extend({},params)); .

The params['id'] value would later be used in the function chat.addChatLine to identify each <div>....</div> that is being placed into the chat.

QUESTION: Where is the value coming from? There is no global variable r outside of the javascript function. From the looks of it, the value would appear to be null . Am I missing something here?

ORIGINAL SOURCE OF THE CODE: http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/

Answer 1

r is the ajax response object, given to the callback function by tzPOST . This tzPOST is just a wrapper for $.post . So r is the ajax response by the requested webserver. Some shorter version of the code for better example:

//                                                   | here is 'r'
//                                                   | as parameter of the callback
//                                                   |
$.tzPOST('submitChat', $(this).serialize(), function(r) {
    params['id'] = r.insertID;
});

If you search for the tzPOST function in the scripts.js file, you will see, that it just uses jQuery's $.post function. The developer uses this to have a shorthand and a central point for the requests URL:

$.tzPOST = function(action, data, callback) {
    $.post('php/ajax.php?action='+action, data, callback, 'json');
}

On the php/server side the response is set in ajax.php by the lines:

$response = Chat::submitChat($_POST['chatText']);
echo json_encode($response);

The Chat::submitChat function is found in the Chat.class.php file. It inserts everything into database and returns the row id of the database.

public static function submitChat($chatText){
    /* someother code here*/

    // save to database and get row id back
    $insertID = $chat->save()->insert_id;

    // return the insert id
    return array(
        'status' => 1,
        // this is later 'r.insertID'
        'insertID' => $insertID
    );
}

Now params['id'] has the value of r.insertID , witch is the databse row id of the inserted data .

---

To understand where r comes from, we take a look at the $.post inside the tzPOST function. This is a alias for jQuery's $.ajax function. So instead of $.post we can use $.ajax too.

Then it should be more clear where r comes from.

// this is exactly the same as the one line used in 'tzPOST'
$.ajax({
    url: 'php/ajax.php?action=' + action,
    data: data,
    dataType: 'json',

    // this is a anonymous callback function
    // it gets griggered whenever the request was successfull
    //
    // the $.ajax will pass the reponse to the anonymous functions first
    // parameter, witch internally is named 'r' now
    success: function(r) {
        // so 'r' is the webservers response
    }
});

So r is only a internal name, passed by the ajax request. You can easily rename r :

//                                                   | now the name is 'foo'
//                                                   |
$.tzPOST('submitChat', $(this).serialize(), function(foo) {
    params['id'] = foo.insertID;
});

Answer 2

As I have already commented, r is the response object.

tzPost code

$.tzPOST = function(action, data, callback) {
  $.post('php/ajax.php?action=' + action, data, callback, 'json');
}

It internally calls $.post and if you see $.post

$.post("ajax/test.html", function(data) {
  $(".result").html(data);
});

it returns response of the API call.

So in my understanding, he is calling post to save user and create a unique ID which is returned as a response of .post in r and is set to params['id']

Reference

• $.post

Answer 3

params['id'] = r.insertID;

is the same as

params.id = r.insertID;

r is the input parameter from the callback function of the post. It is the data that is sent back from the server.