Peticiones AJAX – Con jQuery.GET

Desde el nacimiento de la WEB2.0, se comenzaron a utilizar nuevas tecnologías en los sitios web, Tecnologías que permitieran una mejor interacción con el usuario, haciendo la navegación más fluida, más rápida y más llamativa, mezclando estas tecnologías se lográ desarrollar una Herramienta que revolucionaria la WEB2.0:

AJAX acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Integrando AJAX a nuestro Proyecto

Para poder integrar Ajax a nuestro proyecto web, puede realizarse desde JavaScript con el manejo del DOM y el XMLHttpRequest. Pero en esta ocasión utilizaremos jQuery, que ya incluye una librería completa para trabajar con Ajax.
A continuación utilizaremos un pequeño ejemplo en donde aremos una petición al servidor (en este caso un servidor php), enviándole dos números y recibiendo el resultado de la suma de estos.
1. Comenzamos por crear un archivo HTML llamado index.html con el siguiente Código.

2. Ahora procedemos a  añadir la función Ajax de jQuery que realizara la petición al servidor. En esta ocasión utilizaremos un método llamado $.GET. Existen una infinidad de métodos y ya en futuros post los iré publicando. Añadimos el siguiente código en el head de nuestro archivo index.html, que quedara de la siguiente manera

3. Ahora procedemos a crear nuestro script .php que realizara la operación en el servidor.

Ahora si nos vamos a nuestro index.html, ya podremos realizar la suma de dos números sin tener que recargar la pá¡gina.

Ver el Ejemplo

Descargar codigo Fuente.

No faltara el que diga, que esto se hace facilmente con JavaScript, pero aclaro que este es solo un ejemplo para mostrar la funcionalidad de AJAX.

 

 

 

Angel Gutierrez Monola

Developer Boy Amante de la tecnología. Apasionado del Béisbol⚾ Fundador de http://Gumonet.com Emprendedor por Pasión Y Lector por distracción.

You may also like...

16 Responses

  1. Alex Rodriguez dice:

    hola
    muy buen ejemplo, pero no sirve el link.
    Puedes corregir el link de descargar o mejor si lo puedes hacer con mysql?

  1. 9 abril, 2014

    […] Esto se puede hacer de muchas maneras, pero la mejor y la que biene bien es utilizando algo de AJAX. Ya en un Post pasado, explique algo sobre esta maravillosa tecnología, pueden verlo aquí […]

  2. 9 abril, 2014

    […] Esto se puede hacer de muchas maneras, pero la mejor y la que viene siempre bien es utilizando algo de AJAX. Ya en un Post pasado, explique algo sobre esta maravillosa tecnología, pueden verlo aquí […]

  3. 6 octubre, 2014

    I love your blog

    I have read this article and enjoyed it

  4. 29 octubre, 2014

    I very much loved your blog

    Just want to say that the article is great.

  5. 29 octubre, 2014

    I very much loved your blog

    Just want to say that the article is great.

  6. 29 octubre, 2014

    I very much loved your blog

    Just want to say that the article is great.

  7. 13 noviembre, 2014

    bankruptcy forms online

    bankruptcy court middle district of florida

  8. 14 noviembre, 2014

    bankruptcy exemptions

    bankruptcy budget worksheet

  9. 14 noviembre, 2014

    bankruptcy filing public record

    bankruptcy definitions

  10. 14 noviembre, 2014

    bankruptcy good faith 363 m evidence

    bankruptcy calculator

  11. 14 noviembre, 2014

    bankruptcy how long on credit report

    bankruptcy bar association

  12. 14 noviembre, 2014

    bankruptcy good faith 363 m evidence

    bankruptcy and foreclosure

  13. 21 noviembre, 2014

    […] lo anterior se puede resolver utilizando la Tecnología de peticiones Asincronas al Servidor AJAX (ver mas…), esto nos permite enviar datos al servidor sin necesidad de recargar la […]

  14. 5 marzo, 2015

    I liked your blog very much.

    I want to thank you for the contribution.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *