Usar AJAX con jQuery permite que una página web responda de forma dinámica a las in­ter­ac­cio­nes del usuario, pudiendo recuperar o enviar datos al servidor, ac­tua­li­zar contenido y mucho más, sin necesidad de recargar la página completa. Las tra­n­s­fe­re­n­cias así­n­cro­nas de datos con AJAX son fu­n­da­me­n­ta­les para de­sa­rro­llar apli­ca­cio­nes web altamente re­s­po­n­si­vas.

¿Qué son los métodos jQuery.ajax()?

El acrónimo AJAX hace re­fe­re­n­cia a “As­y­n­ch­ro­nous Ja­va­S­cri­pt and XML” (Ja­va­S­cri­pt asíncrono y XML). Tanto el lenguaje de scripting Ja­va­S­cri­pt como la bi­blio­te­ca jQuery incluyen métodos AJAX para el in­te­r­ca­m­bio asíncrono de datos entre un cliente y un servidor. Las so­li­ci­tu­des de jQuery AJAX utilizan in­te­r­na­me­n­te el objeto XM­LH­t­t­pRe­que­st de Ja­va­S­cri­pt. Estas so­li­ci­tu­des HTTP así­n­cro­nas se envían al servidor web a través de AJAX, y el servidor retorna su respuesta en un formato es­pe­cí­fi­co, como XML o JSON. Esto te permite ac­tua­li­zar secciones in­di­vi­dua­les de una página web sin tener que recargar la página completa. Una de las ventajas pri­n­ci­pa­les de AJAX es su ve­r­sa­ti­li­dad y que se puede utilizar, por ejemplo, con jQuery en WordPress.

Consejo

El hosting con espacio ilimitado de IONOS te ofrece la po­si­bi­li­dad de publicar tu proyecto web personal en línea, ya sea tu primera apli­ca­ción jQuery, un blog o tu propio foro. IONOS te ofrece espacio de al­ma­ce­na­mie­n­to económico que incluye un dominio y una dirección de correo ele­c­tró­ni­co.

¿Cuáles son los métodos de jQuery.ajax()?

Para entender cómo funcionan los métodos .ajax(), es im­po­r­ta­n­te tener un co­no­ci­mie­n­to básico de jQuery. Por lo tanto, te re­co­me­n­da­mos consultar el tutorial de jQuery antes de ade­n­trar­te en AJAX.

  • ajax(): envía so­li­ci­tu­des HTTP así­n­cro­nas al servidor
  • get(): envía una solicitud HTTP GET para cargar datos del servidor
  • post(): envía una solicitud POST de jQuery AJAX para enviar datos es­pe­cí­fi­cos al servidor
  • getJSON(): envía una solicitud GET de jQuery AJAX al servidor y espera la respuesta en formato JSON
  • getScript(): envía una solicitud HTTP GET para obtener y ejecutar un archivo Ja­va­S­cri­pt desde un servidor
  • load(): envía una solicitud HTTP para cargar contenido HTML o de texto desde el servidor y vi­n­cu­lar­lo a elementos del DOM
Consejo

Con la API de IONOS podrás gestionar tus productos de hosting de IONOS de forma cómoda y segura. Al utilizar esta API, recibirás una clave de acceso que te permitirá utilizar las diversas fu­n­cio­na­li­da­des que ofrece. Además, en­co­n­tra­rás do­cu­me­n­ta­ción detallada en la página de in­fo­r­ma­ción sobre las API de IONOS para de­sa­rro­lla­do­res.

Ejemplo de uso de los métodos de jQuery.ajax()

jQuery.ajax() también se puede combinar con las funciones clásicas de jQuery, como jQuery.click(), jQuery.append() y jQuery.each().

En el siguiente ejemplo, obtenemos el texto “Este es un ejemplo de jQuery AJAX” de la URL /jquery/getdata, que se introduce como primer argumento en el método jQuery.ajax(). Como segundo parámetro uti­li­za­mos una función callback que procesa la respuesta del servidor e introduce los datos en la etiqueta p del DOM. El método .ajax() envía au­to­má­ti­ca­me­n­te una solicitud GET al servidor cuando se produce el evento click en el botón “btn”. Luego, el texto se muestra en el navegador.

<!DOCTYPE html>
                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata',    // request url
                {
                success: function (data, status, xhr) {     // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="Enviar solicitud jQuery AJAX" />
     <p></p>
</body>
</html>
html

El resultado de este código es el siguiente:

Este es un ejemplo de jQuery AJAX
text
Consejo

Deploy Now de IONOS te permite desplegar páginas web estáticas y apli­ca­cio­nes de una sola página di­re­c­ta­me­n­te desde Github. El proceso es sencillo: conecta tu re­po­si­to­rio a Deploy Now y realiza los cambios mediante el comando push. Deploy Now detecta au­to­má­ti­ca­me­n­te una gran variedad de fra­me­wo­r­ks y configura tu proyecto en co­n­se­cue­n­cia. Optimiza tu flujo de trabajo con Deploy Now Me­m­be­r­ship.

Ir al menú principal