18 julio, 2020 / #Tutoriales

Qué es Ajax y Como Funciona

Como usar ajax con django y que es

Seguramente habrás escuchado hablar de Ajax y posiblemente lo viste en acción aunque muchas veces no fuiste conciente de ello.

Las búsquedas en tiempo real o (autocompletado) normalmente usan Ajax. Seguro lo viste por ejemplo en el sitio web de Google.

Cuando empezas a tipear en la barra del buscador algunas veces habras visto como aparecen resultados (sugerencias) antes de que vos termines de tipear.

buscador de google

Otro ejemplo de cuando usaste Ajax es cuando te estás registrando en un sitio web, un script chequea si el usuario que introduciste está disponible antes que completes el resto del formulario.

¿Por qué usar Ajax?

Ajax usa un modelo de procesamiento asincrónico 🤣 Ehhh ¿Qué es eso? Bueno en palabras sencillas significa que el usuario puede seguir haciendo otras cosas en el sitio web mientras el navegador está esperando que el servidor le mande los datos para cargarlos, eso se traduce en una experiencia de usuario muchos más rápida.

Una vez que la página se termino de cargar, si quisieras actualizar lo que el usuario ve en la ventana del navegador, normalmente deberías refrescar la página completa. Esto significa que el usuario tendrá que esperar hasta que la página completa vuelva a descargarse y ser renderizada por el navegador.

Con Ajax, si queres actualizar una parte del sitio web, podes actualizar solo el contenido de un elemento. Esto se hace captando un evento ( como cuando el usuario hace click en un link o envia un formulario) y haciendo una petición del nuevo contenido desde el servidor usando una petición asíncrona.

Mientras los datos están cargando, el usuario puede seguir interactuando con el resto de la página. Luego, una vez que el servidor respondió, un evento especial de Ajax va activar otra parte del script que lee los nuevos datos que fueron traidos desde el servidor y actualiza solo esa parte de la página en cuestión.

Como no necesitas refrescar la página entera, los datos van a cargar más rápido y el usuario puede seguir usando el resto de la página mientras se espera que cargue esa parte.

¿Cómo Funciona Ajax?

Cuando usamos Ajax, el navegador realiza una petición a el servidor. Este luego procesa la respuesta del servidor y muestra los datos dentro de la página.

representación de como funciona ajax

¿Cómo implementar Ajax con Django?

Bueno para ver como usamos Ajax en una aplicación de Django vamos a crear la famosa TODO app.

Pasos:

  1. Crear un entorno virtual.
  2. Instalar Django.
  3. Creamos el proyecto con nombre «todo» (podes ponerle cualquier nombre).
  4. Creamos una app con nombre «todos» (otra vez podes usar cualquier nombre).
  5. Agregar la app al settings de django.
  6. Crear un archivo «urls.py» para la app todos y agregar este al «urls.py» general.
  7. Crear modelo para las tareas.
  8. Crear view para listar todas las tareas.
  9. Crear template para listar las tareas.
  10. Crear formulario para agregar las tareas.
  11. Crear tarea usando ajax.

Creando el entorno virtual

Esto ya explique en otra entrada del blog así que te dejo el enlace si no sabes que es y como crear un entorno virtual.

Usamos este comando:

virtualenv env -p python3

Luego activamos:

source env/bin/activate

Instalando Django

Para esto usamos manejador de paquetes pip:

pip install django

Creando el proyecto

Usamos el comando:

django-admin startproject todo .

No se olviden de agregar el punto al final para que el proyecto se cree en la carpeta actual sino les va a crear una nueva carpeta y dentro el proyecto.

Creamos la app

Para esto vamos a usar el comando:

django-admin startapp todos

Agregamos la app «todos» a la lista de apps en el archivo settings

Para abrimos el archivo settings y nos dirigimos INSTALLED_APPS:

django todo app

Creamos el archivo «urls.py» en la app «todos» y luego agregamos este al «urls.py» general

Bueno ahora creamos el archivo urls.py en la carpeta todos:

Importamos el path y las views desde el modulo views.py. Luego creamos la lista de urls, aun no hemos creado la view index, pero de igual forma ya agregamos para poder agregar este archivo al urls.py general. El app_name nos sirve para identificar entre otras apps que tengamos, en este caso como tenemos una no necesitariamos.

Bueno ahora para agregar este archivo urls.py vamos a abrir en la carpeta todo el archivo general urls.py y hacemos lo siguiente:

Django viene por defecto con el path del admin site que el administrador. Nosotros vamos a agregar los paths de la app todos y para eso importamos include y agregamos el path que esta arriba del admin. Dejando vacío el string del primer parametro de path le indicamos que en la raiz queremos que se encuentre esta app, osea «http://localhost:8000/«.

Creando el modelo para Task

Ahora tenemos que crear el modelo para las tareas para ello vamos abrir en la carpeta todos el archivo models.py y agregamos lo siguiente:

Para que django cree este modelo como una tabla en la base de datos necesitamos correr el comando de makemigrations y luego migrate:

python manage.py makemigrations todos

Luego migrate:

python manage.py migrate

Para poder ingresar por el administrador necesitamos crear un super usuario para ello corremos el siguiente comando:

python manage.py createsuperuser

Ok, ahora podemos ingresar en: localhost:8000/admin

Si entras asi como esta ahora, vas a ver esto:

Para que aparezca nuestra app necesitamos registrar el model Task en el administrador, para ello hacemos lo siguiente:

Abrimos el archivo admin.py en la app todos y agregamos lo siguiente:

Primero tenemos que importar el modelo Task y luego registramos con admin.site.register.

Luego de esto te debería quedar asi:

Ahora vemos que ya nos aparecio TODOS que es nuestra app y tambien nuestro model Tasks.

Bueno agrega algunas tareas haciendo click en Add para luego poder listar esas tareas.

Creando la view para listar todas las tareas

Ok, ahora abrimos el archivo views.py y creamos nuestra view:

Asi te debería quedar. Primero importamos nuestro Modelo Task y luego creamos una function view la cual recibe como parametro la petición (request).

Dentro de la función recuperamos de la base de datos todas las tareas, luego guardamos en template_name el nombre nuestra plantilla html; le pasamos como contexto la plantilla un diccionario con las tareas y por ultimo retornamos la respuesta con la funcion render.

Creando el Template

Bueno ahora vamos a crear una carpeta templates  en este path: todos/templates/todos/layout.html y dentro el archivo layout.html

Este layout.html lo usamos como base para no repetir codigo.

Es simple porque lo que les quiero mostrar en este tutorial es ajax no css ni html. Simplemente ahi en el body colocamos esas etiquetas entre llaves para indicarle a django que ahi va a estar el contenido.

Luego creamos el archivo index.html.

Bueno en la primera linea con extends importamos el layout.html y luego ponemos las mismas etiquetas de block content tanto para abrir y cerrar (endblock) y dentro ponemos un titulo y despues una lista.

Dentro de la lista recorremos con for las tareas que habiamos enviado por el contexto y luego como resultado nos queda:

En la lista te deberia aparecer las tareas que agregaste en el administrador.

Creando el formulario para agregar las tareas

Hasta ahora solo listamos las tareas que creamos desde el admin. Ahora vamos a hacer que esto se ponga más entretenido y para eso vamos a crear el formulario para poder permitir al usuario agregar tareas.

Para hacer eso tenemos que crear un archivo forms.py en la carpeta todos y adentro agrega este codigo:

Y luego en el index.html agregamos esto:

Esto agrega arriba de la lista.Y te debería quedar asi la pagina:

Luego agregamos en el views.py el siguiente código:

 

Bueno hasta lo que hicimos el usuario ya puede agregar tareas, pero sin usar Ajax, es decir, que cada vez que presionas en agregar, la tarea se agrega a la lista y se recarga la página.

Implementando Ajax

Ahora lo que queremos es que no se necesite recargar la página para agregar la tarea, para ello necesitamos hacer algunos cambios.

Paso 1:

Crear una carpeta static dentro de la app «todos», y creamos un archivo app.js formando la siguiente estructura: todos/static/todos/js/app.js

Paso 2:

Ir a urls.py general osea el archivo que está en la carpeta del proyecto «todo» y agregar el siguiente código:

Lo que está señalado es lo nuevo: necesitamos agregar el static para poder servir manualmente los archivos estáticos (css, js, etc). Documentacion: static-files.

Paso 3:

Ahora agregamos al model Task el siguiente código:

Importamos model_to_dict: lo que hace es convertir un model en un diccionario.

Este método nos devuelve nuestro modelo en forma de diccionario, el cual lo usaremos en el view.

Paso 4:

Modificar la view «index»: en lugar de retornar una redireccion, vamos a retornar un json con la nueva tarea:

Primero importamos JsonResponse:

Luego modificamos el HttpResponseRedirect por lo siguiente:

Paso 5:

Agregamos al form del index.html un id y el data-url de la siguiente forma:

En el data-url usamos la etiqueta «url». Por eso en las urls.py cuando agregamos la vista le pusimos el nombre a la app (app_name) y en el path al final le colocamos un name.

Paso 6:

Agregamos el id a la lista:

Paso 7:

Por último abrimos el archivo que creamos app.js y colocamos lo siguiente:

 

De esta manera logramos implementar Ajax con javascript puro y Django. Asi podes seguir agregandole más funcionalidades a esta app, como borrar, actualizar , cambiar de estado a completado, etc.

Yo corto aca el tutorial porque ya se me hizo muy largo, pero cumplimos con el objetivo de mostrarte como funciona Ajax y como implementarlo con Django.

Hasta la próxima amigos, espero que les haya gustado… 🤣

Aquí esta el código.

 


No hay comentarios.

Dejar un comentario:

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *