Comunicación Asíncrona en Django con AJAX

Comunicación Asíncrona en Django con AJAX

AJAX, o Asynchronous JavaScript and XML, es una tecnología que permite realizar peticiones al servidor de forma asíncrona, es decir, sin necesidad de recargar la página web. Esto puede ser muy útil para mejorar la experiencia de usuario, ya que permite que la página se mantenga actualizada sin necesidad de esperar a que se cargue toda la página.

Django, un framework web escrito en Python, ofrece soporte para AJAX a través de la biblioteca django.contrib.ajax. Esta biblioteca proporciona una serie de funciones y clases que facilitan el desarrollo de aplicaciones web que utilizan AJAX.

En este tutorial, veremos cómo utilizar AJAX en Django para realizar peticiones al servidor y actualizar el contenido de la página de forma asíncrona.

Creando una aplicación Django

Para comenzar, crearemos una nueva aplicación Django. Para ello, ejecutaremos el siguiente comando en la terminal:

django-admin startproject my_app

Esto creará una nueva carpeta llamada my_app que contiene los archivos necesarios para la aplicación.

Creando una vista AJAX

Para crear una vista AJAX, utilizaremos la clase django.views.generic.View. Esta clase proporciona un método abstracto get que se puede sobrescribir para definir el comportamiento de la vista.

En nuestro caso, crearemos una vista que devuelva una lista de usuarios. La vista se llamará users_list y estará ubicada en el archivo views.py de la aplicación.

Python
from django.contrib.auth.models import User
from django.views.generic import View

class UsersList(View):
    def get(self, request):
        users = User.objects.all()
        return JsonResponse({'users': users})

Esta vista utiliza la función json.dumps() para convertir la lista de usuarios en formato JSON.

Creando un formulario AJAX

Para realizar una petición AJAX a la vista, utilizaremos un formulario. El formulario tendrá un botón que, al ser pulsado, realizará la petición.

El formulario se llamará users_form y estará ubicado en el archivo forms.py de la aplicación.

Python
from django import forms

class UsersForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['submit'] = forms.SubmitField(label='Actualizar')

    def handle_ajax(self, request):
        """
        Realiza una petición AJAX a la vista `users_list`.
        """
        response = requests.get(
            f'{request.META["HTTP_HOST"]}{request.META["PATH_INFO"]}',
            headers={'X-CSRFToken': request.META['CSRF_TOKEN']},
        )
        return JsonResponse(response.json())

Este formulario utiliza la función requests.get() para realizar la petición AJAX. La función recibe como parámetros la URL de la vista y un diccionario con los encabezados HTTP.

Agregando el formulario a la plantilla

Agregamos el formulario a la plantilla base.html de la aplicación.

HTML
<form action="{% url 'users_list' %}" method="POST">
    {% csrf_token %}
    <button type="submit" class="btn btn-primary">Actualizar</button>
</form>

Configurando la aplicación

Agregamos la siguiente línea al archivo settings.py de la aplicación para habilitar AJAX.

Python
AJAX_ENABLED = True

Probando la aplicación

Para probar la aplicación, iniciaremos el servidor de desarrollo de Django con el siguiente comando:

python manage.py runserver

A continuación, abriremos un navegador web y nos dirigiremos a la siguiente URL:

http://localhost:8000

Veremos un formulario con un botón. Al pulsar el botón, se realizará una petición AJAX a la vista users_list. La vista devolverá una lista de usuarios en formato JSON.

Conclusión

En este tutorial, hemos visto cómo utilizar AJAX en Django para realizar peticiones al servidor y actualizar el contenido de la página de forma asíncrona.

A continuación, se presentan algunos consejos para el desarrollo de aplicaciones AJAX con Django:

  • Utilice la biblioteca django.contrib.ajax para facilitar