Responder petición al objeto XMLHttpRequest con AJAX

[link01]

Estoy aprendiendo ajax.

Mi objetivo ahora mismo es crear un formulario y al presionar el botón enviar, me salgan los datos enviados en un div.

Este es el codigo html con el formulario creado:

Código HTML:

<h1> Formulario de prueba </h1>
 
    <form method="post" action="">
        <table border="1">
            <tr>
                <td> Nombre </td>
                <td> <input type="text" name="txtNombre" />
            </tr>
            <tr>
                <td> Apellido </td>
                <td> <input type="text" name="txtApellido" />
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button"> Enviar </button>
                </td>
            </tr>
        </table>
    </form>
 
    <div id="datosEnviados"></div>
 

El codigo javascript/ajax

Código Javascript:

<script type="text/javascript">
        var peticion_http = null;
        var READY_STATE_COMPLETE = 4;
 
        function iniciar_xhr(){
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }
        }
 
        window.onload = function(){
            peticion_http = iniciar_xhr();
            btnEnviar = document.getElementsByTagName("button")[0];
            btnEnviar.onclick = enviarPeticion;
        }
 
        function enviarPeticion(){
            nombre = document.getElementsByName("txtNombre")[0].value;
            apellido = document.getElementsByName("txtApellido")[0].value;
 
            query_string = "nombre=" + encodeURIComponent(nombre) +
                           "&apellido=" + encodeURIComponent(apellido) +
                           "&nocache=" +Math.random();
 
 
            peticion_http.onreadystatechange = verDatosRecibidos;
            peticion_http.open("POST","http://localhost/AJAX/formulario.php", true);
            peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            peticion_http.send(query_string);
 
        }
 
        function verDatosRecibidos(){
            if(peticion_http.readyState == READY_STATE_COMPLETE){
                if(peticion_http.status == 200) {
                    alert(peticion_http.responseText);
                }
            }
            
        }
    </script>
 

Por ahora eso funciona, pero el problema es que la propiedad responseText del objeto XMLHttpRequest me trae TODO el contenido del documento, todo el codigo de la pagina completa (que también incluye los datos enviados por post) pero yo solo quiero los datos que se enviaron ¿no hay alguna forma de filtrarlos sin tener que usar XML?

[Nemutagk]

Por ahora eso funciona, pero el problema es que la propiedad responseText del objeto XMLHttpRequest me trae TODO el contenido del documento, todo el codigo de la pagina completa (que también incluye los datos enviados por post) pero yo solo quiero los datos que se enviaron ¿no hay alguna forma de filtrarlos sin tener que usar XML?

A que te refieres con filtrar? xml?, mmm no explicas bien como es que recibe PHP los datos via post, ni como los imprimes (envias la respuesta a XMLHttpRequest), en fin, por lo que entiendo, es que no solo te muestra los datos enviados via POST, si no que te retorna igual el formulario, etc, si es eso, solo es necesario que crees un if donde detecte la petición via post y solo envies lo datos recibidos...

Código PHP:

<?php
if (isset($_POST['nombre'])) {
     //Imprimes de la forma que necesites entregar la respuesta a XMLHttpRequest...
     echo $_POST['nombre'];
}else {
    //aquí todo tu código HTML, formulario, etc...
}
?>
 

[link01]

Gracias.
Vi un tutorial de los de la pagina thenewboston, ellos lo hacen con jquery, pero con ese vídeo entendí mejor.

Lo que pasa es que el responseText siempre trae todo el codigo html. Así que creo que es mejor enviar a otra pagina la petición, procesar en esa página y solo mandar devuelta la respuesta. Así es más sencillo aunque se crearían más páginas.

Otra cosa que estaba haciendo mal es que pensaba que tenía que utilizar los name que le había puesto en el html, pero son los name que mando en el query_string.

Dejo el codigo:

formulario.php

Código Javascript:

<?php
    echo "<pre>";
        print_r($_POST);
    echo "</pre>";
 
?>
 
<html>
<head>
    <title>Formulario</title>
 
    <script type="text/javascript">
        var peticion_http = null;
        var READY_STATE_COMPLETE = 4;
 
        function iniciar_xhr(){
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }
        }
 
        window.onload = function(){
            peticion_http = iniciar_xhr();
            btnEnviar = document.getElementsByTagName("button")[0];
            btnEnviar.onclick = enviarPeticion;
        }
 
        function enviarPeticion(){
            nombre = document.getElementsByName("txtNombre")[0].value;
            apellido = document.getElementsByName("txtApellido")[0].value;
 
            query_string = "nombre=" + encodeURIComponent(nombre) +
                           "&apellido=" + encodeURIComponent(apellido) +
                           "&nocache=" +Math.random();
 
 
            peticion_http.onreadystatechange = verDatosRecibidos;
            peticion_http.open("POST","http://localhost/AJAX/servidor.php", true);
            peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            peticion_http.send(query_string);
 
        }
 
        function verDatosRecibidos(){
            if(peticion_http.readyState == READY_STATE_COMPLETE){
                if(peticion_http.status == 200) {
                    div = document.getElementById("datosEnviados");
                    respuesta = peticion_http.responseText.split(",");
 
                    div.innerHTML = "Nombre: " +respuesta[0] +
                                    "<br/>Apellido: " +respuesta[1];
 
                    alert(peticion_http.responseText);
                }
            }
            
        }
    </script>
 
</head>
<body>
    <h1> Formulario de prueba </h1>
 
 
        <table>
            <tr>
                <td> Nombre </td>
                <td> <input type="text" name="txtNombre" />
            </tr>
            <tr>
                <td> Apellido </td>
                <td> <input type="text" name="txtApellido" />
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button"> Enviar </button>
                </td>
            </tr>
        </table>
 
    <div id="datosEnviados"></div>
</body>
</html>
 

servidor.php

Código PHP:

<?php
    echo $_POST['nombre'];
    echo ",";
    echo $_POST['apellido'];
 
?>
 

[Nemutagk]

A ver, no confundas, responseText tal cual dice su nombre es para indicar y tratar la respuesta como texto por lo tanto Javascript no los tratará como XML, esto no quiere decir que retornará toda la página o solo una parte, nada de eso tiene que ver ya que eso depende de como PHP entregue la respuesta a la petición, recuerda que XMLHttpRequest unicamente funciona como "puente" para realizar peticiones al servidor sin que el navegador tenga que recargar la página, por lo tanto, lo que retorne es explícitamente lo que PHP entregue en tu caso, si PHP retorna toda la página es lo que obtendrás en la respuesta desde ajax...

Así que creo que es mejor enviar a otra pagina la petición, procesar en esa página y solo mandar devuelta la respuesta. Así es más sencillo aunque se crearían más páginas.

Eso depende de como quieras trabajar, pero nada tiene que ver con responseText, pero el problema de que te trae datos que no son de tu utilidad tiene que ver como entrega PHP el resultado al navegador, en tu caso a la petición ajax...

Otra cosa que estaba haciendo mal es que pensaba que tenía que utilizar los name que le había puesto en el html, pero son los name que mando en el query_string.

No, el atributo name es el que le entrega el navegador a PHP para que este le asigne el valor indicado, trabajando con Javascript es mejor usar el atributo ID, aunque esto no quiere decir que este mal como lo estas haciendo, la unica diferencia es que se supone que el valor del atributo ID es unico, por lo tanto no es necesario indicar el index del item a llamar (getElementByName['nombre'][0], el 0 sería el index del item)

[link01]

Y entonces ¿cómo controlo lo que php entrega? ¿con condiciones y ese tipo de estructuras?

[caricatos]

Hola:

Te cuento lo que para mí son buenas prácticas. Para empezar, no depender de javascript en la navegación de las páginas, para eso los formularios deben tener su action, método y enctype correctos y que muestren resultados en la página que tengas reservada para ese cometido (con un botón submit, por supuesto)... luego, si quieres usar Ajax, capturar el evento de envío, y hacerlo con el método Ajax (XMLHttpRequest), cancelando el envío del formulario con return false.

Si quieres no usar otra página, el método que yo suelo usar es añadirle una variable adicional; por ejemplo: ajax=si.

Luego en el servidor escribir la página completa si no se cumple la condición de que exista la variable ajax. En caso contrario formatear solo el resultado de la salida...

Sobre usar XML, al menos yo lo suelo usar y me parece una costumbre acertada cuando se quieran datos estructurados, incluso, el destino del formulario puede ser un XML, y con poco esfuerzo lo puedes dejar bonito con una hoja xsl... Te animo a que te informes. Si quieres una referncia, mira este apunte: Ajax, con X de XML.

Saludos