Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Introducción a AJAX con PHP y formularios
#1
Desde que Gmail apareció, ha cambiado la forma de ver la web. Hoy sabemos que podemos hacer un sitio completo sin la necesidad de recargar la página y sólo cargando las partes que requerimos. La tecnología usada es el XMLHTTPREQUEST, bautizada recientemente con el nombre de AJAX. A manera de ejercicio veremos primero cómo cargar contenido, después cómo interactuar con php y mandar pequeñas porciones de información y finalmente cómo enviar información más grande.

Creando el objeto XMLHTTPREQUEST
Hacer una función genérica es la mejor idea para este modelo. A base de try y catch podemos hacer una función cross-browser:

Código PHP:
function nuevoAjax(){
    var 
xmlhttp=false;
     try {
         
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (
e) {
         try {
             
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (
E) {
             
xmlhttp false;
         }
      }

    if (!
xmlhttp && typeof XMLHttpRequest!='undefined') {
         
xmlhttp = new XMLHttpRequest();
    }
    return 
xmlhttp;


Primer ejemplo; Cargar datos externos.

La función de cargar contenido la definiremos de la siguiente forma:

Código PHP:
function cargarContenido(){
    var 
contenedor;
    
contenedor document.getElementById('contenedor');
    
ajax=nuevoAjax();
    
ajax.open("GET""ejemploajax1.html",true);
    
ajax.onreadystatechange=function() {
        if (
ajax.readyState==4) {
            
contenedor.innerHTML ajax.responseText
        
}
    }
     
ajax.send(null)
}
window.onload= function(){cargarContenido()} 

Hay varias cosas qué checar aquí, primero obtenemos el elemento que tenga como id 'contenedor', después creamos un nuevo objeto ajax, luego es cargar el archivo html por el método GET y lo importante aquí es qué hacer cuando se cargue, esto es onreadystatechange. Readystate 4 significa que ya acabó de cargarlo, 1, 2 y 3 es el progreso y realmente no nos importa. Finalente el método send es realizar la acción y llamar la función en el window.onload. Veamos el ejemplo.
Sencillo, no?

Segundo ejemplo; Envío de datos por el método GET

Lo siguiente es enviar pequeñas cantidades de datos, por ejemplo de un input text con límite a 255 caracteres, esto lo haremos por el método GET. Utilizaremos también la función crearAjax y modificaremos un poco cargarContenido.

La idea es meter un formulario, saber los valores de los input que incluye el formulario y enviarla a php. El código modificado de cargarContenido sería:

Código PHP:
function cargarContenido(){
    var 
t1t2contenedor;
    
contenedor document.getElementById('contenedor');
    
t1 document.getElementById('texto1').value;
    
t2 document.getElementById('texto2').value;
    
ajax=nuevoAjax();
    
ajax.open("GET""ejemploajax2.php?t1="+t1+"&t2="+t2,true);
    
ajax.onreadystatechange=function() {
        if (
ajax.readyState==4) {
        
contenedor.innerHTML ajax.responseText
         
}
    }
    
ajax.send(null)


El archivo php sólo contiene este código:

Código PHP:
<?
    echo "Datos en GET: <pre>";
    print_r($_GET);
    echo "</pre>";

    echo "Datos en POST: <pre>";
    print_r($_POST);
    echo "</pre>";
?>

Ahora sí, veamos el ejemplo.

Tercer ejemplo; Envío de datos por el método POST

Por último y para terminar, enviar datos por el método post. Habrá que cambiar algunas cosas en la función cargarContenido:
Debemos agregar una línea adicional: setRequestHeader especifica qué tipo de datos llegarán al servidor. Asímismo especificamos el método en el método open y ahora sí utilizaremos parámetros para send.

La función quedaría de la siguiente manera:

Código PHP:
function cargarContenido(){
    var 
t1t2contenedor;
    
contenedor document.getElementById('contenedor');
    
t1 document.getElementById('texto1').value;
    
t2 document.getElementById('texto2').value;
    
ajax=nuevoAjax();
    
ajax.open("POST""ejemploajax2.php",true);
    
ajax.onreadystatechange=function() {
        if (
ajax.readyState==4) {
            
contenedor.innerHTML ajax.responseText
         
}
    }
    
ajax.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
    
ajax.send("t1="+t1+"&t2="+t2)


Usaremos el mismo php.

Notas adicionales
Por algún extraño motivo, el objeto que es usado una vez ya no se puede usar otra vez. Por eso en la función cargarContenido siempre se llama a la función para crear un nuevo objeto ajax. Si no entienden de qué hablo, creen el objeto fuera de la función y verán cómo sólo funciona una vez
Enviar y recibir datos con acentos/símbolos extraños es un dolor de cabeza. Básicamente, en php es la utilización de utf8_decode cuando se reciben y de utf8_encode cuando se envían.
#2
muy bueno, me va a servir mucho estaba estudiando ajax


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Sonrisa Login->html+js+ajax+php wpadilla 2 68 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
Bombilla [Tutorial] Aprender AJAX – Procesar un Formulario con XMLHttpRequest amner 1 116 14-03-2017, 03:07 PM
Último mensaje: Carlos Mendoza
  [Tutorial] Aprender AJAX – Hola Mundo! amner 1 124 13-03-2017, 02:46 PM
Último mensaje: manuelxd1010
  INTRODUCCION Y CRUD CON MONGODB khristia 5 402 30-09-2016, 07:08 PM
Último mensaje: Boreas
  GOOGLE MAPS API V3: INTRODUCCION khristia 2 251 16-08-2016, 08:28 PM
Último mensaje: efbsfcd
  GOOGLE CHARTS: INTRODUCCION A LA VISUALIZACION DE DATOS, GRAFICAS, MAPAS Y MAS khristia 2 280 16-08-2016, 08:27 PM
Último mensaje: efbsfcd
  Curso básico de introducción a la programación Posits 1 276 04-08-2016, 02:48 AM
Último mensaje: antony_tj
  Ayuda con Formularios web ex1master 8 610 14-12-2014, 02:35 AM
Último mensaje: ex1master
  Formularios Excel ex1master 2 280 03-12-2014, 10:12 AM
Último mensaje: TheBomberbe
  Introducción a PHP xLukii 0 272 19-06-2014, 12:53 AM
Último mensaje: xLukii



Usuarios navegando en este tema: 1 invitado(s)