Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `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

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Módulo browser.ajax

El módulo permite ejecutar peticiones Ajax. En el módulo se define una única clase :

Ajax()
devuelve un objeto ajax

Este objeto posee los siguientes atributos y métodos:

bind(evt, funcion):
adjunta la función al evento evt. evt es una cadena que define uno de los siguientes estados de la petición

  • "uninitialized" : no inicializado
  • "loading" : conexión establecida
  • "loaded" : solicitud recibida
  • "interactive" : respuesta en curso
  • "complete" : terminado

La función toma un único argumento: el objeto Ajax.

open(method, url, async)
method es el método HTTP usado para la petición (normalmente GET o POST),

url es la url a llamar,

async es el booleano que indica si la llamada es asíncrona (el script que comenzó la petición se ejecuta sin esperar a la respuesta) o no (el script espera hasta que se recibe la respuesta).

readyState
un entero que representa el estado de la petición (ver tabla más abajo)

readyState estado de la petición
0"uninitialized"
1"loading"
2"loaded"
3"interactive"
4"complete"

set_header(name, value)
establece el valor del nombre del cabecero

set_timeout(duration, function)
si la petición no devuelve una respuesta durante la duración en segundos, cancelará la petición y ejecutará la función. Esta función no puede tener argumentos

send([data])
envía (inicia) la petición. El argumento opcional data será ignorado si el método no es POST ; debe ser un diccionario o una cadena representando la codificación url de los pares clave-valor. Si deseas enviar ficheros, necesitarás pasar un diccionario siendo una de las claves un objeto File, e.g. en caso que tengas un elemento input de tipo file e id upload_file podrías enviar el fichero seleccionado por el usuario bajo la clave upload mediante una llamada send({'upload':doc["upload_file"].elt.files[0]})

status
es un entero que representa el estatus HTTP de la petición. Los valores más usuales son 200 (ok) y 404 (file not found)

text
la respuesta del servidor como una cadena de caracteres

xml
la respuesta del servidor como un objeto DOM

Ejemplo

Supondremos que existe un DIV con id result en la página 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 = "error " + req.text

req = ajax.Ajax()
req.bind('complete', on_complete)
# envía una petición POST a la url
req.open('POST', url, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
# envía datos como un diccionario
req.send({'x': 0, 'y': 1})

Atajos

Las llamadas GET y POST se pueden efectuar de una forma más directa de la siguiente forma:

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

y lo mismo se podría hacer con delete, head y options.

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

y lo mismo para put.

blocking es un booleano que sirve para especificar si la petición es bloqueante o no. El valor por defecto es False (asincrona petición)

headers es un diccionario con los cabeceros HTTP (claves / valores)

mode es "text" o "binary"

si mode es "text", encoding es la codificación del archivo de texto

data puede ser tanto un string como un diccionario. En el caso del, diccionario el mismo se convierte a una cadena de la forma x=1&y=2.

cache es un booleano que sirve para especificar si la petición GET debería usar la caché del navegador

timeout es el tiempo en segundos después del cual se cancelará la petición

**callbacks es un diccionario donde las claves son de la forma on + nombre del evento (onloaded, oncomplete...) y el valor es la función que maneja ese evento. Para la clave ontimeout, el valor es la función para llamar si la duración definida en timeout se alcanza.

En la función de callback, el objeto Ajax posee el método read() que lee el contenido de la respuesta como un string si el modo es "text" y como bytes si el modo es "binary".

El ejemplo anterior se podría escribir de la siguiente forma usando el atajo:

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)

Reading a binary file:

from browser import ajax

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

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