Calificación:
  • 2 voto(s) - 3 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Aprender AJAX – Hola Mundo!
#1
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


Código:
<!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:


Código:
xhr = new XMLHttpRequest();
xhr.open("GET","page1.php",false);
xhr.send();


La funcion xhr.open tiene como parametros:
  1. El tipo de peticion, puede ser GET o POST

  2. La url a la que se va a realizar la peticion.

  3. 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){}





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.
#2
EL AJAX se esta usando mas que todo en estos ultimos años, antes para realizar cualquier accion se tenia que actualizar la pagina y eso generaba perdida de otras informaciones en otros campos, ahora con ajax solo realizas una peticion y se envia al servidor sin mover nada de la pagina


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  APORTE, quieres aprender HTML5? GonzaloMacedo 1 114 19-08-2018, 11:40 AM
Último mensaje: fercol
  Material para aprender programación C++ Posits 8 206 06-05-2018, 05:36 PM
Último mensaje: brettavz
Sonrisa Login->html+js+ajax+php wpadilla 2 303 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 1,073 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  Las bases de datos más grandes del mundo Smithcanal 3 420 06-06-2017, 04:16 PM
Último mensaje: easy english
Bombilla [Tutorial] Aprender AJAX – Procesar un Formulario con XMLHttpRequest amner 1 324 14-03-2017, 03:07 PM
Último mensaje: Carlos Mendoza
  [Tutorial] Aprender Git desde cero habacuc78 0 303 03-11-2016, 02:10 AM
Último mensaje: habacuc78
  [Tutorial] Aprender AS3: Variables Jvh_22 1 332 11-10-2016, 04:08 PM
Último mensaje: efbsfcd
  [pedido] tutoriales para aprender css sondeo 10 1,038 04-01-2016, 01:22 PM
Último mensaje: Taquion
  Todos deberían aprender a programar habacuc78 19 1,026 23-12-2015, 08:50 AM
Último mensaje: AbaddonOrmuz



Usuarios navegando en este tema: 1 invitado(s)