Cargar javascript desde JSON o AJAX con eval() en FF y execScript() en IE Ests desarrollando una aplicacin web en la que usas

JSON o AJAX para cargar dinmicamente datos? Adems necesitas cargar dinmicamente no solamente datos sino tambin cdigo javascript para ser utilizado en la pgina? A continuacin te expongo el modo de hacerlo para que funcione en FireFox 3.X y IE7 (casualmente, tambin funciona en IE6). Voy a partir de la base de que utilizas jQuery para la consulta JSON o AJAX al servidor. Y me voy a centrar en la "carga" del cdigo javascript. Pero obviamente, no importa la librera o cdigo que uses para el JSON o AJAX. Hay muchsima literatura en internet sobre ese tema. Ejemplo de carga de datos Empezar con un ejemplo de carga de datos tipo texto, que es lo ms habitual. Y luego pondr un ejemplo de carga de cdigo javascript.
function js_actualizar_top_webs(){ var url_json = 'json_top_webs.php?mes='+$('#select_mes').val(); $.getJSON( url_json, function(datos){ $('#div_top_webs').html(datos.table_webs); } ); }

Imaginemos que en nuestra web de ejemplo tenemos un control tipo lista desplegable (select) que permite al usuario escoger un mes del ao, y queremos que nuestra pgina recargue un <div id="'div_top_webs'"></div> con la lista del top 10 de webs de ese mes. Es un ejemplo clsico de recarga de datos dinmica usando JSON o AJAX. Para ello construimos una funcin llamada js_actualizar_top_webs, que llamaremos al cambiar el valor de ese select. Esta funcin tal como est definida en el cdigo de ejemplo hace una llamada JSON mediante el objeto $ de jQuery y cuando los datos se hayan recibido por completo ejecutar el cdigo en rojo, en dnde "datos" es un objeto de javascript (no un array!!) que contiene diferentes "propiedades" con los datos enviados. En este caso, suponemos que el archivo de PHP que ha sido llamado devuelve un string llamado "table_webs" que contiene el cdigo HTML de un "<table>" con la lista de webs que queremos mostrar.

Para "obtener" el valor de ese string HTML simplemente llamamos a datos.table_webs y lo colocamos como "contenido" de "div_top_webs" mediante el mtodo .html() de jQuery. Sencillo, no? Ejemplo de carga de cdigo javascript Bueno, vamos ahora a algo que "cuesta" un poquitn ms. Bueno, de hecho a m me ha hecho gastar casi 8 horas de cansada bsqueda por internet y de leer mucho y probar mucho, hasta llegar a lo que te voy a poner aqu! ;) Abajo tienes el cdigo anterior ligeramente cambiado: hemos aadido unas lneas de cdigo ms, con el fin de poder cargar y ejecutar un cdigo de javascript elaborado en el lado servidor.

function js_actualizar_top_webs(){ var url_json = 'json_top_webs.php?mes='+$('#select_mes').val(); $.getJSON( url_json, function(datos){ $('#div_top_webs').html(datos.table_webs); if (window.execScript) window.execScript(datos.script_leyenda); else window.eval(datos.script_leyenda); } ); }

Puedes ver en rojo dos nuevas lneas que corresponden a una sentencia condicional, y esto es necesario para ejecutar un cdigo u otro segn estemos en FireFox o en Internet Explorer (como mnimo estos dos navegadores). Para ambos casos el cdigo de javascript pasado es el mismo y lo recuperamos de nuevo mediante jQuery con la propiedad datos.script_leyenda (que habremos rellenado desde el PHP con el cdigo javascript que necesitemos ejecutar en nuestra web). La diferencia radica en que Internet Explorer ejecutar el cdigo de javascript mediante el mtodo window.execScript(), mientras que FireFox ejecutar el cdigo al usar el mtodo window.eval(), en ambos casos pasando como argumento el cdigo javascript que queremos ejecutar. Otro aspecto importante y que tal vez pase desapercibido a primera vista es que en ambos casos ejecutamos sendos mtodos sobre el objeto

window. Eso es fundamental (me llev ms de una hora leyendo descubrirlo), para que el cdigo javascript a ejecutar pase a estar "disponible" desde otros "mbitos" de la misma pgina. De esta forma, si por ejemplo, dentro de ese cdigo cargado dinmicamente definimos una funcin llamada "js_mostrar_leyenda()", si queremos usarla en el resto de la pgina, deberemos llamarla as: window.js_mostrar_leyenda(); JSON-RPC-Java: comunicaciones Ajax transparentes. Tutorial completo y ejemplos
Tras publicar dos artculos sobre el tema y dado el inters que despierta esta tecnologa en la comunidad, hemos decidido realizar un tutorial exhaustivo que examine las posibilidades de JSON-RPC-Java con las explicaciones, snippets y ejemplos para que podis incorporarla a vuestros proyectos. JSON-RPC-Java es una tecnologa que permite realizar comunicaciones Ajax entre el cliente y el servidor J2EE, hacer llamadas a funciones de clases Java desde JavaScript, con capacidad para serializar objetos Java y convertirlos en objetos JavaScript y todo ello, de forma transparente al programador. Funcionamiento bsico Para comprender el funcionamiento de JSON-RPC-Java se debe comprender tanto el funcionamiento de la parte de servidor como del cliente JavaScript. Desde el punto de vista del servidor Java lo primero es desarrollar las clases que sern accesibles desde el cliente. Para hacer pblicos sus mtodos y funciones debemos registrar una instancia de nuestra clase en un objeto JSONRPCBridge que previamente habremos creado y guardado en la sesin HTTP. Este objeto es el encargado, junto a un Servlet que ms adelante aprenderemos a instalar, de comunicar a JavaScript la estructura de nuestras clases y de gestionar la comunicacin entre ambas partes. Desde el punto de vista del cliente solo es necesario incluir el cliente para JavaScript de JSON-RPC, crear una instancia de la classe JSON-RPC (que recibe como parametro la direccin del Servlet mencionado anteriormente) y llamar a nuestra funcin Java desde JavaScript. Desarrollando clases para la interaccin Las clases que sirven para comunicar no deben cumplir ningn requisito especial. As podemos utilizar cualquier clase que ya hayamos desarrollado o alguna desarrollada especficamente para la interaccin con el cliente Web. Recomiendo que las clases que se hagan accesibles estn especficamente diseadas para JSON-RPC-Java. Estas clases permitirn ejecutar las acciones y obtener los datos necesarios en cada caso con el mnimo numero de comunicaciones HTTP, mejorando as la eficiencia. Adems, al estar especficamente diseadas, no permitirn ejecutar funciones de negocio que comprometan la seguridad del sistema.

Nosotros utilizaremos para nuestros ejemplos una clase especialmente diseada lo suficientemente sencilla como para mostrar el funcionamiento del framework sin intromisiones. Ms tarde aadiremos ms funciones, para nuestro primer ejemplo en Devolviendo tipos simples su implementacin es la siguiente:
public class Foo { public int getInteger() { return 2; } public boolean getBoolean() { return true; } public String getString(){ return "Hola, mundo!"; } }

Instalacin La instalacin del sistema es muy sencilla. Primero debis descargar la distribucin. Para los ejemplos contenidos en este tutorial utilizaremos la versin 1.0.1 que podis descargar aqu. Que descomprimiremos en nuestro disco duro. De la distribucin nos interesan dos archivos: la librera Java y el cliente JavaScript. El primero lo encontraremos en la raz del directorio donde descomprimimos la distribucin con el nombre jsonrpc-1.0.jar y lo debemos copiar en el directorio <WebContent>/WEBINF/lib de nuestra aplicacin. El segundo lo encontraremos en /webapps/jsonrpc/jsonrpc.js y lo deberemos copiar en un directorio para que pueda enlazarse en las pginas HTML, como por ejemplo en <WebContent>/js. Debemos configurar un Servlet que ser el encargado de comunicar al cdigo JavaScript la estructura de nuestras clases compartidas. Para ello debemos incluir en nuestro archivo <WebContent>/WEB-INF/web.xml:
<servlet> <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> <servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> <url-pattern>/JSON-RPC</url-pattern> </servlet-mapping>

Es importante recordar la URL que hemos asignado a este Servlet, pues ms tarde, para inicializar el cliente JavaScript, nos ser necesaria. El siguiente paso es informar al Servlet de cuales son nuestras clases. Solo es necesario registrar las clases una vez en cada sesin. Aunque existen formas de registrar clases desde un JSP, nosotros recomendamos, por claridad en el cdigo, hacerlo desde un Servlet. Para ello utilizamos la clase JSONRPCBridge. Mantendremos una instancia de JSONRPCBridge por cada sesin, con el cdigo:

HttpSession session = request.getSession(); JSONRPCBridge json_bridge = null; json_bridge = (JSONRPCBridge) session.getAttribute("JSONRPCBridge"); if(json_bridge == null) { json_bridge = new JSONRPCBridge(); session.setAttribute("JSONRPCBridge", json_bridge); }

Una vez hecho esto, por cada instcia de clase que queramos hacer accesible desde JavaScript ejecutamos la siguiente instruccin:
json_bridge.registerObject("foo", new Foo());

Mediante esta instruccin asignamos un nombre a la instancia, que ser el que usaremos ms tarde para acceder a ella desde JavaScript Devolviendo tipos simples Una vez lo hemos instalado y hemos registrado las instancias de nuestras clases en el objeto JSONRPCBridge podemos acceder a sus funciones desde JavaScript. Para ello debemos enlazar, en nuestro HTML, con el cliente de JSON-RPC, de la siguente forma:
<script type="text/javascript" src="js/jsonrpc.js"></script>

Hecho esto, ya es posible acceder a las funciones de la instancia de Foo desde nuestro JavasCript. Para ello, primero crearemos una instancia del cliente JSON-RPC, de la siguiente forma:
jsonrpc = new JSONRpcClient("/<nombre de la aplicacin>/JSON-RPC");

Hecho esto podemos acceder a las funciones de la instancia de Foo registrada con el nombre foo. Existen dos formas de acceder a ellas: de forma sncrona o asncrona De forma sncrona el cliente JavaScript bloqear el navegador hasta que optenga respuesta del servidor. Esta forma de acceso no es recomendable, menoes en el caso de que estemos trabajando en entornos muy controlados, donde podamos garantizar la respuesta del servidor en un tiempo determinado. Para acceder de esta forma, solo es necesario llamar a las funciones como si de funciones JavaScript se tratara, as:
jsonrpc.foo.getInteger(); jsonrpc.foo.getBoolean(); jsonrpc.foo.getString();

De forma asncrona el cliente no bloquear el navegador y la ejecucin seguir. Deveromos crear una funcin que ser la que se llamar al recibir la respuesta desde el servidor, as:
jsonrpc.foo.getInteger(handler);

La funcin que capturar el resultado tendr dos parametros:

El resultado de la ejecucin, en caso de que la funcin retorne algn resultado Una excepcin, que tendr valor en caso de que en el cdigo Java se produzca alguna excepcin

Por ejemplo:

function handler(result, exception) { if (!exception) { alert(result); } }

Devolviendo objetos JSON-RPC-Java tiene la capacidad de serializar los objetos Java retornados por las funciones y desserializarlos como objetos JavaScript. Mostraremos esta caracterstica con un ejemplo. Crearemos una nueva clase que ser devuelta desde una funcion de Foo, esta clase es:
public class Bar { private String string; private int integer; private boolean bool; public Bar() { } public Bar(String string, int integer, boolean bool) { this.string = string; this.integer = integer; this.bool = bool; } public String getString() { return this.string; } ... public void setString(String string) { this.string = string; } ... }

Y aadiremos una funcin en Foo que devuelva un objeto de este tipo:

public Bar getBar() { return new Bar("bar", 2, false); }

Es posible ejecutar esta funcin de la misma forma que las anteriores y acceder a sus atributos, as:
var bar = jsonrpc.foo.getBar(); bar.string; bar.integer; bar.bool;

Devolviendo colecciones de objetos

Adems de serializar nuestros propios objetos, JSON-RPC-Java puede serializar colecciones de objetos de clases que implementen las interfaces Map, Set o List. Para nuestro ejemplo, crearemos tres nuevas funciones, una para cada interfaz, en la clase Foo:
public class Foo { ... public List getList() { List list = new ArrayList(); list.add(valor 1); list.add(valor 2); list.add(valor 3); return list; } public Map getMap() { Map map = new HashMap(); map.put(key 1,valor 1); map.put(key 2,valor 2); map.put(key 3,valor 3); return map; } public Set getSet() { Set set = new HashSet(); set.add(valor 1); set.add(valor 2); set.add(valor 3); return set; } }

Al llamar a estas funciones recibiremos un objeto JavaScript con la colleccin de objetos, a la que podremos acceder as:
var list = jsonrpc.foo.getList(); // Accedemos a dos objetos de la lista list.list[0]; list.list[3]; var set = jsonrpc.foo.getSet(); // Accedemos a dos objetos del set set.set["valor 1"]; set.set["valor 2"]; var map = jsonrpc.foo.getMap(); // Accedemos a dos objetos del Map; map.map["key 1"]; map.map["key 2"];

Es posible devolver colecciones de objetos como los descritos en el punto anterior

Conclusiones JSON-RPC-Java es una potente herramienta para el desarrollo de aplicaciones Ajax con Java. Nos permite ejecutar funciones Java desde JavaScript sin preocuparnos por la conexin o el objeto XmlHttpRequest. Actualmente esta libreria est en evolucin constante. Se esta realizando una unin con otro proyecto del mismo tipo, llamado jabsorb, que permite devolver objetos con referencias circulares o incluso, referencias a objetos (permitiendo ejecutar funciones de objetos devueltos).

Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype
Enviado por Beatriz Gonzalez el 18 Mayo, 2006 - 21:46 ::

introducin al Javascript
Hola a todos, me gustara antes de comenzar este cursito utilizar este pequeo prrafo a modo de introduccin para as poder presentarme y presentaros en que consistirn los artculos que por entregas ir subiendo a "esta nuestra comunidad". Bueno antes de empezar deciros que se me ocurri crear este curso para dar a conocer mas a fondo el lenguaje de programacin web Javascript, conocer ya no solo lo que la mayora de los que esteis leyendo sabris si no adentrarnos mas a fondo en la metodologa de JavaScript Notation Object (JSON) y por lo tanto en la OOP utilizando JS para as despus tratar las libreras que muchos de los lectores habrn visto y etc...., libreras desarrolladas en JSON, de las cuales se intentar dar un pequeo glosario o gua de referencia de los metodos, clases u objetos desarrollados y adems tras el conocimiento de esta metodologa poder implementar nosotros mismo estas libreras para nuestro uso e incluso crearnos nuevas libreras que nos hagan la vida mas sencilla. De este modo durante el tiempo que dure este pequeo manual, nos meteremos con la creacin de Objetos, Objetos globales, metodos y variables publicas y privadas, creacin de clases, herencia entre ellas, y en definitiva mostrar todo el poder y la energa que tiene un lenguaje de programacin que durante tantos aos y por diversos motivos se ha visto relegado a un simple conocimiento y abandonado a programadores amateurs debido a la falta o la mala documentacin que se ha desarrollado sobre el. En cada entrega de las nuevas lecciones se adjuntaran ejemplos que servirn de ayuda a la hora de comprender lo que se intenta explicar, y digo intenta porque a veces aunque se procure explicar algo correctamente no se consigue llegar con claridad a los oyentes o en este caso conocern como prototype, Ruby on Rails,

lectores. De todos modos si en alguna leccin hay algo que aun as no se consigue explicar correctamente se podr dejar comentarios para as todos ayudarnos mutuamente. Y ahora ya comenzaremos con el primer tema en el que introduciremos al lector al lenguaje JS y en cierta medida a la OOP en base al JavaScript.

Introduccin al Javascript orientado a objetos.

Para comenzar diremos que Javascript es uno de los lenguajes mas conocidos y utilizados del mundo, aun as su conocimiento y desarrollo se ha dejado para amateurs, de echo es bastante comn el comentario de que un programador que se precie no se dedica a Javascript. Y a que es debido esta "leyenda urbana"?. Pues bien entre otras muchas cosas es debido a que:
1. Principalmente la especificacin publicada por ECMA es de una calidad un tanto mala, ya que es difcil de leer y de comprender, y esto ha ocasionado por ejemplo, que algunos autores de libros de JavaScript no hayan podido utilizarlo para actualizar y mejorar los contenidos de sus publicaciones y el conocimiento sobre este lenguaje, y para el que se haya decidido a bajar las especificaciones de ECMA como fue mi caso, se hayan perdido un poco en la bsqueda de nuevos conocimientos 2. Las primeras versiones de Javascript eran bastante dbiles, ya que carecan de herencia, funciones internas.... 3. ECMA se preocupa mas en crear nuevas versiones en vez de dar a conocer y desarrollar una versin completa y facil de entender, lo cual agrava mas an el problema que es la existencia de infinidad de versiones. 4. La existencia de Errores de diseo, como la sobrecarga de "+" para encadenar o anexionar, la poltica de palabras reservadas demasiada extricta y la insercin del punto y coma al final de las sentencias. 5. Y por supuesto los malos libros que contienen errores, poco ejemplos y promueven malas prticas.

Una vez definidos los problemas encontrados en el aprendizaje y divulgacin del JavaScript entraremos a explicar por encima la OOP en Javascript.

Javascript Orientado a Objetos:

Se que en este preciso instante algunos pensareis para qu complicarnos la vida programando javascript orientado a Objetos?, pues la respuesta es tan sencilla como eficiente:
1. 2. 3. 4. Robustez. Simplificacin de cdigo Reutilizacin. Encapsulamiento.

Entre otros muchos beneficios.

Adems olvidaremos las archiconocidas y utilizadas variables globales, que una vez que el cdigo va creciendo realmente no sabes de donde han salido ni en donde se utilizan. Se que, y lo digo por experiencia, a veces las novedades nos asustan, o simplemente nos negamos a aprender porque lo que conocemos es muy eficiente y nos sirve, En resumen, toda esta nueva metodologa de programacin existe y se utiliza por algo..........asi que, por qu negarnos a conocerla y ponerla en prctica? Ahora ya, decir que Javascript no es Java y tampoco es java interpretado; Java es Java y javaScript es Javascript. Tambin deciros que s esta orientado a Objetos, de echo tiene objetos que contienen datos y mtodos que interaccionan con los datos de estos u otros objetos. Algo de lo que no dispone Javascript es de clases, pero si que existen constructores que nos resultan muy tiles al a hora de desarrollarlas.

Cdigo Script del constructor de clases

//Construimos el objeto function constructorObjeto(idObj) { //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML. this.innerTexto = document.getElementById(idObj).innerHTML; //Me creo un metodo pblico que me saca por medio de un alert el string que le pase this.sacarInnerTexto =function(strTexto) { alert(strTexto); } } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto } miObjeto.sacarInnerTexto(miObjeto.innerTexto);

Cdigo HTML del constructor de clases

<div class="center"> <div class="contenedor"> <h1>Ejemplo de constructor de un Objeto</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamar al Objeto</a> </div> </div>

Descargar archivo de ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF8"> <title>Ejemplo 1 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype | AJAXHispano</title> <script type="text/javascript"> //Construimos el objeto function constructorObjeto(idObj) { //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado //y extraemos el innerHTML. this.innerTexto = document.getElementById(idObj).innerHTML; //Me creo un metodo publico que me saca por medio de un alert el string que le pase this.sacarInnerTexto = function(strTexto) { alert(strTexto); } } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.sacarInnerTexto(miObjeto.innerTexto); } </script> <style type="text/css"> h1 {font-size:20px;text-align:center;} div.contenedor {border:1px solid #999;textalign:left;width:45%;height:300px;padding:10px 10px;} div.center {text-align:center;} </style> </head> <body> <div class="center"> <div class="contenedor"> <h1>Ejemplo de constructor de un Objeto</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamar al Objeto</a> </div> </div> <div style="text-align: center;"> <br> <strong>Ejemplo 1 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype </strong><br /><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a> </div> </body>

</html>

Ademas en los objetos que creemos tambin podemos dotarlos de mtodos y variables privadas que no podrn ser utilizadas desde ningun otro objeto o metodo de la aplicacin fuera de su contexto, osea su objeto.

Cdigo Script del creador de mtodos y variables pblicas

//Construimos el objeto function constructorObjeto(idObj) { //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML. this.innerTexto = document.getElementById(idObj).innerHTML; //Me creo un metodo pblico que me saca por medio de un alert el string que le pase this.sacarInnerTexto = function(strTexto) { alert(strTexto); } } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.sacarInnerTexto(miObjeto.innerTexto); }

Cdigo HTML del creador de mtodos y variables pblicas

<div class="center"> <div class="contenedor"> <h1>Ejemplo de creacin de metodo y variables pblicas</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamar al Objeto</a> </div> </div>

Descargar archivo de ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF8"> <title>Ejemplo 2 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype | AJAXHispano</title>

<script type="text/javascript"> //Construimos el objeto function constructorObjeto(idObj) { //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado //y extraemos el innerHTML. this.innerTexto = document.getElementById(idObj).innerHTML; //Me creo un metodo publico que me saca por medio de un alert el string que le pase this.sacarInnerTexto = function(strTexto) { alert(strTexto); } } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.sacarInnerTexto(miObjeto.innerTexto); } </script> <style type="text/css"> h1 {font-size:20px;text-align:center;} div.contenedor {border:1px solid #999;textalign:left;width:45%;height:300px;padding:10px 10px;} div.center {text-align:center;} </style> </head> <body> <div class="center"> <div class="contenedor"> <h1>Ejemplo de creaci&oacute;n de metodo y variables p&uacute;blicas</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamar al Objeto</a> </div> </div> <div style="text-align: center;"> <br> <strong>Ejemplo 2 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype </strong><br /><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a> </div> </body> </html>

Cdigo Script del creador de mtodos y variables privadas

//Construimos el objeto function constructorObjeto(idObj) {

//Defino metodos y variables privadas que no pueden ser accesibles desde fuera del objeto var texto = "Texto privado"; var metodoPrivado = function () { alert(texto+"----Esto es un metodo privado que utiliza una variable privada y que se accede a el solo desde dentro del objeto") } metodoPrivado(); } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); }

Cdigo HTML del creador de mtodos y variables privadas

<div class="center"> <div class="contenedor"> <h1>Ejemplo de creacin de metodo y variables privadas</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamada correcta a un metodo privado</a> </div> </div>

Descargar archivo de ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF8"> <title>Ejemplo 3 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype | AJAXHispano</title> <script type="text/javascript"> //Construimos el objeto function constructorObjeto(idObj) { //Defino metodos y variables privadas que no pueden ser accesibles desde fuera del objeto var texto = "Texto privado"; var metodoPrivado = function () { alert(texto+"----Esto es un metodo privado que utiliza una variable privada y que se accede a el solo desde dentro del objeto") } metodoPrivado(); } function LlamarAlObjeto(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue); } function LlamarAlObjetoIncorrectamente(paramValue) { // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables var miObjeto = new constructorObjeto(paramValue);

//Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.metodoPrivado(); } </script> <style type="text/css"> h1 {font-size:20px;text-align:center;} div.contenedor {border:1px solid #999;textalign:left;width:45%;height:300px;padding:10px 10px;} div.center {text-align:center;} </style> </head> <body> <div class="center"> <div class="contenedor"> <h1>Ejemplo de creaci&oacute;n de metodo y variables p&uacute;blicas</h1> <a href="#" onclick="LlamarAlObjeto(this.id) ;return false" id="link1">Llamada correcta a un metodo privado</a><br><br> </div> </div> <div style="text-align: center;"> <br> <strong>Ejemplo 3 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype </strong><br /><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a> </div> </body> </html>
Y ya para finalizar este tema en el que se trata el lenguaje JS a modo de introduccin hablaremos de la herencia entre clases. En relacin a este aspecto he de decir que tras buscar por internet la posibilidad de Herencia, me he encontrado con algunos ejemplos que principalmente no funcionan, como es el caso del ejemplo de herencias que nos muestra "Douglas Crockford". En este caso y tras probar las posibilidades de herencia me di cuenta de que o no sabia exactamente como funcionaba o es que realmente no se soporta este tipo de herencia, yo he llegado a la conclusin de que no lo soporta. Posteriormente vi que la librera prototype ha desarrollado un metodo por el cual se pueden realizar herencias entre clases. Pero an as segu buscando la forma de tener una metodologa propia para poder implementar las herencias en nuestro propia librera de JS. Y as llegu a un post en el que se trataba el tema en cuestin y en el cul "Harry Fuecks" nos ha abierto la puerta a dotar a nuestrar propias libreras de herencia entre clases. Y como es esto?, pues es tan sencillo como crearnos un objeto que lo que haga sea recorrer cada par "nombre:variable" del objeto que pasamos como original y asignrselo a nuevos pares "nombre:variable" del objeto al que deseamos copiar la herencia. Bueno por si no me he explicado bien vamos a ver unos ejemplos para as ver su funcionamiento.

constructor de un objeto creador de herencias

function creaHerencia(objDestino, objOrigen) { var sConstructor = objOrigen.toString(); var aMatch = sConstructor.match( /\s*function (.*)\(/ ); if ( aMatch != null ) { objDestino.prototype[aMatch[1]] = objOrigen; } for (var m in objOrigen.prototype) { objDestino.prototype[m] =objOrigen.prototype[m]; } };

Cdigo Script del creador de herencias

//Funcion que copia las clases function creaHerencia(objDestino, objOrigen) { var sConstructor = objOrigen.toString(); var aMatch = sConstructor.match( /\s*function(.*)\(/ ); if ( aMatch != null ) {objDestino.prototype[aMatch[1]] = objOrigen; } for (var m in objOrigen.prototype) { objDestino.prototype[m] =objOrigen.prototype[m]; } }; // Funcion que crea las variablespropias de cada objeto function creaciondeIdentificadores(obj) { this.id = document.getElementById(obj)}; // metodo del objeto "creaciondeIdentificadores" que saca el mensaje de alerta creaciondeIdentificadores.prototype.identificador = function() { alert("el valor del campo es:"+this.id.value); }; function datosCampo(obj) { // Llamamos al objeto de referencia this.creaciondeIdentificadores(obj); }; // Llamamos a la funcion que hara que datosCampo herede de creaciondeIdentificadores creaHerencia(datosCampo, creaciondeIdentificadores); function verValordeCampos(obj) { var obj = new datosCampo(obj.id); obj.identificador(); }

Cdigo HTML del creador de herencias

<div class="center"> <div class="contenedor"> <h1>Ejemplo de creacin de herencias</h1> < input type="text" value="" name="campo1" id="campo1" onblur="verValordeCampos(this)"> </div> </div>

Descargar archivo de ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF8">

<title>Ejemplo 4 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype | AJAXHispano</title> <script type="text/javascript"> function copiaClases(objDestino, objOrigen) { var sConstructor = objOrigen.toString(); var aMatch = sConstructor.match( /\s*function (.*)\(/ ); if ( aMatch != null ) { objDestino.prototype[aMatch[1]] = objOrigen; } for (var m in objOrigen.prototype) { objDestino.prototype[m] = objOrigen.prototype[m]; } }; function creaciondeIdentificadores(obj) { this.id = document.getElementById(obj) }; creaciondeIdentificadores.prototype.identificador = function() { alert("el valor del campo es:"+this.id.value); }; function datosCampo(obj) { this.creaciondeIdentificadores(obj); }; copiaClases(datosCampo, creaciondeIdentificadores); function verValordeCampos(obj) { var obj = new datosCampo(obj.id); obj.identificador(); }

</script> <style type="text/css"> h1 {font-size:20px;text-align:center;} div.contenedor {border:1px solid #999;textalign:left;width:45%;height:300px;padding:10px 10px;} div.center {text-align:center;} </style> </head> <body> <form method="post" id="f1" action=""> <div class="center"> <div class="contenedor"> <h1>Ejemplo de creaci&oacute;n de herencias</h1> Para ponerlo en pr&aacute;ctica escriba en el campo y salga de el. La funcion salta en el evento onblur();<br><br> <input type="text" value="" name="campo1" id="campo1" onblur="verValordeCampos(this)">

</div> </div> </form> <div style="text-align: center;"> <br> <strong>Ejemplo 4 Curso Tutorial Manual de Javascript con clases, orientado a objetos con librerias Json y Prototype </strong><br /> <a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a> </div> </body> </html>
Bueno, de momento y por ahora esto creo que es suficiente para no agobiarnos mucho con el tema, creo que lo mejor que podramos hacer llegados a este punto es poner un poco en prctica todo lo que hemos visto hasta el momento. Para as comprobar lo que he comentado sobre los beneficios de la OOP, as de este modo creo que lo mejor sera que cogiramos un ejemplo sencillo de algun cdigo JavaScript que no tenga OOP y ahora lo refactorizsemos y aplicsemos una programacin orientada a objetos para as darnos cuenta de los beneficios que hemos explicado anteriormente. Recordar que esto es solo una pequea introduccin y que an queda bastante camino.

Tutorial Ajax manejo de paso de datos por mtodos GET y POST

Bueno, manos a la obra. Me he permitido compartir y poner a disposicin de los usuarios de ajaxhispano.com la librera ajax que me hice y explicar paso a paso como est hecha y como utilizarla. En primer lugar lo primero que hay que tener es la instancia de creacin del objeto que har la peticion htmlrequest.
Cdigo JavaScript: /* *Esta libreria es una libreria AJAX creada por Javier Mellado con la inestimable *colaboracion de Beatriz Gonzalez. *y descargada del portal AJAX Hispano http://www.ajaxhispano.com *contacto javiermellado@gmail.com * *Puede ser utilizada, pasada, modificada pero no olvides mantener *el espiritu del software libre y respeta GNU-GPL */ function creaAjax(){ var objetoAjax=false; try { /*Para navegadores distintos a internet explorer*/ objetoAjax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { /*Para explorer*/ objetoAjax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { objetoAjax = false;

} } if (!objetoAjax && typeof XMLHttpRequest!='undefined') { objetoAjax = new XMLHttpRequest(); } return objetoAjax;

Una vez creada la instancia, ya solamente tenemos que construir la funcin especfica que nos realice lo que queramos. En mi caso lo que he construdo (por que es lo que hasta ahora me ha hecho falta) es una funcin que pasndole unos valores al script del servidor, me devuelve una cadena de texto y esta cadena de texto me la va a pintar en una capa. Ya sabis, el tpico registro de una web o la interactuacin de datos personales, formularios, etc. entre clienteservidor. Esta funcin recibe como parmetros la url donde se encuentra el script que recoge los datos y los procesa. La capa, que es donde va a recibir y pintar los datos, inicialmente vaca o con el contenido que nos convenga a nosotros. Los valores de las variables que mandamos con el formulario html, -ya veremos como pasarlas para cada mtodo GET y POST ya que esta funcin es genrica y est implementada para usarse indistintamente por uno y otro mtodo- y el mtodo opcional 'GET' o 'POST'.
Cdigo JavaScript: function FAjax (url,capa,valores,metodo) { var ajax=creaAjax(); var capaContenedora = document.getElementById(capa); /*Creamos y ejecutamos la instancia si el metodo elegido es POST*/ if(metodo.toUpperCase()=='POST'){ ajax.open ('POST', url, true); ajax.onreadystatechange = function() { if (ajax.readyState==1) { capaContenedora.innerHTML="Cargando......."; } else if (ajax.readyState==4){ if(ajax.status==200) { document.getElementById(capa).innerHTML=ajax.responseText; } else if(ajax.status==404) { capaContenedora.innerHTML = "La direccion no existe"; } else { capaContenedora.innerHTML = "Error: ".ajax.status; } }

} /*Creamos y ejecutamos la instancia si el metodo elegido es GET*/ if (metodo.toUpperCase()=='GET'){ ajax.open ('GET', url, true); ajax.onreadystatechange = function() {

} ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(valores); return;

if (ajax.readyState==1) { capaContenedora.innerHTML="Cargando......."; } else if (ajax.readyState==4){ if(ajax.status==200){ document.getElementById(capa).innerHTML=ajax.responseText; } else if(ajax.status==404) { capaContenedora.innerHTML = "La direccion no existe"; } else { capaContenedora.innerHTML = "Error: ".ajax.status; } }

} }

} ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(null); return

Pues sto es lo que contiene la librera que os pongo en conocimiento. Bsicamente la nica diferencia a la hora de utilizar un mtodo u otro, es que por el mtodo get, hay que concatenar las variables y valores al parmetro url de forma que cuando tu invoques la funcin FAjax sea as:
Cdigo HTMl: <form method="get" onsubmit="FAjax('ajax.php?campo1='+document.getElementById('campo1').value +'&campo2='+document.getElementById('campo2').value,'capaContenedora','','get'); return false" action="#">

Por mtodo post la invocacin a la funcin AJAX es:

Cdigo HTMl: <form method="post" onsubmit="FAjax('ajax.php,'capaContenedora','campo1= '+document.getElementById('campo1').value +'&campo2='+document.getElementById('campo2').value,'post'); return false" action="#">

Como habris notado, en la funcin FAjax invocada para mtodo get, hay un parmetro vaco. Eso es por que GET necesita la url concatenada con las variables y valores, por lo que los valores no se pueden mandar por separado, como es el caso que necesita POST. Tambin habr quien se pregunte que esto no puede ser vlido para procesarlo desde un script php, asp, jsp, etc por que la cantidad de variables de los formularios no sabemos exactamente con seguridad cuantas van a ser. Bien, entonces es cuando echamos mano del array elements(documents.forms.elements[indice]) de cada formulario javascript, es decir, que hasta ahora yo he utilizado bucles para concatenar la cadena a mandar con variables a la funcin AJAX usando este array de elementos, el cual al estar indexado, es ms facil de acceder y trabajar con ellos. A continuacin os pongo un pequeo ejemplo con cada uno de los mtodos utilizados: Ejemplo de utilizacin AJAX por mtodo GET. Ver

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ajax: Ejemplo - Env&iacute;o de datos por m&eacute;todo GET</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="libreriaAjax.js"></script> <style type="text/css"> #capaContenedora{ border-style: groove double; padding: 10px; margin: 14px; } </style> </head> <body> Este ejemplo enviar&aacute; datos por m&eacute;todo get y los pondr&aacute; la capa de abajo:<br><br> <div style="text-align: center;"> <form method="get" onsubmit="FAjax('ajax.php?campo1='+document.getElementById('campo1').valu e+'&amp;campo2='+document.getElementById('campo2').value,'capaContenedora ','','get'); return false" action="#"> <div>Campo1:<input type="text" id="campo1" value="valor1" /></div> <div style="text-align=top;">Campo2:<input id="campo2" value="valor2"></div> <div><input type="submit" value="enviar"></div> </form></div> <div id="capaContenedora">Capa que recibir&aacute; los datos</div> <div style="text-align: center;"><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a> </div> </body> </html>
Ejemplo de utilizacin AJAX por mtodo POST. Ver

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ajax: Ejemplo - Env&iacute;o de datos por m&eacute;todo POST</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="libreriaAjax.js"></script> <style type="text/css"> #capaContenedora{ border-style: groove double; padding: 10px; margin: 14px; border-color: blue;

} </style> </head> <body> Este ejemplo enviar&aacute; datos por m&eacute;todo post y los pondr&aacute; la capa de abajo:<br><br> <div style="text-align: center;"> <form method="post" onsubmit="FAjax('ajax.php','capaContenedora','campo1='+document.getElemen tById('campo1').value+'&amp;campo2='+document.getElementById('campo2').va lue,'POST'); return false" action="#"> <div>Campo1:<input type="text" id="campo1" value="valor1" /></div> <div style="text-align=top;">Campo2:<input id="campo2" value="valor2"></div> <div><input type="submit" value="enviar"></div> </form></div> <div id="capaContenedora">Capa que recibir&aacute; los datos</div> <div style="text-align: center;"><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en espa&ntilde;ol">AJAX Hispano.com</a><br> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional"></a></div> </body> </html>
Estos ejemplos as como las libreras aqu nombradas estan en este fichero para descargar, bajar manual. Esto es todo, espero que os sea de gran ayuda :-)