Jquery contiene funciones flexibles para hacer AJAX, hay peticiones GET y POST en esta ocasión usaremos GET.
AJAX sirve principalmente para hacer peticiones al servidor y recibir respuesta dinámicamente, es decir sin recargar la pagina.
Este artículo es parte de la Guía de Desarrollo de Sistemas con PHP y MySQL Aprende a cerar un CRUD y las herramientas necesarias para empezar a crear tus propios sistemas. Ver la Guía Completa →
El uso de AJAX tiene usos infinitos, desde cargar datos dinámicamente desde bases de datos remotas, enviar datos, conectarse a webservices.
También muchos servicios pueden conectarse, desde redes sociales hasta métodos de pago bancarios y/o paypal, entre otros.
Peticiones GET
Las peticiones GET utilizan dichas peticiones por HTTP, para utilizar las peticiones GET de jquery, primero necesitamos descargar jquery desde https://jquery.com/ con la versión jquery.min.js es suficiente.
Es necesario incluir la libreria jquery a nuestra pagina.
<script src=”jquery.min.js”></script>
Para hacer una petición al servidor vamos a hacer lo siguiente:
$.get("archivo.php","datos serializados", function(data){
console.log(data);
});Donde:
archivo.php: es el archivo al cual le enviaremos la petición, puede ser PHP a nuestro propio servidor u otro tipo de url de algún servicio o archivo json.
datos serializados: son los datos en formato para ser enviado por petición GET, pueden ser por ejemplo nombre de usuario, identificadores, texto de búsqueda entre otros. Los datos normalmente llevan el siguiente formato: dato1=valor1&dato2=valor2&dato3=valor3
function(data){ … }: es la función que se ejecuta después de ejecutar la petición, el parametro data lleva la respuesta del servidor, puede ser texto cualquiera o algún formato por ejemplo JSON.
Esta es una pequeña introducción a AJAX, en el siguiente post les dare un ejemplo completo, no se lo pierdan.
Consultar una API con Ajax de jQuery
Vamos a hacer un pequeño ejemplo donde vamos a consultar la pokeapi, la api de pokemon.
$(document).ready(function(){
$.get("https://pokeapi.co/api/v2/pokemon/ditto","", function(data){
console.log(data);
});
});
Consultamos los datos del Poemon Ditto y la pokeapi nos va adevolver un JSON con toda la informacion de Ditto.