javascript - 对一些 Javascript 聊天室代码进行逆向工程

Question

我正在尝试理解某人为聊天室编写的代码。有一句话我似乎无法理解。这条线在做什么:

params['id'] = r.insertID;

该代码行位于以下代码片段的末尾:

    $('#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;
    });

我目前的理解:

前面的代码在 html 页面加载后运行。当用户提交 ID 为 submitForm 的论坛时，代码安排一个事件处理程序。 。到目前为止，一切都很好。从那里开始，进行了一些验证，最终代码开始实际调用将在聊天室中输出新文本行的函数 chat.addChatLine($.extend({},params)); .

params['id']值稍后将在函数 chat.addChatLine 中使用识别每个<div>....</div>正在将其放入聊天中。

问题:值(value)从何而来？没有全局变量r在 JavaScript 函数之外。从它的外观来看，该值似乎是 null 。我在这里遗漏了什么吗？

代码的原始来源: http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/

Answer 1

r 是 ajax 响应对象，由 tzPOST 提供给回调函数。这个 tzPOST 只是 $.post 的包装器。 。所以 r 是请求的 Web 服务器的 ajax 响应。一些较短版本的代码以获得更好的示例:

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

如果您在 scripts.js 文件中搜索 tzPOST 函数，您将看到它仅使用 jQuery 的 $.post功能。开发人员使用它来为请求 URL 提供速记和中心点:

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

在 php/服务器端，响应通过以下行在 ajax.php 中设置:

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

Chat::submitChat 函数位于 Chat.class.php 文件中。它将所有内容插入数据库并返回数据库的行 ID。

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
    );
}

现在params['id']的值为r.insertID，witch是插入数据的数据库行id。

<小时/>

为了了解 r 从何而来，我们看一下 tzPOST 函数内的 $.post。这是 jQuery 的 $.ajax 函数的别名。因此，我们也可以使用 $.ajax 来代替 $.post。

那么r来自哪里应该更清楚了。

// 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
    }
});

所以r只是一个内部名称，由ajax请求传递。您可以轻松重命名r:

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