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.
Página anterior | Volver al principio del trabajo | Página siguiente |