> For the complete documentation index, see [llms.txt](https://www.rxjs.es/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.rxjs.es/operadores/creation/ajax.md).
# ajax
Signatura
#### Firma
`ajax(urlOrRequest: string | AjaxRequest): Observable`
## Descripción
Crea un Observable para una petición Ajax a partir de un objeto de petición con la url, cabeceras etc. o a partir de una URL.
## Ejemplos
**Realizar una petición Ajax, y emitir el objeto AjaxResponse completo**
[StackBlitz](https://stackblitz.com/edit/docu-rxjs-ajax?file=index.ts)
```javascript
import { ajax } from "rxjs/ajax";
const ghibliFilmsResponse$ = ajax("https://ghibliapi.herokuapp.com/films");
ghibliFilmsResponse$.subscribe(console.log);
// Salida: AjaxResponse { ...request: {...}, status: 200...}
```
**Emitir únicamente los datos del objeto respuesta**
[StackBlitz](https://stackblitz.com/edit/docu-rxjs-ajax-2?file=index.ts)
```javascript
import { ajax } from "rxjs/ajax";
import { mergeAll } from "rxjs/operators";
const ghibliFilm$ = ajax
.getJSON("https://ghibliapi.herokuapp.com/films")
.pipe(mergeAll());
ghibliFilm$.subscribe(console.log);
/* Salida:
{ ...title: 'Castle in the Sky'... },
{ ...title: 'Grave of the Fireflies'... },
{ ...title: 'My Neighbor Totoro'... }...
*/
```
**Utilizar un objeto de configuración para los parámetros de la petición AJAX**
[StackBlitz](https://stackblitz.com/edit/docu-rxjs-ajax-3?file=index.ts)
```javascript
import { ajax } from "rxjs/ajax";
const ghibliFilmWithHeaders$ = ajax({
url: "https://ghibliapi.herokuapp.com/films",
method: "GET",
headers: {
"Content-Type": "json",
},
body: {
message: "Mensaje personalizado, porque podemos ;)",
},
});
ghibliFilmWithHeaders$.subscribe(console.log);
// Salida: AjaxResponse {xhr: {}, request: {}...}
```
**Realizar varias peticiones Ajax mediante un operador de proyección de orden superior (**[**mergeMap**](https://github.com/puntotech/rxjs-docu/blob/master/operators/transformation/mergeMap/README.md)**,** [**switchMap**](https://github.com/puntotech/rxjs-docu/blob/master/operators/transformation/switchMap/README.md)**,** [**concatMap**](https://github.com/puntotech/rxjs-docu/blob/master/operators/transformation/concatMap/README.md)**,** [**exhaustMap**](https://github.com/puntotech/rxjs-docu/blob/master/operators/transformation/exhaustMap/README.md)**)**
[StackBlitz](https://stackblitz.com/edit/docu-rxjs-ajax-4?file=index.ts)
```javascript
import { from, of } from "rxjs";
import { ajax } from "rxjs/ajax";
import { catchError, mergeMap } from "rxjs/operators";
const filmId$ = of(
"58611129-2dbc-4a81-a72f-77ddfc1b1b49",
"2baf70d1-42bb-4437-b551-e5fed5a87abe"
);
function getGhibliFilm(id: string) {
return ajax.getJSON(`https://ghibliapi.herokuapp.com/films/${id}`);
}
filmId$.pipe(mergeMap((id) => getGhibliFilm(id))).subscribe(console.log);
// Salida: {...title: 'Castle in the Sky'...}, {...title: 'My Neighbor Totoro'...}
```
### Ejemplos de la documentación oficial
**Usar ajax() para obtener el objeto de respuesta que retorna la API**
```javascript
import { ajax } from "rxjs/ajax";
import { map, catchError } from "rxjs/operators";
import { of } from "rxjs";
const obs$ = ajax(`https://api.github.com/users?per_page=5`).pipe(
map((userResponse) => console.log("users: ", userResponse)),
catchError((error) => {
console.log("error: ", error);
return of(error);
})
);
```
**Usar ajax.getJSON() para obtener datos de la API**
```javascript
import { ajax } from "rxjs/ajax";
import { map, catchError } from "rxjs/operators";
import { of } from "rxjs";
const obs$ = ajax.getJSON(`https://api.github.com/users?per_page=5`).pipe(
map((userResponse) => console.log("users: ", userResponse)),
catchError((error) => {
console.log("error: ", error);
return of(error);
})
);
```
**Usar ajax() con un objeto como argumento y el método POST con un retraso de 2 segundos**
```javascript
import { ajax } from "rxjs/ajax";
import { of } from "rxjs";
const users = ajax({
url: "https://httpbin.org/delay/2",
method: "POST",
headers: {
"Content-Type": "application/json",
"rxjs-custom-header": "Rxjs",
},
body: {
rxjs: "Hello World!",
},
}).pipe(
map((response) => console.log("response: ", response)),
catchError((error) => {
console.log("error: ", error);
return of(error);
})
);
```
**Usar ajax() para hacer una llamada a la API, que devuelve un objeto error**
```javascript
import { ajax } from "rxjs/ajax";
import { map, catchError } from "rxjs/operators";
import { of } from "rxjs";
const obs$ = ajax(`https://api.github.com/404`).pipe(
map((userResponse) => console.log("users: ", userResponse)),
catchError((error) => {
console.log("error: ", error);
return of(error);
})
);
```
### Recursos adicionales
[](https://github.com/ReactiveX/rxjs/blob/master/src/internal/ajax/ajax.ts)
[Documentación oficial en inglés](https://rxjs.dev/api/ajax/ajax)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://www.rxjs.es/operadores/creation/ajax.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.