Aliviana la Concha » javascript http://aliviana.com Lo que no nos mata nos hace más fuertes Tue, 20 Mar 2012 00:04:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Hola mundo con JSON y Jquery http://aliviana.com/2009/12/hola-mundo-con-json-y-jquery/ http://aliviana.com/2009/12/hola-mundo-con-json-y-jquery/#comments Thu, 24 Dec 2009 01:33:45 +0000 marcos http://aliviana.com/?p=858 Saludos.

Hace chingos no pasaba por aqui, disculpas.

Desde el dia de ayer, me estuve rompiendo la cabeza para cargar y leer los datos de un XML, utilizaba la funcion de jquery $.ajax y hasta el dia de hoy di con el error, se trataba de el dataType, pues yo le asignaba el valor “xml”, y vagando por diferentes blogs, di con la solucion. Cuando cargas, lees o como sea, un archivo XML , si lo haces desde tu servidor local, lo que obtienes es texto plano, aun asi el archivo sea XML, porque pasa?…no lo se…pero lo solucione al cambiar el dataType a “text” .

Junto a mi epica busqueda de la razon por la cual no podia leer los datos del XML, pense en JSON, ya habia oido sobre el, mas nunca lo habia usado, asi que me puse a investigar y poco a poco me fui enamorando de la sintaxis y forma de estructurar los datos. Asi pues, acabo de hacer mi primer “Hola Mundo” en JSON; y no fue nada dificil.

Empecemos con el tutorial.

  1. Primero, necesitamos saber como se estructuran los datos en JSON.

Los datos en JSON tienen la siguiente forma:

{

"campo" : "valor",

"campo" : "valor"

}

Y tambien puede haber combinaciones como esta:

{

"campo" : "valor",

"campo" : [{

"campo" : "valor",

"campo" : "valor"

}]

}

2. Ahora que ya sabemos como se estructuran los datos en JSON, debemos crear el codigo en php que nos devuelva una cadena con los datos formateados en JSON. Para esto he creado el archivo llamado getJson.php, y contiene el siguiente codigo:

<?php
$json="{'items':[{'mensaje':'hola'},{'mensaje':'mundo'}]}";
echo $json;
?>

3.  Ahora crearemos el siguiente archivo, el cual llamaremos json.html, que contiene el siguiente codigo:

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js" ></script>
 <script>
    $(document).ready(function(){
           $.getJSON("getJson.php", function(data){
                     $.each(data.mensaje, function(i,item){
                     alert(item.cosa);
                     });
             });
    });
 </script>
 </head>
<body>
hola mundo de JSON
</body>
</html>

Cuando entremos y veamos el resultado, obtendremos dos alert’s, mostrano el hola mundo; decidi partir la oracion en dos partes, para mostar la forma de acceder a los datos.

Como pueden ver Jquery tiene una funcion especial para obtener datos del tipo JSON remotamente, $getJSON, recibe como parametros la url del script que nos arrojara los datos, y opcionalmente datos que deseemos enviarle al servidor, y un callback, para ejecutar algo de codigo cuando recibamos los datos.

Practicamente lo que hacemos es decirle a jquery que busque el dato “items” y por cada elemento encontrado dentro de el acceda al campo “mensaje” y lo muestre en un alert. ña variable “i” es el contador de numero de elementos que se van encontrando.

Espero que este mini tutorial sea de ayuda para aquellos que deseen empezar a trabajar con JSON

]]> http://aliviana.com/2009/12/hola-mundo-con-json-y-jquery/feed/ 2 Flash se sobrepone a menu javascript ( resuelto ) http://aliviana.com/2008/11/flash-se-sobrepone-a-menu-javascript-resuelto/ http://aliviana.com/2008/11/flash-se-sobrepone-a-menu-javascript-resuelto/#comments Mon, 03 Nov 2008 02:38:39 +0000 admin http://aliviana.com/?p=392 El problema consiste en tener un menú desplegable en javascript y justo debajo una película flash, cuando se despliega el menú, este se despliega por debajo de la película flash.

Para que no lo haga necesitamos colocar el siguiente parámetro en el código fuente:

<param name=”wmode” value=”opaque” />

Al igual que en la función AC_FL_RunContent( )

añadiremos al final de los parámetros

‘wmode’,'opaque’

Funciona para Firefox 3 e IE 7

]]> http://aliviana.com/2008/11/flash-se-sobrepone-a-menu-javascript-resuelto/feed/ 0