Dos Formulario con Ajax

[Alexis88]

Ten una función Ajax que puedas reutilizar y según sea el formulario cuyos datos vayan a ser procesados, ejecutas dicha función y le envías los datos respectivos.

Código Javascript:

var forms = document.getElementsByTagName("form"),
    ajax = function(json){
        var data = (function(){
                for (var i = 0, serialized = [], l = json.data.length; i < l; serialized.push(json.data[i].name + "=" + json.data[i].value), i++);
                return serialized.join("&");
            })(),
            xhr = window.XMLHttpRequest ? 
                  new XMLHttpRequest() : 
                  new ActiveXObject("Microsoft.XMLHTTP") || 
                  new ActiveXObject("Msxml2.XMLHTTP");
 
        if (json.type.toUpperCase() == "GET"){
            json.url += "?" + data;
            data = null;
        }
 
        xhr.open(json.type || "GET", json.url, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                switch (xhr.status){
                    case 200:
                        if (json.success) json.success(xhr.responseText);
                        else console.log(xhr.responseText);
                    break;
 
                    case 404: default:
                        if (json.error) json.error(xhr.status);
                        else console.log(xhr.status);
                    break;
                }
            }
        };
 
        if (json.type.toUpperCase() == "POST") 
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    };
 
for (var i = 0, l = forms.length; i < l; i++){
    forms[i].addEventListener("submit", function(event){
        event.preventDefault(); //Cancelo el envío de los datos
        ajax({
            url: this.action, //Dirección hacia la cual se enviarán los datos
            type: this.method, //Método elegido para el envío de datos
            data: this.elements, //Los elementos del formulario
            success: function(response){ //En caso de recibir una respuesta exitosa
                console.log(response);
            },
            error: function(textStatus){ //En caso de producirse un error
                console.log("Error: " + textStatus);
            }
        });
    }, false);
}
 

Lo que hace esta función es recibir un conjunto de datos agrupados en un objeto literal, al estilo del método Ajax de jQuery, luego, convierte al conjunto de datos del formulario en una query string y evalúa el tipo de método elegido; si es "GET", concatena la query string a la URL, caso contrario, la envía mediante el método send.

Si deseas, puedes ampliar su funcionalidad, esta función la creé para mis proyectos personales y aunque ahora es más amplia, esta es la estructura base.

Saludos