# jQuery AJAX: cómo funciona la transferencia asíncrona de datos

Usar AJAX con jQuery permite que una página web responda de forma dinámica a las interacciones del usuario, pudiendo recuperar o enviar datos al servidor, actualizar contenido y mucho más, sin necesidad de recargar la página completa. **Las transferencias asíncronas de datos** con AJAX son fundamentales para desarrollar aplicaciones web altamente responsivas.

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

El acrónimo AJAX hace referencia a “Asynchronous JavaScript and XML” (JavaScript asíncrono y XML). Tanto el lenguaje de scripting JavaScript como la biblioteca jQuery incluyen métodos AJAX para el intercambio asíncrono de datos entre un cliente y un servidor. Las solicitudes de jQuery AJAX utilizan internamente el **objeto XMLHttpRequest** de JavaScript. Estas solicitudes HTTP asíncronas se envían al servidor web a través de AJAX, y el servidor retorna su respuesta en un formato específico, como XML o JSON. Esto te permite actualizar secciones individuales de una página web sin tener que recargar la página completa. Una de las ventajas principales de AJAX es su versatilidad y que se puede utilizar, por ejemplo, con [jQuery en WordPress](https://www.ionos.com/es-us/digitalguide/hosting/blogs/wordpress-jquery/).

Consejo El [hosting con espacio ilimitado](https://www.ionos.es/alojamiento/espacio-web "Espacio web con IONOS") de IONOS te ofrece la posibilidad de publicar tu proyecto web personal en línea, ya sea tu primera aplicación jQuery, un blog o tu propio foro. IONOS te ofrece espacio de almacenamiento económico que incluye un dominio y una dirección de correo electrónico.

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

Para entender cómo funcionan los métodos .ajax(), es importante tener un conocimiento básico de **jQuery**. Por lo tanto, te recomendamos consultar el [tutorial de jQuery](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/jquery-tutorial-de-integracion-y-primeros-pasos/) antes de adentrarte en AJAX.

- **ajax()**: envía solicitudes HTTP asíncronas 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 específicos 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 JavaScript desde un servidor
- **load()**: envía una solicitud HTTP para cargar contenido HTML o de texto desde el servidor y vincularlo a elementos del DOM

Consejo Con la [API de IONOS](https://developer.hosting.ionos.mx "API de IONOS para desarrolladores") 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 funcionalidades que ofrece. Además, encontrarás documentación detallada en la página de información sobre las [API de IONOS para desarrolladores](https://developer.hosting.ionos.mx/docs "API de IONOS para desarrolladores").

## 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()](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/jquery-click/), [jQuery.append()](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/jquery-append/) y [jQuery.each()](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/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 utilizamos 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 automáticamente una solicitud GET al servidor cuando se produce el evento click en el botón “btn”. Luego, el texto se muestra en el navegador.

```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>
<div class="hash d-none" hidden>hash_c0a9b32a1068d4e1d48ccfad5db35af8b1062fce</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

El resultado de este código es el siguiente:

```text
Este es un ejemplo de jQuery AJAX
```

Consejo [Deploy Now](https://www.ionos.es/alojamiento/deploy-now "Despliegues automáticos con IONOS") de IONOS te permite desplegar páginas web estáticas y aplicaciones de una sola página directamente desde Github. El proceso es sencillo: conecta tu repositorio a Deploy Now y realiza los cambios mediante el comando push. Deploy Now detecta automáticamente una gran variedad de frameworks y configura tu proyecto en consecuencia. Optimiza tu flujo de trabajo con Deploy Now Membership.


This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/jquery-ajax/](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/jquery-ajax/) for AI/LLM consumption.