javascript框架原型到jquery

Question

我发现以下脚本显然是使用 javascript 框架原型编写的。

Event.observe(window, 'load', function() {

    Event.observe( 'btnSubmit', 'click', purchaseCD);

    connectToServer();
});

function connectToServer()
{
    new Ajax.Updater(
        { success: 'CD Count', failure: 'errors' },
        'server_side.php',
        {
            method:     'get',
            onSuccess:  function(transport)
            {
                if (parseInt(transport.responseText)) connectToServer();
            }
    });
}

function purchaseCD()
{
    new Ajax.Updater(
        { success: 'CD Count', failure: 'errors' },
        'server_side.php',
        {
            method:     'get',
            parameters: { num: $('txtQty').getValue() }
    });
}

这里有没有人能够将此脚本转换为使用 jQuery 而不是原型？我根本不知道原型，所以我不明白。

Answer 1

Ajax.Updater 将两个容器作为参数 1，它将在其中更新对参数 2 中给出的 URL 的请求的成功或失败响应。

这个脚本的作用是在页面加载时（我在下面将它翻译成 DOMReady，这并不完全相同，而是 jQuery 约定）一个 AJAX 请求被发送到server_side.php。如果它得到一个它理解的响应，它会立即发送另一个请求，以保持会话处于活动状态。

这看起来是个糟糕的设计。如果你要做这样的事情，你肯定希望请求之间有一个超时。

此脚本不太整洁的另一件事是每个 AJAX 请求都由同一页面处理 - server_side.php - 依赖于不同的参数来指示要执行的操作。简单地为不同的操作请求不同的页面似乎更简洁。

$(function() {
    $('#btnSubmit').click(purchaseCD);
    connectToServer();
});

function connectToServer() {
    $.ajax({
        url: "server_side.php",
        success: function(res) {
            $('#CD Count').html(res);
            if(parseInt(res))
                connectToServer();
        },
        error: function(xhr) {
            $('#errors').html(xhr.responseText);
        }
    });
}

function purchaseCD() {
    $.ajax({
        url: "server_side.php",
        success: function(res) {
            $('#CD Count').html(res);
        },
        data: { num: $('#txtQty').val() },
        error: function(xhr) {
            $('#errors').html(xhr.responseText);
        }
    });
}