Migración de código Prototype al framework jQuery

Los frameworks javascript cambian con el tiempo y algunos dan paso a otros. Este es el caso para el framework Prototype que ha sido suplantado en los últimos años por jQuery.

Véamos en este ejemplo las diferencias para llamar a una función Ajax de tratamiento de un formulario de contacto minimalisto.
El script de procesamiento en el lado del servidor se llama processForm.php. Devuelve una cadena de caracteres empeciendo por 'ack' si todo va bien o 'err' si se encontró un error, después un separador (':::') y por último el mensaje para mostrar. La función javascript displayMessage aquí utilizada mostrará el mensaje de manera diferente dependiendo de su tipo, pero no será desarrollada.

Nosotros esmeramos aquí a destacar las diferencias como las similitudes entre los dos códigos, así no vamos a tratar volverles demasiado específicos a sus respectivos frameworks, con la idea de facilitar la migración de un marco al otro.

Prototype

function sendContactForm(email, subject, message) {
    new Ajax.Request('processForm.php', {
        method: 'post',
        parameters: {
            email: email,
            subject: subject,
            message: message
        },
        onSuccess: function(transport){processSendContactForm(transport.responseText)}
    });
}

function processSendContactForm(response) {
    if (response != '') {
        var tmp = response.split(':::');
        // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
        displayMessage(tmp[0], tmp[1]);
    }
}

jQuery

var sendContactForm;
$(document).ready(function(){
    $(function() {
        sendContactForm = function(email, subject, message) {
            $.ajax({
                type: "POST",
                url: "processForm.php",
                cache: false,
                data: "email=" + email + "&subject=" + subject + "&message=" + message,
                success: function(response){
                    // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
                    displayMessage(tmp[0], tmp[1]);
                }
            });
        }
    });
});

La diferencia notable entre las dos implementaciones es la compacidad relativa del código jQuery. Cuando Prototype necesita dos funciones, una para el envío de la consulta y otra para su tratamiento, jQuery sólo necesita una.

La función sendContactForm está definida como una variable javascript fuera del bloque $(document).ready con el fin de poder llamarla directamente en el código HTML (ejemplo: <form onsubmit="sendContactForm($('#email').val(), $('#subject').val(), $('#message').val())" />).

Como lo muestra este ejemplo, la migración de Prototype para jQuery es relativamente fácil para las funciones Ajax. Es el mismo para las funciones de visualización sencillas administradas por Scriptaculous de un lado y jQuery del otro.

Portage de code de Prototype à jQuery (en francés)
Porting Prototype code to jQuery (en inglés)
Portabilidade de código Prototype para jQuery (en portugués)