Embed Size (px)
Citation preview
Cargar javascript desde JSON o AJAX con eval() en FF y execScript() en IE ¿Estás desarrollando una aplicación web en la que usas JSON o AJAX para cargar dinámicamente datos? ¿Además necesitas cargar dinámicamente no solamente datos sino también código javascript para ser utilizado en la página? A continuación te expongo el modo de hacerlo para que funcione en FireFox 3.X y IE7 (casualmente, también 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 código javascript. Pero obviamente, no importa la librería o código que uses para el JSON o AJAX. Hay muchísima literatura en internet sobre ese tema.
Ejemplo de carga de datos
Empezaré con un ejemplo de carga de datos tipo texto, que es lo más habitual. Y luego pondré un ejemplo de carga de código 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 año, y queremos que nuestra página recargue un <div id="'div_top_webs'"></div> con la lista del top 10 de webs de ese mes. Es un ejemplo clásico de recarga de datos dinámica usando JSON o AJAX.
Para ello construimos una función llamada js_actualizar_top_webs, que llamaremos al cambiar el valor de ese select. Esta función tal como está definida en el código de ejemplo hace una llamada JSON mediante el objeto $ de jQuery y cuando los datos se hayan recibido por completo ejecutará el código en rojo, en dónde
"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 código 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 método .html() de jQuery. ¿Sencillo, no?
Ejemplo de carga de código javascript
Bueno, vamos ahora a algo que "cuesta" un poquitín más. Bueno, de hecho a mí me ha hecho gastar casi 8 horas de cansada búsqueda por internet y de leer mucho y probar mucho, hasta llegar a lo que te voy a poner aquí! ;)
Abajo tienes el código anterior ligeramente cambiado: hemos añadido unas líneas de código más, con el fin de poder cargar y ejecutar un código 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 líneas que corresponden a una sentencia condicional, y esto es necesario para ejecutar un código u otro según estemos en FireFox o en Internet Explorer (como mínimo estos dos navegadores). Para ambos casos el código 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 código javascript que necesitemos ejecutar en nuestra web).
La diferencia radica en que Internet Explorer ejecutará el código de javascript mediante el método window.execScript(), mientras que FireFox ejecutará el código al usar el método window.eval(), en ambos casos pasando como argumento el código javascript que queremos ejecutar.
Otro aspecto importante y que tal vez pase desapercibido a primera vista es que en ambos casos ejecutamos sendos métodos sobre el objeto window. Eso es fundamental (me llevó más de una hora leyendo descubrirlo), para que el código javascript a ejecutar pase a estar "disponible" desde otros "ámbitos" de la misma página. De esta forma, si por ejemplo, dentro de ese código cargado dinámicamente definimos una función llamada "js_mostrar_leyenda()", si queremos usarla en el resto de la página, deberemos llamarla así: window.js_mostrar_leyenda();
JSON-RPC-Java: comunicaciones Ajax transparentes. Tutorial completo y ejemplosTras publicar dos artículos sobre el tema y dado el interés que despierta esta tecnología 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 podáis incorporarla a vuestros proyectos.
JSON-RPC-Java es una tecnología 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 básicoPara 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 serán accesibles desde el cliente. Para hacer públicos sus métodos y funciones debemos registrar una instancia de nuestra clase en un objeto JSONRPCBridge que previamente habremos creado y guardado en la sesión HTTP. Este objeto es el encargado, junto a un Servlet que más adelante aprenderemos a instalar, de comunicar a JavaScript la estructura de nuestras clases y de gestionar la comunicación 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 dirección del Servlet mencionado anteriormente) y llamar a nuestra función Java desde JavaScript.
Desarrollando clases para la interacciónLas clases que sirven para comunicar no deben cumplir ningún requisito especial. Así podemos utilizar cualquier clase que ya hayamos desarrollado o alguna desarrollada específicamente para la interacción con el cliente Web. Recomiendo que las clases que se hagan accesibles estén específicamente diseñadas para JSON-RPC-Java. Estas clases permitirán ejecutar las acciones y obtener los datos necesarios en cada caso con el mínimo numero de comunicaciones HTTP, mejorando así la eficiencia. Además, al estar específicamente diseñadas, no permitirán ejecutar funciones de negocio que comprometan la seguridad del sistema.
Nosotros utilizaremos para nuestros ejemplos una clase especialmente diseñada lo suficientemente sencilla como para mostrar el funcionamiento del framework sin intromisiones. Más tarde añadiremos más funciones, para nuestro primer ejemplo en Devolviendo tipos simples su implementación es la siguiente:
public class Foo { public int getInteger() { return 2; } public boolean getBoolean() { return true; } public String getString(){ return "Hola, mundo!"; }}
InstalaciónLa instalación del sistema es muy sencilla. Primero debéis descargar la distribución. Para los ejemplos contenidos en este tutorial utilizaremos la versión 1.0.1 que podéis descargar aquí. Que descomprimiremos en nuestro disco duro.
De la distribución nos interesan dos archivos: la librería Java y el cliente JavaScript. El primero lo encontraremos en la raíz del directorio donde descomprimimos la distribución con el nombre jsonrpc-1.0.jar y lo debemos copiar en el directorio <WebContent>/WEB-INF/lib de nuestra aplicación. El segundo lo encontraremos en /webapps/jsonrpc/jsonrpc.js y lo deberemos copiar en un directorio para que pueda enlazarse en las páginas HTML, como por ejemplo en <WebContent>/js.
Debemos configurar un Servlet que será el encargado de comunicar al código 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 más 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 sesión. Aunque existen formas de registrar clases desde un JSP, nosotros recomendamos, por claridad en el código, hacerlo desde un Servlet. Para ello utilizamos la clase JSONRPCBridge. Mantendremos una instancia de JSONRPCBridge por cada sesión, con el código:
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 instácia de clase que queramos hacer accesible desde JavaScript ejecutamos la siguiente instrucción:
json_bridge.registerObject("foo", new Foo());
Mediante esta instrucción asignamos un nombre a la instancia, que será el que usaremos más tarde para acceder a ella desde JavaScript
Devolviendo tipos simplesUna 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 aplicación>/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 síncrona o asíncrona
De forma síncrona 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 asíncrona el cliente no bloqueará el navegador y la ejecución seguirá. Deveromos crear una función que será la que se llamará al recibir la respuesta desde el servidor, así:
jsonrpc.foo.getInteger(handler);
La función que capturará el resultado tendrá dos parametros:
El resultado de la ejecución, en caso de que la función retorne algún resultado Una excepción, que tendrá valor en caso de que en el código Java se produzca alguna
excepción
Por ejemplo:
function handler(result, exception) { if (!exception) { alert(result); }}
Devolviendo objetosJSON-RPC-Java tiene la capacidad de serializar los objetos Java retornados por las funciones y desserializarlos como objetos JavaScript. Mostraremos esta característica 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 añadiremos una función en Foo que devuelva un objeto de este tipo:
public Bar getBar() {
return new Bar("bar", 2, false);}
Es posible ejecutar esta función 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 objetosAdemás 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 collección de objetos, a la que podremos acceder así:
var list = jsonrpc.foo.getList();
// Accedemos a dos objetos de la listalist.list[0];list.list[3];
var set = jsonrpc.foo.getSet();
// Accedemos a dos objetos del setset.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
ConclusionesJSON-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 conexión o el objeto XmlHttpRequest.
Actualmente esta libreria está en evolución constante. Se esta realizando una unión 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 PrototypeEnviado por Beatriz Gonzalez el 18 Mayo, 2006 - 21:46 ::
introdución al JavascriptHola a todos, me gustaría antes de comenzar este cursito utilizar este pequeño párrafo a modo
de introducción para así poder presentarme y presentaros en que consistirán los artículos 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 programación web Javascript, conocer ya no solo lo que la mayoría de los
que esteis leyendo sabréis si no adentrarnos mas a fondo en la metodología de JavaScript
Notation Object (JSON) y por lo tanto en la OOP utilizando JS para así después tratar las librerías
que muchos de los lectores habrán visto y conocerán como prototype, Ruby on Rails, etc....,
librerías
desarrolladas en JSON, de las cuales se intentará dar un pequeño glosario o guía de referencia de
los metodos, clases u objetos desarrollados y además tras el conocimiento de esta metodología
poder implementar nosotros mismo estas librerías para nuestro uso e incluso crearnos nuevas
librerías que nos hagan la vida mas sencilla.
De este modo durante el tiempo que dure este pequeño manual, nos meteremos con la creación
de Objetos, Objetos globales, metodos y variables publicas y privadas, creación de clases,
herencia entre ellas, y en definitiva mostrar todo el poder y la energía que tiene un lenguaje de
programación que durante tantos años y por diversos motivos se ha visto relegado a un simple
conocimiento y abandonado a programadores amateurs debido a la falta o la mala
documentación que se ha desarrollado sobre el.
En cada entrega de las nuevas lecciones se adjuntaran ejemplos que servirán 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
lectores. De todos modos si en alguna lección 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.
Introducción 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 común 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 especificación publicada por ECMA es de una calidad un tanto mala, ya que es
difícil 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 búsqueda de nuevos conocimientos
2. Las primeras versiones de Javascript eran bastante débiles, ya que carecían de herencia, funciones
internas....
3. ECMA se preocupa mas en crear nuevas versiones en vez de dar a conocer y desarrollar una versión
completa y facil de entender, lo cual agrava mas aún el problema que es la existencia de infinidad
de versiones.
4. La existencia de Errores de diseño, como la sobrecarga de "+" para encadenar o anexionar, la
política de palabras reservadas demasiada extricta y la inserción del punto y coma al final de las
sentencias.
5. Y por supuesto los malos libros que contienen errores, poco ejemplos y promueven malas práticas.
Una vez definidos los problemas encontrados en el aprendizaje y divulgación 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. Robustez.
2. Simplificación de código
3. Reutilización.
4. Encapsulamiento.
Entre otros muchos beneficios.
Además olvidaremos las archiconocidas y utilizadas variables globales, que una vez que el
código 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
metodología de programación existe y se utiliza por algo..........asi que, ¿por qué negarnos a
conocerla y ponerla en práctica?
Ahora ya, decir que Javascript no es Java y tampoco es java interpretado; Java es Java y
javaScript es Javascript. También deciros que sí esta orientado a Objetos, de echo tiene objetos
que contienen datos y métodos 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.
Código 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 público 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);
}
Código 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=UTF-8"><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;text-align: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ñ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 también podemos dotarlos de métodos y variables privadas
que no podrán ser utilizadas desde ningun otro objeto o metodo de la aplicación fuera de su
contexto, osea su objeto.
Código Script del creador de métodos y variables públicas
//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 público 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);
}
Código HTML del creador de métodos y variables públicas
<div class="center">
<div class="contenedor">
<h1>Ejemplo de creación de metodo y variables
públicas</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=UTF-8"><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;text-align: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ón de metodo y variables pú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ñ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>
Código Script del creador de métodos 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); }
Código HTML del creador de métodos y variables privadas<div class="center"> <div class="contenedor"> <h1>Ejemplo de creación 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=UTF-8"><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;text-align: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ón de metodo y variables pú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ñ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 introducción hablaremos de la herencia entre clases. En relación 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 conclusión de que no lo soporta.
Posteriormente vi que la librería prototype ha desarrollado un metodo por el cual se pueden realizar herencias entre clases. Pero aún así seguí buscando la forma de tener una metodología
propia para poder implementar las herencias en nuestro propia librería de JS. Y así llegué a un post en el que se trataba el tema en cuestión y en el cuál "Harry Fuecks" nos ha abierto la puerta a dotar a nuestrar propias librerías 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 asignárselo 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 herenciasfunction 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]; }};
Código Script del creador de herencias//Funcion que copia las clasesfunction 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 objetofunction 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(); }
Código HTML del creador de herencias<div class="center"> <div class="contenedor"> <h1>Ejemplo de creación 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=UTF-8"><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;text-align: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ón de herencias</h1> Para ponerlo en prá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ñ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 podríamos hacer llegados a este punto es poner un poco en práctica 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 sería que cogiéramos un ejemplo sencillo de algun código JavaScript que no tenga OOP y ahora lo refactorizásemos y aplicásemos una programación orientada a objetos para así darnos cuenta de los beneficios que hemos explicado anteriormente. Recordar que esto es solo una pequeña introducción y que aún queda bastante camino.
Tutorial Ajax manejo de paso de datos por métodos GET y POST
Bueno, manos a la obra. Me he permitido compartir y poner a disposición de los usuarios de ajaxhispano.com la librería 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 creación del objeto que hará la peticion htmlrequest.
Código 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 [email protected]**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 función específica que nos realice lo que queramos. En mi caso lo que he construído (por que es lo que hasta ahora me ha hecho falta) es una función que pasándole 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 sabéis, el típico registro de una web o la interactuación de datos personales, formularios, etc. entre cliente-servidor.
Esta función recibe como parámetros 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 vacía 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 método GET y POST ya que esta función es genérica y está implementada para usarse indistintamente por uno y otro método- y el método opcional 'GET' o 'POST'.
Código 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; } } } ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(valores); return;}
/*Creamos y ejecutamos la instancia si el metodo elegido es GET*/if (metodo.toUpperCase()=='GET'){
ajax.open ('GET', 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; } } } ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(null); return}}
Pues ésto es lo que contiene la librería que os pongo en conocimiento.
Básicamente la única diferencia a la hora de utilizar un método u otro, es que por el método get, hay que concatenar las variables y valores al parámetro url de forma que cuando tu invoques la función FAjax sea así:
Código HTMl:<form method="get" onsubmit="FAjax('ajax.php?campo1='+document.getElementById('campo1').value+'&campo2='+document.getElementById('campo2').value,'capaContenedora','','get'); return false" action="#">
Por método post la invocación a la función AJAX es:
Código HTMl:<form method="post" onsubmit="FAjax('ajax.php,'capaContenedora','campo1='+document.getElementById('campo1').value+'&campo2='+document.getElementById('campo2').value,'post'); return false" action="#">
Como habréis notado, en la función FAjax invocada para método get, hay un parámetro vacío. 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.
También habrá quien se pregunte que esto no puede ser válido 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 función AJAX usando este array de elementos, el cual al estar indexado, es más facil de acceder y trabajar con ellos.
A continuación os pongo un pequeño ejemplo con cada uno de los métodos utilizados:
Ejemplo de utilización AJAX por método 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ío de datos por mé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á datos por método get y los pondrá la capa de abajo:<br><br> <div style="text-align: center;"> <form method="get" onsubmit="FAjax('ajax.php?campo1='+document.getElementById('campo1').value+'&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á los datos</div> <div style="text-align: center;"><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en españ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 utilización AJAX por método 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ío de datos por mé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á datos por método post y los pondrá la capa de abajo:<br><br> <div style="text-align: center;"> <form method="post" onsubmit="FAjax('ajax.php','capaContenedora','campo1='+document.getElementById('campo1').value+'&campo2='+document.getElementById('campo2').value,'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á los datos</div> <div style="text-align: center;"><a href="http://www.ajaxhispano.com" title="AJAX Hispano el portal ajax en españ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 librerías aquí nombradas estan en este fichero para descargar, bajar manual.
Esto es todo, espero que os sea de gran ayuda :-)
