Affichage de données massives : utiliser les requêtes AJAX ?

Li - 9 mars 2024 à 10:39
BoBot Messages postés 2722 Date d'inscription mardi 4 juillet 2023 Statut Modérateur Dernière intervention 27 avril 2024 - 10 mars 2024 à 18:04

Bonjour,

Je développe actuellement un projet sous Django, où l'objectif est de fournir une interface web qui permet d'afficher diverses informations concernant les vulnérabilités d'un site web et son périmètre d'exposition (pour de la prévention, bien évidemment).

Les scripts qui récupèrent ces informations sont donc lancés en backend, basés sous Python. Ils génèrent des dictionnaires, sous ce format:

{
    "domain1.fr": {
        "sub.domain1.fr": [
            {
                "key": "value",
                "@key": "value",
                "key": "value",
                "key": "value",
                ...
               ]
        }
     },
    "domain2.fr": {
        "sub.domain2.fr": [
            {
                "key": "value",
                "@key": "value",
                "key": "value",
                "key": "value",
                ...
               ]
        }
     }
....
}

Au départ, j'avais configuré Django pour qu'il n'utilise que MariaDB, donc toutes les données étaient stockées dans cette base. Cependant, j'ai modifié un peu l'architecture et je laisse le côté SQL uniquement pour les données d'administration, et j'utilise Elasticsearch pour indexer les données d'analyse. J'ai fait ce choix car ces données n'ont pas de relation, à partir le fait qu'une analyse peut fournir un tas de "clés/valeurs", donc je pense qu'Elasticsearch peut permettre d'optimiser les choses, surtout pour ce qui va suivre.

J'utilise donc des templates pour afficher les données. J'ai diverses visualisations, comme des tableaux générés par sous-domaines, des schéma type "cytoscape JS" etc.

Pour utiliser ces templates, je fournis en "context" (variables) les données récupérées via Elasticsearch. Actuellement, j'envoie l'entièreté des données à afficher et ceci est réitéré à chaque rechargement/changement d'onglets.

Pour vous donner une idée, voici un exemple de code template :

<div class="tab-content grid-stack">
    {% for domain, entries in dict_results.items %}
        <div class="data-tab tab-pane fade {% if forloop.first %}show active{% endif %}" id="{{ domain }}">
            {% for hostnames, items in entries.items %}
            <div class="data-block">
                <div class="card mb-3">
                    <div class="card-header bg-light py-2">
                        {% for hostname in hostnames %}
....

Je boucle donc sur chaque clés ...

J'ai également ajouté des fonctions de filtrage, que ce soit sur les tableaux ou les schémas relationnelles type "Cytoscape". Cependant, j'effectue tous les filtrages (par exemple afficher uniquement les données qui ont "key1:value1") avec Javascript, et ceci est parfois assez lent.

Je me suis renseigné sur internet, j'ai pu voir qu'il fallait peut-être utiliser des requêtes AJAX. Je ne m'y connais pas trop dans ce domaine, c'est pourquoi je suis ici pour avoir des conseils.

En fait je me pose la question de la meilleure méthode à utiliser dans ce cas. Je traite des milliers de lignes de données, c'est pourquoi je pense qu'utiliser Elasticsearch pour le filtrage et recharger la page via des requêtes AJAX à chaque filtre pourrait être intéressant.

N'hésitez pas si vous avez des questions ou suggestions.

Bonne journée

1 réponse

BoBot Messages postés 2722 Date d'inscription mardi 4 juillet 2023 Statut Modérateur Dernière intervention 27 avril 2024 180
10 mars 2024 à 18:04
Bonjour !
L'IA de Bobot est là pour vous aider !
Tu as tout à fait raison de penser à AJAX pour résoudre ton problème. En effet, effectuer des requêtes AJAX permettrait de rendre ton application plus efficace et interactive.

Au lieu de recharger toute la page à chaque fois, les requêtes AJAX peuvent récupérer uniquement les données nécessaires du serveur et les afficher sans avoir besoin de recharger la page entière.

Dans le contexte de ton application, tu peux utiliser AJAX pour effectuer une requête vers la base de données Elasticsearch à chaque fois qu'un utilisateur applique un filtre. Les données filtrées sont alors renvoyées au client et affichées à l'utilisateur sans que la page entière ait besoin d'être rechargée.

Cela rendrait ton application beaucoup plus rapide et agréable à utiliser, car l'utilisateur n'aurait pas à attendre le chargement de toute la page à chaque filtrage.

De plus, Elasticsearch est très performant pour filtrer et récupérer des données, il serait donc bien adapté pour ce genre de tâches.

Voici un exemple de how to utiliser AJAX dans Django :

```
$.ajax({
type: "GET",
url: "/my_endpoint/", // URL de ta fonction view qui renvoie les données filtrées
data: { 'key1': 'value1' } // les données que tu passes à ta fonction view
}).done(function( data ) {
// data est le JSON renvoyé par ta fonction view
// Tu peux utiliser ces données pour mettre à jour ton interface utilisateur.
});
```

Dans ton fichier views.py tu peux avoir quelque chose comme ça :

```
from django.http import JsonResponse
from .models import MyData

def get_filtered_data(request):
key1 = request.GET.get('key1', None)
# Fais ta requête à Elasticsearch avec le filtre key1 ici
# et mets le résultat dans data_to_return
data_to_return = ...
return JsonResponse(data_to_return, safe=False)
```

N'oublie pas de configurer l'URL de ta vue dans ton fichier urls.py.

-1