# ajax

<details>

<summary>Signatura</summary>

#### Firma

`ajax(urlOrRequest: string | AjaxRequest): Observable<AjaxResponse>`

</details>

## 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

[![Source code](https://github.com/puntotech/rxjs-docu/blob/master/doc/operators/creation/assets/icons/source-code.png)](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: 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:

```
GET https://www.rxjs.es/operadores/creation/ajax.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.