HOWTO · jQuery

Tipo de datos $.Ajax en jQuery

Este tutorial demuestra el uso del tipo de datos $.ajax en jQuery.

En esta página

$.ajax usa la opción dataType para indicar el tipo de respuesta que espera recibir tu código. Esta opción afecta a la forma en que jQuery procesa la respuesta una vez recibida. Es distinta de contentType, que describe el formato de los datos enviados en el cuerpo de la solicitud. Por ejemplo, una solicitud puede enviar JSON y esperar una respuesta de texto; elige cada opción según la dirección a la que se aplica.

Qué significa dataType en $.ajax

Asigna a dataType una cadena como "json" o "html". El valor indica el formato de respuesta que el manejador de éxito está preparado para usar. No es un tipo MIME: usa "json" en lugar de "application/json". Si omites la opción, jQuery puede inferir cómo procesar la respuesta a partir de su tipo de contenido. Si tu aplicación depende de un formato concreto, especificar el tipo esperado deja clara esa intención.

El servidor aún debe devolver contenido que coincida con el formato solicitado. Asignar dataType: "json" no convierte un texto de respuesta arbitrario en JSON válido. Del mismo modo, contentType no determina cómo se analiza la respuesta.

Asignar dataType en una solicitud básica de $.ajax

Coloca la opción en el objeto de configuración que pasas a $.ajax. Sustituye la URL de ejemplo por un endpoint de tu aplicación. Este ejemplo autónomo de JavaScript muestra un objeto de configuración e imprime el tipo de respuesta esperado; no llama a $.ajax ni envía una solicitud de red.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const request = {
  url: "/api/employees",
  method: "GET",
  dataType: "json"
};
console.log(`${request.method} ${request.url}: expecting ${request.dataType}`);

Salida:

El bloque de salida muestra el tipo de respuesta esperado; su etiqueta visible permanece en inglés porque el bloque se conserva byte por byte.

GET /api/employees: expecting json

En una aplicación que carga jQuery, pasa esa configuración a $.ajax y luego procesa la respuesta analizada en success o en una devolución de llamada de una promesa. Si la solicitud envía un cuerpo, asigna a contentType el formato de ese cuerpo y usa data para su valor. No añadas un tipo de contenido para el cuerpo a una solicitud GET sin cuerpo si no hay un motivo para hacerlo.

Elegir un tipo de respuesta

Elige el valor según la respuesta que tu aplicación necesite procesar:

  • "xml" se usa para un documento XML que tu código inspeccionará o procesará.
  • "html" se usa para un fragmento o documento HTML que tu código utilizará como marcado. Trata el marcado recibido como contenido no confiable, salvo que tu aplicación cuente con una estrategia segura para manejarlo.
  • "script" se usa cuando se espera evaluar la respuesta como JavaScript. Úsalo solo con una fuente confiable y cuando sea apropiado evaluar un script remoto.
  • "json" se usa para datos estructurados que tu código utilizará como valor de JavaScript, por ejemplo, un objeto o un arreglo.
  • "jsonp" se usa para un endpoint JSONP que devuelve una respuesta envuelta en una llamada de retorno. Es un mecanismo de respuesta distinto, no una forma general de hacer que cualquier endpoint JSON funcione entre dominios.
  • "text" se usa para una cadena de texto sin formato que tu código procesará por su cuenta.

La opción debe coincidir con la respuesta real del endpoint. Si el formato de respuesta o el comportamiento del servidor no coincide con lo esperado, investiga la respuesta y la solicitud en lugar de cambiar la opción al azar.

Ejemplos de cada tipo de respuesta

Cada línea siguiente es un objeto de configuración ilustrativo de $.ajax, no una solicitud ejecutada. Las rutas de los endpoints son marcadores de posición: sustitúyelas por una URL que devuelva el formato indicado y añade el manejo de éxito que necesite tu aplicación.

  • XML: $.ajax({ url: "/placeholder.xml", method: "GET", dataType: "xml" }) espera una respuesta XML que tu código pueda inspeccionar o procesar.
  • HTML: $.ajax({ url: "/placeholder.html", method: "GET", dataType: "html" }) espera marcado; aplica una estrategia segura para manejar el HTML recibido.
  • Script: $.ajax({ url: "/trusted-script.js", method: "GET", dataType: "script" }) se usa para JavaScript que se pretende evaluar. Úsalo solo con una fuente confiable y cuando sea apropiado evaluar un script remoto.
  • JSON: $.ajax({ url: "/api/employees", method: "GET", dataType: "json" }) espera datos estructurados, como un objeto o un arreglo, para el manejador de éxito.
  • JSONP: $.ajax({ url: "/jsonp-capable-endpoint", method: "GET", dataType: "jsonp" }) requiere un servidor compatible con JSONP que devuelva el formato de llamada de retorno que espera el cliente.
  • Texto: $.ajax({ url: "/status", method: "GET", dataType: "text" }) espera una cadena de texto sin formato para que tu código la procese o la muestre.

Estos ejemplos muestran cómo se combina cada opción con un marcador de posición de endpoint adecuado. No implican que los endpoints existan ni que se haya enviado una solicitud.

Análisis, caché y comportamiento entre dominios

El análisis de la respuesta, el comportamiento de la caché y el manejo entre dominios pueden depender de la versión de jQuery y del contexto de la solicitud. Estos ejemplos no garantizan un resultado concreto para JSON mal formado o vacío, el almacenamiento en caché de scripts ni la conversión entre JSON y JSONP. Consulta la documentación de la versión que utiliza tu aplicación y confirma que el endpoint admite el tipo de respuesta elegido.

JSONP no es intercambiable con JSON normal: requiere un endpoint diseñado para devolver una respuesta envuelta en una llamada de retorno. Una solicitud de origen cruzado también depende del comportamiento del navegador y del servidor; elegir "json" por sí solo no concede acceso entre orígenes. Si una solicitud falla, inspecciona el cuerpo y los encabezados de la respuesta, la consola del navegador y la configuración del servidor; luego compáralos con el tipo que espera tu código.