Discussion :

[Bayard]

Bonjour

Je dois accéder à une base de donnée Oracle depuis le FrontEnd.
J'aimerais savoir quelle est la meilleur techno pour cela. Un tutoriel est également bienvenu.

La documentation Oracle me parait verbeuse, mais je n'ai pas trouvé un exemple simple.
A minima, il semble qu'il faille permettre à la base d'autoriser une API Rest : https://developer.oracle.com/dsl/odb...s-js-rest.html

Idéalement, j'aimerais quelques lignes de Javascript pour lire / écrire des données directement depuis une page HTML.

Belle journée.

Cordialement

[ABCIWEB]

Et côté serveur tu utilises quelle technologie pour faire tes requêtes ?

D'une manière générale on utilise AJAX pour faire des requêtes vers le serveur sans recharger la page. Ensuite si ton serveur est par exemple php, tu fais ta requête Oracle avec oci_connect et tu fais afficher en retour soit du texte basique, soit du html, soit un tableau avec json_encode, que tu pourras exploiter en javascript en retour de requête (par exemple avec innerHtml() si tu as choisi de retourner du html). Le principe est expliqué dans le précédent lien.

[Bayard]

Côté serveur, je suis en Python / Fastapi.
Et c'est du bonheur.


Au sujet d'Ajax: https://developer.mozilla.org/fr/doc...etting_Started

est-ce qu'il est normal d'avoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (window.ActiveXObject) { // IE 6 et antérieurs
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

Est-ce que ce code fonctionne bien avec tout les navigateurs et n'est pas du code propriétaire ?

[tag9724]

Tu peux oublier ActiveX c'était la façon de faire des requêtes Ajax sous les vielles versions d'internet Explorer, c'est d'ailleurs pour ça que pas mal de site de l'époque ne fonctionnaient que sous IE. ActiveX est bien propriétaire de Microsoft d'ailleurs.

En règle général je te dirais même d'oublier le support d'internet explorer tout cours, IE 11 commence a dater et Microsoft eux même abandonnent progressivement leur vieux navigateur au profit de Edge.

Tu devra donc utiliser XMLHttpRequest ou encore Fetch qui est plus récent mais malgré tout largement supporté par tout les navigateurs aujourd'hui.

[Bayard]

De ce que je sais Json est plus récent que XML.

De ce que je comprends Fetch utilise Json

https://developer.mozilla.org/en-US/...PI/Using_Fetch

et mon ami FastApi parle Json couramment

https://fastapi.tiangolo.com/tutorial/encoder/

[tag9724]

Fetch n'utilise pas nécessairement du JSON, fetch est une alternative à XMLHTTPRequest avec quelques fonctionnalités en plus.

La plus grosse différence avec XMLHTTPRequest est la syntaxe à base de Promesses que Fetch utilise et qui permet de structurer le code autrement.
Une requêtes faite avec fetch pourrais ressembler à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
const recupérerContenuJson = async () => {
  const response = await fetch("contenu.json")
 
  // La requête a finie d'être envoyée et renvoie un status 200
  if (response.ok) {
    return response.json()
  }
}
 
// Une fois appelé ailleurs
const data = await recupérerContenuJson()
uneAutreFonction(data)

Son équivalent avec XMLHTTPRequest ressemblerais lui à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function recupérerContenuJson(callback = () => {}) {
  const requete = new XMLHttpRequest()
 
  requete.onload = () => {
    const data = JSON.parse(requete.responseText)
    callback(data)
  }
 
  requete.open("GET", "contenu.json")
  requete.send()
}
 
// Une fois appelé ailleurs
recupérerContenuJson((data) => {
  uneAutreFonction(data)
})

C'est surtout une question de préférence dans ton cas, les deux méthodes fonctionnent très bien pour faire des requêtes Ajax.

De ce que je sais Json est plus récent que XML.

Oui mais c'est surtout que JSON est bien plus adapté pour stocker des données et les traiter.
Un JSON est grossièrement un objet Javascript ( d'où son nom : Javascript Object Notation ), mais qui ne stockera que des données ( donc pas de fonctions JS par exemple ).

C'est ce qui s'est imposé comme standard, c'est une bonne pratique de renvoyer les données en JSON quand tu créer une API REST.

[Bayard]

Que mettre dans le Json ?
Un opérande et des paramètres ?

Je ne parle pas de ce qu'est la structure d'un fichier json https://www.json.org/json-en.html mais comment est-ce que le Javascript et le serveur vont extraire son contenu.

Avez-vous un exemple de Json rempli s'il vous plaît ?

[tag9724]

Je ne suis pas totalement sur d'avoir compris la question donc désolé d'avance si je répond a coté.

L'idée d'une API Rest est de créer un lien ( une route ) pour différentes actions.
Par exemple si un client connecté au site envoie une requête ajax sur la route /user-infos celle-ci lui retourneras en réponse un json qui pourrais ressembler a ça :

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{
  "username": "Wawachi",
  "email": "wawachi.le.chiwawa@example.com",
  "accountCreated": 1588629600000,
}

Coté client donc au niveau de la requête Ajax, une fois le JSON récupéré il devient une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
const response = await fetch("/api/user-infos")
 
// La requête a finie d'être envoyée et renvoie un status 200
if (response.ok) {
  const userInfos = await response.json()
 
  userInfos.username       // "Wawachi",
  userInfos.email          // "wawachi.le.chiwawa@example.com",
  userInfos.accountCreated // 1588629600000
}

Dans cet exemple on voudra aussi gérer le cas ou un utilisateur non connecté enverrais une requête.
Le serveur pourrais retourner un JSON différent contenant un message d'erreur ainsi un code HTTP autre que 200, dans ce cas ça pourrais être 401 ou 403.

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
{
  "error": "Vous devez vous connecter.",
}

Ce qui permettras coté frontend de signaler à l'utilisateur que ses informations n'ont pas put être récupérées ainsi que de lui fournir la raison pour laquelle ça n'as pas marché.

[ABCIWEB]

Tu devrais peut-être d'abord te renseigner dans le forum python pour voir comment exploiter les requêtes Ajax. Ensuite on pourra t'expliquer plus précisément ici comment envoyer la requête et exploiter son retour, comme tag9724 a commencé de le faire.

[Bayard]

Est-ce qu'en test unitaire, je peux lancer, depuis un navigateur l'URL suivante à mon serveur python:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

localhost/api/user-infos/{"username": "Wawachi","email": "wawachi.le.chiwawa@example.com", "accountCreated": 1588629600000,}

C'est bien cela que le Javascript devra émettre ou est-ce que l'on ne peut pas entrer cela facilement dans une url ?

[ABCIWEB]

Tu peux utiliser JSON.stringify() pour avoir une chaine de caractères.

[tag9724]

Quand tu passe des informations avec ta requête en GET cela se fera comme ça :

localhost/api/user-infos/?username=Wawachi&email=wawachi.le.chiwawa@example.com&accountCreated=1588629600000Si tu souhaite envoyer les données en JSON il faudra utilise une méthode POST.

Généralement on utilise la méthode GET pour demander au serveur des informations, la méthode POST quand à elle serviras à envoyer des informations au serveur pour s'inscrire, se connecter, changer le mot de passe etc ...

[Bayard]

Voici mon code javascript qui émet une commande

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>emission via fetch</title>
</head>
 
<body>
    <p onclick="myFunction(this)">Click for sending json data via fetch command</p>
 
<script>
function myFunction(elmnt) {
  const data = { "action" : "commande1" /*,
                "description": "les sanglots longs des violons de l'Automne" */
};
 
fetch("http://127.0.0.1:8000/update_action"  , {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        'Content-Type' : 'application/json'
    },
    body: {
        body: JSON.stringify(data),
    }
})
    .then(function() {
        console.log("error");
    }).catch(function() {
        console.log("succesfully");
    });
}
</script>
</body>
</html>

J'ai une erreur dans le serveur python :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Traceback (most recent call last):
  File "/home/.local/lib/python3.9/site-packages/fastapi/routing.py", line 184, in app
    body = await request.json()
  File "/home/.local/lib/python3.9/site-packages/starlette/requests.py", line 228, in json
    self._json = json.loads(body)
  File "/usr/lib/python3.9/json/__init__.py", line 346, in loads
    return _default_decoder.decode(s)
  File "/usr/lib/python3.9/json/decoder.py", line 337, in decode
    obj, end = self.raw_decode(s, idx=_w(s, 0).end())
  File "/usr/lib/python3.9/json/decoder.py", line 355, in raw_decode
    raise JSONDecodeError("Expecting value", s, err.value) from None
json.decoder.JSONDecodeError: Expecting value: line 1 column 2 (char 1)

Bien sur, il y a des erreurs python et nous sommes sur un forum javascript.
J'aimerais quand même être sur que le code JS est correct.

Dans le navigateur, le code JS indique "error" via la ligne 28

console.log("error");

Quelqu'un a-t-il une idée ?

[ABCIWEB]

Salut,

Je n'utilise pas fetch, soit jQuery, soit la méthode classique XMLHttpRequest, donc je ne peux rien affirmer. Cela dit quand je regarde la doc MDN je vois que fetch est initialisée avec new Request qui ne figure pas dans ton code. Et puis utilises aussi reponse.status comme dans l'exemple MDN pour y voir plus clair sur l'erreur.

Tu n'a pas trouvé des exemples génériques de requêtes Ajax avec python ? Il faudrait commencer par faire marcher un exemple basique fourni en exemple et ensuite l'adapter à ton code.

[Bayard]

Pour ABCIWEB:
Hum, ça c'est le code de cette url https://developer.mozilla.org/en-US/...PI/Using_Fetch

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const data = { username: 'example' };
 
fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Je suis parti de là.

Si tu veux poster du code jQuery, (XMLHttpRequest étant, semble-t-il obsolète) je suis preneur.

[tag9724]

Tout fonctionne très bien c'est juste que tu as confondu .catch() et .then().

.catch() Se déclenche quand une requête n'as pas pu s'envoyer.
.then() Quand tout s'est bien déroulé.

Donc dans ton code cela se traduit par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    .then(function() {
        console.log("error"); // La requête s'est bien effectuée
    }).catch(function() {
        console.log("succesfully"); // L'envoie de la requête a échouer
    });

L'API Fetch est juste une autre façon d'envoyer des requête Ajax, la grosse différence entre les deux est que Fetch utilisera une logique à base de promesses.
C'est surtout une question de préférences dans ton cas pour ce que tu veux faire XMLHttpRequest sera tout aussi adapté.

Les promesses peuvent résoudre certaines problématique assez facilement, par exemple il est très facile avec fetch d'exécuter du code seulement après qu'une liste de requête aient finis d'être envoyée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const tasks = [
  fetch("user-infos"), 
  fetch("user-preferences")
]
 
Promise.all(tasks).then((responses) => {
  console.log("Toutes les requêtes ont finies d'être envoyées", responses)
})

Les promesses peuvent être un peux ardues a appréhender au début mais valent la peine d'être apprises, par la suite quand tu commenceras a être plus à l'aise en javascript tu pourras regarder comment utiliser des promesses avec le "sucre syntaxique" que sont async/await.

https://developer.mozilla.org/fr/doc...Using_promises

Ceci étant dit tu devrais t'en sortir avec fetch même si tu ne maitrise pas les promesses, au bout du compte cette API n'est pas plus dur ou plus facile que XMLHttpRequest juste différente.

La seule objection à l'utilisation de fetch serais qu'internet explorer ne le supporte pas, mais de mon point de vue cela ne sert à rien de se casser la tête avec une compatibilité internet explorer.

[ABCIWEB]

Normalement avec jQuery une requête JSON devrait avoir cette forme. Dans cet exemple je renvoie le contenu de trois champs du formulaire dans un json, et je considère que le fichier de destination ajax 'Jquery-ajax-json.php' se trouve au même niveau sur mon serveur que ce script de formulaire;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<body>
<div>
    <form id="myform" method="post">
        <p>
            <input type="text" name="champ1">
        </p>
        <p>
            <input type="text" name="champ2">
        </p>
        <p>
            <select name="champ3">
                <option value="1">value1</option>
                <option value="1">value1</option>
            </select>
        </p>
        <p>
            <input type="button" name="send" value="Envoyer">
        </p>
    </form>
    <div class="reponse">
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
        // Cible le formulaire
        var form = $("#myform");
        // Cible le div de réponse
        var reponse = $(".reponse");
        
        // Créé un évènement on click sur le bouton
        form.find("input[name=send]").on("click",function()
        {
                
            var result = {
                champ1: form.find("input[name=champ1]").val(),
                champ2: form.find("input[name=champ2]").val(),
                champ3: form.find("select[name=champ3]").val()
            }
                
           // Lance la requête ajax
          $.ajax({
                type: "POST",
                url: "Jquery-ajax-json.php",
                data: JSON.stringify(result),
                contentType: "application/json; charset=utf-8"
                })
                .done(function(data, textStatus, jQxhr ) {
                        console.log(data);
                        reponse.text(JSON.stringify(data));
                })
                .fail(function(jqXhr, textStatus, errorThrown) {
                        reponse.text(errorThrown);
                })
        });
})
</script>
</body>
</html>

Si ton fichier n'est pas trouvé le div class="reponse" devrait afficher Not Found. Sinon il affichera la réponse supposée être du JSON, mais on utilise habituellement directement l'objet data retourné (qui est automatiquement parsé par jQuery) par exemple var x = data.x

Pour visualiser la requête dans la console javascript, (onglet réseau) quand tu clique sur la requête post envoyée puis sur l'onglet "requête" tu verras bien qu'un objet json est envoyé en contenant les valeurs du formulaire.

Mais je ne peux pas t'en dire plus, et je ne suis pas certain que ce code soit adapté à ton serveur pyton puisque je ne sais pas ce qu'il demande. En php on utilise pas contentType: "application/json; charset=utf-8" mais la valeur par défaut (c'est à dire qu'on ne spécifie pas ce paramètre, ou sinon dans certain cas on le désactive avec false), et par ailleurs le serveur peut imposer son content-type. La doc jQuery Ajax. Enfin toujours est-il qu'avec ce code tu envoies une chaine json.

[Bayard]

#tag9724

Tout fonctionne très bien c'est juste que tu as confondu .catch() et .then().

.catch() Se déclenche quand une requête n'as pas pu s'envoyer.
.then() Quand tout s'est bien déroulé.

en fait lorsque je lance

curl --header "Content-Type: application/json" --request POST --data '{"action":"xyz"}' http://127.0.0.1:8000/update_action

le serveur python reçoit bien le Json.

DONC le code Javascript suivant ne fonctionne pas, il bien envoie quelque chose mais quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function sendJSONData(elmnt) {
    var Item = 
    {
        action : "commande1"
    };
 
  fetch("http://127.0.0.1:8000/update_action"  , {
      method: 'POST',
      mode: 'no-cors',
      headers: {
          'accept' : 'application/json',
          'Content-Type' : 'application/json'
      },
      body: {
          body: JSON.stringify(Item)
      }
  })
      .then(function() {       
          console.log(Item);
      })
      .catch(function() {
          console.log("error");
      });
  }

Est-ce que quelqu'un peut me dire ce qui ne va pas avec ce code ?

[tag9724]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
{
      method: 'POST',
      mode: 'no-cors',
      headers: {
          'accept' : 'application/json',
          'Content-Type' : 'application/json'
      },
      body: {
          body: JSON.stringify(Item)
      }
  }

Ta requête enverras le texte "[object Object]", dans l'exemple que tu avais envoyé précédemment de MDN tu pourras voir que l'entrée body n'est pas un objet mais bien une chaine de caractères :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
}

Quand tu manipule des requêtes ajax n'hésite pas à te servir des outils de développement de ton navigateur, plus précisément l'onglet Network qui liste toute les requêtes effectuées.

[Bayard]

Merci beaucoup.