javascript框架原型(prototype)到jquery

Question

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

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 而不是原型(prototype)吗？我根本不知道原型(prototype)，所以我不明白。

Answer 1

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

这个脚本的作用是在页面加载时(我在下面将其翻译为 DOMReady，这不完全相同，但 jQuery 约定)一个 AJAX 请求被发送到 server_side.php。如果它收到它理解的响应，它会立即发送另一个请求，以保持 session 事件。

这看起来是个糟糕的设计。如果您要执行类似的操作，您肯定希望请求之间有一个超时。

此脚本的另一个不太巧妙的地方是每个 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);
        }
    });
}