Mostrar resultado en un div con AJAX

[Alexis88]

Hola Federico

El problema está en que no envías un valor a la función, es decir, el formulario no tiene el atributo value como para que intentes enviar su valor, además, el valor de str en la función debe de ser el nombre del archivo hacia el cual enviarás los datos.

Yo te recomiendo hacerlo así:

Código HTML:

<form action="02.php">
    Nombre: <input type="text" name="str" />
    <input type="submit" />
</form>
<div id="cliente"></div>
 

Código Javascript:

var form = document.querySelector("form"),
    cliente = document.getElementById("cliente"),
    ajax = function(url, salida){
        var xhr = window.XMLHttpRequest ? 
                  new XMLHttpRequest() : 
                  new ActiveXObject("Microsoft.XMLHTTP") || 
                  new ActiveXObject("Msxml2.XMLHTTP");
    
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                switch (xhr.status){
                    case 200:
                        salida.innerHTML = xhr.responseText;
                        break;
                    case 404:
                        salida.innerHTML= "La dirección brindada no existe";
                        break;
                    default:
                        salida.innerHTML = "Se ha producido un error: " + xhr.status;
                        break;
                }
            }     
        };
        xhr.send(null);
    };
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    ajax(
        this.action + "?str=" + this.str.value,
        cliente
    );
}, false);
 

Cuando envías los datos de un formulario a otro archivo para procesarlos, se produce el evento submit, el cual debo de cancelar para evitar que se haga la redirección, utilizando para ello el método preventDefault. Luego, ejecuto a la función ajax, a la cual le paso el nombre del archivo al que enviaré los datos (almacenado en el atributo action del formulario) concatenado con el valor escrito en la caja de nombre "str", además, envío el <div> en el que se mostrará el resultado.

En la función, creo el objeto xhr y procedo a realizar la petición asíncrona, mostrando el resultado en el <div>.

Me alegra ver que quieras aprender a hacer esto con código JS nativo antes que con una librería, créeme que aprenderás más.

Saludos