Saltar al contenido
Home » Blog » Ajax en jQuery

Ajax en jQuery

con de jquery

AJAX es un acrónimo de Asynchronous JavaScript and XML (JavaScript y XML asíncronos) y esta tecnología nos ayuda a cargar datos desde el servidor sin necesidad de actualizar la página del navegador.

JQuery es una gran herramienta que proporciona un rico conjunto de métodos AJAX para desarrollar aplicaciones web de próxima generación.

Carga de datos simples

Es muy fácil cargar cualquier dato estático o dinámico usando JQuery AJAX. JQuery proporciona el método load() para hacer el trabajo.

Sintaxis

Esta es la sintaxis simple del método load().

[selector].load( URL, [data], [callback] );

A continuación se describen todos los parámetros:

  • URL – La URL del recurso del lado del servidor al que se envía la solicitud. Puede ser un script CGI, ASP, JSP o PHP que genera datos dinámicamente o desde una base de datos.
  • data – Este parámetro opcional representa un objeto cuyas propiedades se serializan en parámetros debidamente codificados para ser pasados a la petición. Si se especifica, la petición se realiza utilizando el método POST. Si se omite, se utiliza el método GET.
  • callback – Una función de callback invocada después de que los datos de la respuesta se hayan cargado en los elementos del conjunto coincidente. El primer parámetro que se pasa a esta función es el texto de respuesta recibido del servidor y el segundo parámetro es el código de estado.

Ejemplo

A continuación, el siguiente HTML con una pequeña codificación JQuery:

<html>
   <head>
      <title>Ejemplo de jQuery</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/resultado.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click en el botón para cargar el archivo /jquery/resultado.html −</p>
		
      <div id="stage" style="background-color:cc0;">
         STAGE
      </div>
		
      <input type="button" id="driver" value="Cargar datos" />
   </body>
</html>

Aquí load() crea una petición Ajax al archivo /jquery/resultado.html de la URL especificada. Después de cargar este archivo, todo el contenido se rellenará dentro del div etiquetado con el ID stage. Asumiendo que nuestro archivo /jquery/resultado.html tiene sólo una línea HTML.

Por ejemplo:

<h1>Este es el resultado</h1>

Cuando se pulse el botón dado, se cargará el archivo result.html.

Obtención de datos JSON

Hay una situación en la que el servidor devuelve una cadena JSON a la llamada. La función de JQuery getJSON() analiza la cadena JSON devuelta y hace que la cadena resultante esté disponible para la función de retorno de llamada como primer parámetro para tomar más acciones.

Sintaxis

Esta es la sintaxis simple del método getJSON().

[selector].getJSON( URL, [data], [callback] );

Aquí está la descripción de todos los parámetros:

  • URL – La URL del recurso del lado del servidor contactado a través del método GET.
  • data – Un objeto cuyas propiedades sirven como pares name/value utilizados para construir una cadena de consulta que se anexará a la URL, o una cadena de consulta preformateada y codificada.
  • callback – Una función que se invoca cuando la petición se completa. El valor de los datos resultantes de digerir el cuerpo de la respuesta como una cadena JSON se pasa como primer parámetro a esta llamada de retorno, y el estado como segundo.

Ejemplo

El siguiente archivo HTML es un pequeño script de JQuery:

<html>
   <head>
      <title>Ejemplo de jQuery</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/resultado.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click en el boton para cargar el fichero resultado.json</p>
		
      <div id="stage" style="background-color:#eee;">
         STAGE
      </div>
		
      <input type="button" id="driver" value="Cargar datos" />
   </body>
</html>

Aquí el método de JQuery getJSON() hace una petición Ajax al archivo URL resultado.json especificado. Después de cargar este archivo, todo el contenido se pasaría a la función callback que finalmente se rellenaría dentro del div etiquetado con el ID stage. Asumiendo que nuestro resultado.json tiene el siguiente contenido:

{
   "name": "María del Monte",
   "age" : "67",
   "sex": "female"
}

Cuando se hace clic en el botón, se carga el archivo resultado.json.

Pasar datos al servidor

Muchas veces se recoge información del usuario y se pasa esa información al servidor para su posterior procesamiento. JQuery AJAX hizo bastante fácil pasar los datos recolectados al servidor usando el parámetro data de cualquier método Ajax disponible.

Ejemplo

Este ejemplo muestra cómo se puede pasar el registro de usuario a un script del servidor web que enviaría el mismo resultado de vuelta y lo mostraríamos.

<html>
   <head>
      <title>Ejemplo de jQuery</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/resultado.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Introduce tu nombre y haz click en el botón:</p>
      <input type="input" i= "name" size="40" /><br />
		
      <div id="stage" style="background-color:cc0;">
         STAGE
      </div>
		
      <input type="button" id="driver" value="Mostrar resultado" />
   </body>
</html>

Este es el código escrito en el script resultado.php.

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Bienvenido ". $name;
   }
?> 

Ahora puedes introducir cualquier texto en el input y luego hacer clic en el botón «Mostrar resultado» para ver lo que has introducido en el formulario.

Métodos de AJAX

Has visto el concepto básico de AJAX usando JQuery. La siguiente tabla enumera todos los métodos importantes de JQuery AJAX que puedes utilizar según tus necesidades de programación.

MétodoDescripción
jQuery.ajax( options )Cargar una página remota mediante una petición HTTP.
jQuery.ajaxSetup( options )Configurar los ajustes globales para las solicitudes AJAX.
jQuery.get( url, [data], [callback], [type] )Cargar una página remota mediante una petición HTTP GET.
jQuery.getJSON( url, [data], [callback] )Cargar datos JSON mediante una petición HTTP GET.
jQuery.getScript( url, [callback] )Carga y ejecuta un archivo JavaScript mediante una petición HTTP GET.
jQuery.post( url, [data], [callback], [type] )Cargar una página remota mediante una petición HTTP POST.
load( url, [data], [callback] )Carga un HTML desde un archivo remoto y lo inyecta en el DOM.
serialize( )Serializa un conjunto de elementos de entrada en una cadena de datos.
serializeArray( )Serializa todos los formularios y elementos de formulario como el método .serialize() pero devuelve una estructura de datos JSON para que puedas trabajar con ella.

Eventos de AJAX

Puede llamar a varios métodos de JQuery durante el ciclo de vida del progreso de la llamada AJAX. Basado en diferentes eventos/etapas los siguientes métodos están disponibles.

Puede recorrer todos los Eventos AJAX:

EventoDescripción
ajaxComplete( callback )Adjunta una función que se ejecuta cada vez que se completa una petición AJAX.
ajaxStart( callback )Adjunta una función para que se ejecute cada vez que se inicie una petición AJAX y no haya ninguna activa.
ajaxError( callback )Adjunta una función que se ejecuta cada vez que falla una petición AJAX.
ajaxSend( callback )Adjunta una función que se ejecuta antes de enviar una petición AJAX.
ajaxStop( callback )Adjunta una función que se ejecutará cuando todas las peticiones AJAX hayan terminado.
ajaxSuccess( callback )Adjunta una función que se ejecuta cada vez que una petición AJAX se completa con éxito.
¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)
Etiquetas:

Deja una respuesta

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