Un tutorial de Ajax y PHP para principiantes

Escrito por ian low | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Un tutorial de Ajax y PHP para principiantes
Ajax proporciona una perfecta interfaz HTTP entre el navegador y el servidor web PHP. (Jupiterimages/Photos.com/Getty Images)

Ajax es sinónimo de "Asynchronous JavaScript And XML". Permite que el navegador haga peticiones http concurrentes para obtener datos de los diferentes recursos de Internet, incluyendo archivos de texto, archivos de datos como XML o JSON, páginas web e interfaces web a recursos como bases de datos. Ajax se ejecuta en el navegador del usuario en el equipo local a través del objeto XMLHttpRequest. Cuando se utiliza junto con una aplicación de servidor web escrita en PHP, uno puede construir aplicaciones web a partir de cualquier requisito de datos. Este tutorial te guiará a través de los fundamentos de la creación de una interfaz Ajax PHP.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Servidor web con PHP

Lista completaMinimizar

Instrucciones

  1. 1

    Copia el siguiente código y pégalo dentro de Bloc de notas. Guárdalo como "test.php". Observa que el archivo PHP no hace otra cosa que imprimir los valores que recibe a través de los parámetros "Obtener", "Postear" y "Encabezado" de la petición HTTP. El parámetro "Get" se especifica como parte de la URL. El parámetro "Encabezado" está usando el método "setRequestHeader ()" que es parte del objeto XMLHttpRequest Ajax. El parámetro "Postear" se pasa a través de mensajes de formularios HTML o enviados como parámetros en el método Ajax "send ()". Estos son los tres métodos en los que los parámetros pueden pasarse de Ajax para PHP.

    <?php echo "<li>\$_GET['getval1'] is ".$_GET['getval1'].".<br/>"; echo "<li>\$_GET['getval2'] is ".$_GET['getval2'].".<br/>"; echo "<li>\$_SERVER['HTTP_X_HEADERVAL'] is ".$_SERVER['HTTP_X_HEADERVAL'].".<br/>"; echo "<li>\$_POST['postval1'] is ".$_POST['postval1'].".<br/>"; echo "<li>\$_POST['postval2'] is ".$_POST['postval2'].".<br/>"; ?>

  2. 2

    Copia y pega el siguiente código en un archivo de Bloc de notas y guárdalo como "test.html". Ten en cuenta que esta página HTML contiene tres enlaces y un elemento div. En la sección "<script>", el objeto "ajax" está instanciado del objeto XMLHttpRequest (). Para los navegadores Internet Explorer anteriores a la versión 7, el objeto "ajax" necesita una instancia de ActiveX. La función "processStateChange ()" no hace otra cosa que ceder los datos de respuesta de objeto Ajax para el elemento div "dv1".

    <html><body> <a href='#a' id='a1'>GET</a><br/> <a href='#a' id='a2'>GET with server header</a><br/> <a href='#a' id='a3'>POST with server header</a> <div id='dv1'></div> <script> var a1=document.getElementById('a1'); var a2=document.getElementById('a2'); var a3=document.getElementById('a3'); var dv1=document.getElementById('dv1');

    var ajax; if(window.XMLHttpRequest){ajax=new XMLHttpRequest(); }else { ajax=new ActiveXObject("Microsoft.XMLHTTP"); }

    function processStateChange(){ try{ dv1.innerHTML=ajax.responseText; }catch(e){ }finally{ } } </script> </body></html>

  3. 3

    Copia y pega el siguiente código en "test.html" por encima de la etiqueta de cierre "</script>". Guarda "test.html" y súbelo junto con "test.php" en el directorio raíz de tu servidor web. Apunta tu navegador a "test.html" en tu servidor web por ejemplo, "http://www.yoursite.com/test.html". Ten en cuenta que al hacer clic en el enlace "GET" abres una petición http Ajax llegar a url "test.php" con los parámetros "getval1" y "getval2". La línea "ajax.onreadystatechange processStateChange =;" se une a la función "processStateChange ()" del estado del objeto "ajax" listo para que esta función se active cada vez que el objeto "ajax" recibe datos de la respuesta a la solicitud. La siguiente línea "ajax.send (null);" ejecuta la petición Ajax. Como se trata de un "get", pasa null en el parámetro. Haz clic en "Get" que aparece en tu navegador. Observa que devuelve los parámetros "Get", que luego son exhibidos en el interior del elemento "dv1" div.

    a1.onclick=function(){ ajax.open('GET','test.php?getval1=a1&getval2=b2'); ajax.onreadystatechange=processStateChange; ajax.send(null); }

  4. 4

    Copia y pega el siguiente código en "test.html" por encima de la etiqueta de cierre "</script>". Guarda "test.html" y súbelo al directorio raíz de tu servidor web, sobreescribiendo la versión anterior. Apunta tu navegador a "test.html" en tu servidor web. Haz clic en el enlace "GET con el servidor de cabecera". Ten en cuenta que esto hace una solicitud Ajax HTTP GET, similar al paso 3 de la parte superior, pero esta vez, se crea un parámetro de encabezado de solicitud llamado "X-headerval" y le asigna el valor "e5" para el parámetro. Esta es una manera útil de enviar datos de mensajería http relacionados con el servidor. Ten en cuenta que el servidor PHP traduce el nombre del parámetro a "HTTP_X_HEADERVAL", es decir, que traduce las letras en mayúsculas, inserta el prefijo "HTTP" y convierte los guiones "-" en caracteres de subrayado "_". La "X" en "x-headerval" indica un parámetro de la petición de reencabezado no oficial.

    a2.onclick=function(){ ajax.open('GET', 'test.php?getval1=c3&getval2=d4'); ajax.setRequestHeader('X-headerval','e5'); ajax.onreadystatechange=processStateChange; ajax.send(null); }

  5. 5

    Copia y pega el siguiente código en "test.html" por encima del etiqueta de cierre "</script>". Guarda "test.html" y súbelo a tu servidor, sobreescribiendo la versión anterior. Apunta tu navegador a "test.html" en tu servidor web. Haz clic en el enlace "POST con el servidor de cabecera". Ten en cuenta que esto hace una petición http Ajax "Post" en lugar de una petición "GET". Ten en cuenta que todavía puedes pasar parámetros url y encabezado HTTP en la petición post. Esto es exactamente lo mismo que enviar un formulario HTML convencional, excepto que se realiza de forma asincrónica utilizando Ajax. Esta es una manera ideal de pasar datos ocultos en el servidor, como los detalles del formulario introducido por el usuario o los datos relacionados con la funcionalidad. Este es un ejemplo práctico de que esta html está disponible bajo Recursos.

    a3.onclick=function(){ ajax.open('POST', 'test.php?getval1=f6&getval2=g7'); ajax.setRequestHeader('X-headerval','h8'); ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); ajax.onreadystatechange=processStateChange; ajax.send('postval1=i9&postval2=j10'); }

Consejos y advertencias

  • Para comprobar el estado de tu petición Ajax, prueba el valor de las propiedades de las extensiones ".readyState", ".state" y "."stateText". Los valores "readyState" van desde "0" y que representa "no inicializado" hasta "4", que representa "completado". La propiedad "state" muestra "404" para una solicitud que ha fallado, y "200" para una solicitud exitosa. ".stateText" presenta la misma información utilizando texto explicativo.
  • Para ver el encabezado de la respuesta del servidor web, puedes llamar al método "getAllResponseHeaders ()" como en "alert (ajax.getAllResponseHeaders ());".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles