XHTML dinámico avanzado (AJAX Y DOM) (página 2)

Partes: 1, 2

JSON

Un array es una colección de valores. Un array comienza con [ (corchete izquierdo) y termina con ] (corchete derecho). Los valores se separan por , (coma).

JSON

Un valor puede ser una cadena de caracteres con comillas dobles, o un número, o true o false o null, o un objeto o un arreglo. Estas estructuras pueden anidarse

JSON – Equivalencia con XML

{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
< menu id="file" value="File">
< popup>
< menuitem value="New" onclick="CreateNewDoc()" />
< menuitem value="Open" onclick="OpenDoc()" />
< menuitem value="Close" onclick="CloseDoc()" />
< /popup>
< /menu>

JSON – Enlaces de Interés

http://es.wikipedia.org/wiki/JSON

http://json.org/

http://json.org/json-es.html
Trabajar con JSON desde ASP
http://www.webdevbros.net/2007/04/26/generate-json-from-asp-datatypes/
http://www.webdevbros.net/2007/08/21/json-utility-class-13-released/

JSON – Solicitud AJAX

Formato
var jSonRequest = new Json.Remote(“script que hace el servicio",
{onComplete: function(objeto json){
}}).send({variables a enviar});

Ejemplo
var jSonRequest = new Json.Remote("servicios/personas_texto.asp",
{onComplete: function(jsonpersonas){
acabaAccion('JSON', jsonpersonas.personas);
}}).send({'filtro': ''});

JSON – Formato datos

Formato
{“objeto": [{“campo1": valor1,“campo2": “valor2",..}]}

Ejemplo
{"personas": [{"idpersona": 3,"nombre": "ALFONSO","apellidos": "BENAVENT VICTORIA","email": "ABenavent@ua.es"}]}

MooTools – Funciones

each (Clase Array)

Recorre todos los elementos del array y como parámetro indicamos la función que podemos ejecutar para cada uno de los elementos del array.

Formato
array.each(function(item) {
alert(item.propiedad);
});

Ejemplo
['apple','banana','lemon'].each(function(item, index) {
alert(index + " = " + item);
});

JSON – Leer datos (Objetos)

Formato
ArrayObjetos.each(function(objeto) {
// Leemos las propiedades de cada objeto;
});

Recorremos los datos
ppersonas.each(function(persona) {
alert(persona.nombre + " " + persona.apellidos + " (" +
persona.email + ")");
});

JSON – Ejemplo 1

Crear un fichero html (ej1_json.html) que haga una llamada AJAX a un servicio JSON (servicios/personas_texto.asp) y mostremos con un alert el nombre, apellidos y correo del usuario.

JSON – Generar datos desde ASP

Descargar librería
http://www.webdevbros.net/wp-content/uploads/2007/08/json13.zip

Uso sencillo desde una consulta (RecordSet)
Formato
(new JSON).toJSON(“identificación", RecordSet, false)

Ejemplo
Set oRS = Ocon.Execute(ssQL)

' Recorrer el cursor para mostrar los datos
If (not oRS.EOF) then
response.write((new JSON).toJSON("personas", oRS, false))
End If

JSON – Ejemplo 2

Crear un fichero html (ej2_json.html) que haga una llamada AJAX a un servicio JSON (servicios/personas.asp). Este ASP consulta los datos de la tabla Personas y devuelve todos los datos.
Cuando acabe la llamada, mostraremos un alert con el nombre, apellidos y correo, de cada uno de los alumnos.

JSON – Generar datos desde ASP

Enviar nuestros propios datos con un diccionario

Formato
Crear un diccionario y añadir datos con diccionario.add “nombre”, “valor”

((new JSON).toJSON(" identificación ", arrayDiccionario, false))

Ejemplo
Dim dPer(1)
set dPer(0) = server.createObject("scripting.dictionary")
dPer(0).add "idpersona", "1“

set dPer(1) = server.createObject("scripting.dictionary")
dPer(1).add "idpersona", "2“

response.write((new JSON).toJSON("personas", dPer, false))

JSON – Ejemplo 3

Crear un fichero html (ej3_json.html) que haga una llamada AJAX a un servicio JSON (servicios/personas_3.asp).
Este ASP genera los datos de las personas con un array de diccionarios.
Cuando acabe la llamada, mostraremos un alert con el nombre, apellidos y correo, de cada uno de los alumnos.

MooTools – Funciones

Función $

Nos devuelve la referencia al objeto que estamos buscando, siempre y cuando este exista en la página. En caso de no existir devuelve false.

Formato
$(‘mielemento’)

Ejemplo

if ($(‘idTextarea’)) {
$(‘idTextarea’).value = “Hola”;
}
else {
alert(“No existe el textarea idTextarea“);
}

MooTools – Funciones

Función $$

Nos devuelve una array de objetos que se ajustan a una etiqueta, #identificador, clase, etc que indiquemos

Formato
$$(‘etiqueta’)

Ejemplo
$$('a') // Array con todas las etiquetas anchor de la página
$$('a.clase') // Array con todas las etiquetas anchor de la página
// que tengan como class, clase

MooTools – Funciones

Evento DomReady

Añadimos un evento especial a la ventana cuando el DOM está listo para poder trabajar con él.

Ejemplo
window.addEvent('domready',
function(){
alert('the dom is ready');
}
);

Mootools – Ejemplo 4

Crear un fichero html (ej4_mootools.html) que contenga un listado de las Universidades de la Comunidad Valenciana (sacar datos de http://www.ua.es/es/internet/listado.htm) y que cuando esté listo el DOM se active un evento que muestre las urls de cada uno de los enlaces (propiedad href).

MooTools – Funciones

injectBefore (Clase elemento)

Inserta un elemento antes del elemento actual.

Ejemplo
$(“idelemento”).injectBefore(“Elemento que va a ser ahora posterior”);

MooTools – Funciones

injectAfter (Clase elemento)

Inserta un elemento después del elemento actual.

Ejemplo
$(“idelemento”).injectAfter(“Elemento que va a ser ahora anterior”);

MooTools – Funciones

remove (Clase elemento)

Elimina el elemento actual.

Ejemplo
$(“idelemento”).remove();

MooTools – Funciones

setHTML (Clase elemento)

Indicamos el innerHTML del elemento.

Ejemplo
$(“idelemento”).setHTML(“Texto”);

MooTools – Funciones

getText (Clase elemento)

Obtenemos el inner text del elemento.

Ejemplo
alert($(“idelemento”).getText());

MooTools – Funciones

new Element (Clase elemento)

Creamos un nuevo elemento. Debemos definir la etiqueta y los atributos que la forman.

Ejemplo
var el = new Element(‘div', {'style': 'color: red'});

Mootools – Ejemplo 5

Crear un fichero html (ej5_mootools.html) que contenga un listado de las Universidades de la Comunidad Valenciana (usar los mismos del ejercicio anterior) y que cuando esté listo el DOM se active un evento que cambie la posición de los dos primeros elementos de la lista y que reemplace los enlaces de los 3 últimos por etiquetas H1 en rojo

MooTools – Funciones

injectInside (Clase elemento)

Inserta un elemento dentro del elemento actual.

Ejemplo
$(“idelemento”).injectInside(“Elemento en el que vamos a insertar”);

Mootools – Ejemplo 6

Crear un fichero html (ej6_mootools.html) que cuando esté listo el DOM se active un evento que cree una etiqueta div de 500px y fondo gris y que dentro de esta inserte 5 etiquetas div con cada una de las universidades.
Opcional: Añadir evento a las etiquetas para ir a la Web de la Universidad.

JSON – Mootools – Ejemplo 7

Crear un fichero html (ej7_json_mootools.html) que disponga de una caja de texto que hará de filtro. Cuando el número de letras sea mayor de 3, hará una llamada AJAX a un servicio JSON (servicios/personas_7.asp)
Este ASP consulta los datos de la tabla Personas dependiendo del filtro por nombre, apellidos o correo y devuelve todos los datos.
Cuando acabe la llamada, mostraremos una caja div (al estilo del ejericicio anterior) con los resultados que ha devuelto al servicio.