AJAX es una tecnologia que nos permite muchas cosas, en el transcurso de una serie de 3 a 5 articulos les voy a enseñar aspectos basicos y medio-avanzados de esta tecnolgia.
En este articulo les voy a explicar cosas basicas de AJAX y ejemplos basicos y en siguientes articulos les mostrare mas cosas.
AJAX significa Asynchronous Javascript and XML, osea Javascript y XML asincrono, entendamos que tambien HTML es de alguna forma XML.
Bueno las posibilidades de AJAX principalmente son cargar contenido de otros archivos en el archivo principal, y siempre es necesario estar en un entorno de servidor web, en mi caso yo trabajo con LAMPP, pero la base de los navegadores web es Apache.
El problema que intenta resolver AJAX es evitar que se recarguen los contenidos, por ejemplo, en una aplicacion web normal cada vez que se ejecuta una accion mediante enlaces o formularios se recurre a operaciones POST o GET y hay recargas de pagina.
Con AJAX se garantiza que para el envio y recepcion de datos no se crearan conexiones que interrumpan la conexion principal, sino que se crean peticiones que pueden alterar total o parcialmente el contenido de la pagina principal, pero sin recargar la pagina.
No se si me entendieron, un ejemplo clasico seria en facebook, cuando publicamos un estado se publica el estado y se guardan los datos, pero nunca se recarga toda la pagina, tambien cuando le damos Like a alguna publicacion, no se recarga la pagina, sin embargo en esas operaciones estan sucediendo peticiones al servidor web que son transparentes para nosotros.
Hay 2 forma de usar AJAX, sincrono y asincrono, por el momento usaremos AJAX sincrono y llegado el momento hablaremos de AJAX asincrono.
Ejercicio
Para este ejercicio usaremos 3 archivos:
- index.php – Es el archivo principal, aqui se cuenta con los botones para accionar el llamado a las paginas, el contenedor para mostrar los archivos y el codigo Javascript para darle funcion a los botones.
- page1.php – Es la pagina 1, esta pagina se puede modificar el contenido por lo que ustedes quieran.
- page2.php – Es la pagina 2, esta pagina se puede modificar el contenido por lo que ustedes quieran.
Archivo index.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ejemplo de AJAX #1</title> | |
| </head> | |
| <body> | |
| <h1>Ejemplo de AJAX #1</h1> | |
| <a href="#" id="cargar1" onclick="cargar1()">Cargar pagina 1</a> | |
| <a href="#" id="cargar2" onclick="cargar2()">Cargar pagina 2</a> | |
| <div id="contenedor" style="border: 1px black solid;"> | |
| <h1>El contenido se agregara AQUI</h1> | |
| </div> | |
| <script> | |
| function cargar1(){ | |
| xhr = new XMLHttpRequest(); | |
| xhr.open("GET","page1.php",false); | |
| xhr.send(); | |
| con = document.getElementById("contenedor"); | |
| con.innerHTML = xhr.responseText; | |
| } | |
| function cargar2(){ | |
| xhr = new XMLHttpRequest(); | |
| xhr.open("GET","page2.php",false); | |
| xhr.send(); | |
| con = document.getElementById("contenedor"); | |
| con.innerHTML = xhr.responseText; | |
| } | |
| </script> | |
| <h3>Powered by <a target="_blank" href="http://evilnapsis.com/">Evilnapsis</a></h3> | |
| </body> | |
| </html> |
Visto esto, el codigo que da vida al AJAX es lo siguiente:
[code language=”javascript”]xhr = new XMLHttpRequest();
xhr.open("GET","page1.php",false);
xhr.send();
La funcion xhr.open tiene como parametros:
- El tipo de peticion, puede ser GET o POST
- La url a la que se va a realizar la peticion.
- Un valor booleano para especificar si la peticion es asincrona, true= asincrona, false= sincrona.
Luego hacemos el llamado a xhr.send() que se encarga de enviar la peticion, la funcion send tiene como parametros, los datos extra que querramos enviar, esto lo veremos mas adelante.
Por ultimo recibimos la respuesta o el contenido del archivo mediante xhr.responseText, tambien es posible conocer si la peticion se ejecuto correctamente haciendo if(xhr.status==200){}
Codigo Fuente
Les dejo los archivos de codigo fuente en el siguiente link:
[sociallocker]Link Google Drive: https://goo.gl/rB9jeA
[/sociallocker]Conclusion
No queda mas que invitarles a hacer pruebas, cambiar valores y obtener sus propios resultados, en este articulo no toque toda la teoria de AJAX pero les aseguro que se las mostrare poco a poco.
Les invito a que me sigan apoyando con sus Likes, comentarios y suscripciones a mi canal de youtube https://youtube.com/evilnapsis/
Tambien se pueden suscribir al blog en la seccion de “Suscribete a mi Blog”, recuerda debes insertar tu email y luego te llegara un mensaje a tu correo para que confirmes tu suscripcion.
De verdad les agradezco mucho el apoyo que me brindan, Saludos.
Clarificador, muchísimas gracias !
Espero haberte ayudado, saludos!