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

Reverse engineering some Javascript Chatroom code

本文关键字：逆向工程 代码 聊天室 Javascript      更新时间：2023-09-26

我正在努力理解某个人为聊天室编写的代码。有一句话我似乎无法理解。这条线路在做什么：

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>。

问题：价值来自哪里？javascript函数之外没有全局变量r。从外观上看，该值似乎是null。我是不是遗漏了什么？

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

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，开关是插入数据的数据库行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;
});

正如我已经评论过的，r是响应对象。

tzPost代码

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

它内部调用$.post，如果您看到$.post

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

它返回API调用的响应。

因此，在我的理解中，他调用post来保存用户并创建一个唯一的ID，该ID作为r中.post的响应返回，并设置为params['id']

参考

  • $.post
params['id'] = r.insertID;

与相同

params.id = r.insertID;

r是来自post的回调函数的输入参数。它是从服务器发回的数据。

相关文章：