Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Packages Brython

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs, propriétés et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Objets et librairies Javascript

Modules intégrés propres à Brython

browser
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

Widgets
browser.widgets.dialog
browser.widgets.menu

interpreter
javascript

Travailler avec Brython

Options de la fonction brython()
Test et débogage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

module browser.ajax

Ce module permet d'exécuter des requêtes Ajax. Il définit une seule classe :

Ajax()
Renvoie un objet ajax

Cet objet possède les attributs et méthodes suivants :

bind(evt,fonction)
Attache la fonction à l'événement evt. evt est une chaine de caractères correspondent aux différents états de la requête :

  • "uninitialized" : non initialisé
  • "loading" : connexion établie
  • "loaded" : requête reçue
  • "interactive" : réponse en cours
  • "complete" : terminé

La fonction prend un seul argument, qui est l'objet ajax

open(methode, url, async)
methode est la méthode HTTP utilisée pour la requête (habituellement GET ou POST).

url est l'url appelée.

async est un booléen qui indique si l'appel est asynchrone (le script qui a effectué la requête continue de s'exécuter sans attendre la réponse à cette requête) ou non (l'exécution du script s'arrête en attendant la réponse).

readyState
un entier représentant l'état d'avancement de la requête, selon le tableau ci-dessous :

readyState événement
0"uninitialized"
1"loading"
2"loaded"
3"interactive"
4"complete"

set_header(nom,valeur)
affecte la valeur valeur à l'entête nom.

set_timeout(duree, fonction)
si la requête n'a pas renvoyé de réponse dans les duree secondes, annule la requête et exécute la fonction. Cette fonction ne prend pas d'argument.

send([data])
lance la requête. L'argument optionnel data n'est pris en charge que si la méthode est POST ; il doit s'agir soit d'un dictionnaire, soit d'une chaine de caractères.

status
un entier représentant le statut HTTP de la requête. Les valeurs les plus courantes sont 200 (ok) et 404 (fichier non trouvé).

text
la réponse du serveur sous forme de chaine de caractères.

xml
la réponse du serveur sous forme d'objet DOM.

Example

On suppose qu'il y a un DIV avec l'id result dans la page HTML.

from browser import document, ajax

def on_complete(req):
   if req.status == 200 or req.status == 0:
       document["result"].html = req.text
   else:
       document["result"].html = "erreur " + req.text

req = ajax.ajax()
req.bind('complete', on_complete)
# envoie une requête POST à l'url
req.open('POST', url, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
# envoie les données sous forme de dictionnaire
req.send({'x': 0, 'y': 1})

Raccourcis

Les appels peuvent être effectués plus simplement avec les fonctions correspondantes :

get(url[, blocking=False, headers={}, mode="text", encoding="utf-8", timeout=None, cache=False, data="", **callbacks])

et de même pour delete, head et options.

post(url[, blocking=False, headers={"Content-Type": "application/x-www-form-urlencoded"}, timeout=None, data="", **callbacks])

et de même pour put.

blocking est un booléen qui indique si la requête doit être bloquante ou non. La valeur par défaut est False (la requête est asynchrone)

headers est un dictionnaire avec les clés-valeurs des entêtes HTTP

mode est le mode de lecture : "text" ou "binary"

si mode est "text", encoding est l'encodage du fichier texte

cache est un booléen qui indique si la requête GET doit utiliser le cache du navigateur

data est soit une chaine de caractères, soit un dictionnaire. Si c'est un dictionnaire, il est converti en une chaine de la forme x=1&y=2

timeout est la durée en secondes après laquelle la requête est abandonnée

**callbacks est un dictionnaire avec comme clés des noms de la forme on + nom d'événement (onloaded, oncomplete...) et comme valeur la fonction qui gère cet événement. La clé ontimeout a pour valeur la fonction à appeler si la durée définie dans timeout est dépassée.

Dans la fonction de rappel, l'objet Ajax possède une méthode read() qui lit le contenu de la réponse sous forme de chaine si le mode est "text" et sous forme de bytes si le mode est "binary".

L'exemple ci-dessus peut être réécrit de la façon suivante:

from browser import document, ajax

def on_complete(req):
    if req.status == 200:
        document["result"].html = req.text
    else:
        document["result"].html = "error " + req.text

ajax.post(url,
          data={'x': 0, 'y': 1},
          oncomplete=on_complete)

Lecture d'un fichier en mode binaire:

from browser import ajax

def read(f):
    data = f.read()
    assert isinstance(data, bytes)

req = ajax.get("tests.zip", mode="binary",
    oncomplete=read)

Envoi de fichiers

Pour envoyer des fichiers saisis dans un formulaire par une balise du type

<input type="file" name="choosefiles" multiple="multiple">

on peut utiliser la fonction

file_upload(url, file, [**callbacks])

file est l'objet fichier à envoyer vers l'url, typiquement le résultat d'une expression

for file in document["choosefiles"].files:
    ...

Exemple:

<script type="text/python">
from browser import ajax, bind, document

def upload_ok(req):
    print("c'est tout bon")

@bind("#upload", "click")
def uploadfiles(event):
    for f in document["choosefiles"].files:
        ajax.file_upload("/cgi-bin/savefile.py", f,
            oncomplete=upload_ok)
</script>

<form>
    <input id="choosefiles" type="file" multiple="multiple" />
</form>
<button id="upload">Upload</button>