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