xXLancerXx
Usuario (Perú)
Ajax: Aprendiendo a cargar contenido en un div Un Poco de teoría: Ajax, mas que una tecnología en sí es un conjunto de tecnologías (XHTML, CSS, DOM, XML, XSLT, JSON, XMLHttpRequest) unidas con Javascript. Utilizando Ajax conseguiremos mejorar considerablemente la interacción del usuario con la aplicación (web), ya que la página no necesitará ser recargada, actuará en segundo plano, por lo que el usuario siempre tendrá información en la pantalla. Todo este código es de javascript osea que debe ir dentro de los <head> y </head> luego debe ir dentro de <script type="text/javascript"> y </scrip> oe sino creando un archivo con terminación js ejmp: cargado.js y llamarlo dentro del head por ejm: <script src="autorecargado.js" type="text/javascript"></script> Y que mejor que empezar entendiendo de lo que hablamos, que con un ejemplo, cargar contenido en un div con ajax: Para ello he creado 2 funciones, la primera crea un objeto según el navegador y realiza una petición HTTP al servidor web, al realizar la petición devuelve un estado, pues cuando este estado cambie se ejecutará otra función: function Carga(url,id) { //Creamos un objeto dependiendo del navegador var objeto; if (window.XMLHttpRequest) { //Mozilla, Safari, etc objeto = new XMLHttpRequest() ; } else if (window.ActiveXObject) { //Nuestro querido IE try { objeto = new ActiveXObject("Msxml2.XMLHTTP" ); } catch (e) { try { //Version mas antigua objeto = new ActiveXObject("Microsoft.XMLHTTP" ); } catch (e) {} } } if (!objeto) { alert("No ha sido posible crear un objeto de XMLHttpRequest" ); } //Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion objeto.onreadystatechange=function() { cargarobjeto(objeto,id) } objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona objeto.send(null) // Enviamos los datos con el metodo send } Y la función a la que llamamos localiza el estado recibido y según la respuesta, cargamos el contenido en el div o mostramos un gif animado simulando una precarga, también podemos poner en texto “Cargando…” o cualquier otro mensaje que queramos. function cargarobjeto(objeto, id) { if (objeto.readyState == 4) //si se ha cargado completamente document.getElementById(id).innerHTML=objeto.responseText else //en caso contrario, mostramos un gif simulando una precarga document.getElementById(id).innerHTML='<img src="loader.gif" alt="cargando" />' } dijo:Una vez tenemos las funciones creadas, solo nos falta llamarlas, podemos hacerlo por ejemplo a través de un enlace: <a href="javascript:Carga(‘cargar.html’, ‘contenido’);" title="Cargar contenido">Cargar contenido</a> Recordando que el primer parámetro es la URL que queremos cargar y el segundo es la ID del div en el que la cargaremos. Lightbox Seguro que muchas veces han visto efectos en las fotografías al hacerle click, pues bien, esto es una librería de javascript muy fácil de implementar llamada lightbox. Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente “Contenido, Presentación y Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A) Parte 1 - el programa de instalación 1. Álbum v2.0 utiliza el Marco de Prototype y Scriptaculous Efectos de la Biblioteca. Usted tendrá que incluir estos tres archivos Javascript en su cabecera. <script type="text/javascript" src="js/prototype.js"> </ script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </ script> <script type="text/javascript" src="js/lightbox.js"> </ script> 2. Incluya el álbum archivo CSS (o anexar su hoja de estilo activo con los estilos de álbum). <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" /> 3. Verifica en el CSS y asegúrese de que el prevlabel.gif referencia y archivos de nextlabel.gif están en el lugar correcto, osea al subirlo al hosting editar el css y direccionar a las imagenes. También, asegúrese de que los archivos loading.gif closelabel.gif y como se indica en la parte superior del archivo lightbox.js están en el lugar correcto, en otras palabras, ubicar las direcciones de imagenes dentro del js y cambiar la direccion con el de la carpeta donde las subio. Parte 2 - Activar 1. Añadir un rel = "lightbox" atribuir a un enlace de etiquetas para activar la mesa de luz. Por ejemplo: href="images/image-1.jpg" rel="lightbox" <a title="Mi imagen caption"> # 1 </ a> Opcional: Utilice el atributo de título si quieres mostrar el resultado de un título. 2. Si usted tiene un conjunto de imágenes relacionadas que le gustaría al grupo, siga el paso uno, sino, además, de un nombre de grupo entre corchetes en el atributo rel. Por ejemplo: href="images/image-1.jpg" <a imagen rel="lightbox"> # 1 </ a> href="images/image-2.jpg" <a imagen rel="lightbox"> # 2 </ a> href="images/image-3.jpg" <a imagen rel="lightbox"> # 3 </ a> No hay límites al número de conjuntos de imágenes por página o cuántas imágenes están permitidos en cada conjunto. Vaya locura! Link de los archivos: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip dijo:En la descarga tmb incluye un ejemplo de como utilizarlo! Ejemplo Online: http://www.huddletogether.com/projects/lightbox2/#example Ojala les Sirva ... y por favor comenten ...
ACA LES PRESENTO UN EJEMPLO SIMPLE SOBRE WEBSERVICE EN C# En este ejemplo crearemos un web service simple que únicamente devuelva una cadena de texto. Si recibiera parámetros o realizara alguna operación (consultar una base de datos, realizar cálculos, etc…) el procedimiento sería análogo a cualquier método “típico”. Comencemos por la creación de un nuevo Web Service. Abrimos VisualStudio y creamos un nuevo proyecto “Aplicación del Servicio Web ASP.NET” tal y como se ve en la captura: Veréis que se os crea un método “HelloWorld” que retorna un string “Hola a todos”. Podéis crear cualquier método que queráis para que haga la tarea que prefiráis (recibiendo o no parámetros). Para el ejemplo usaremos ese método porque es uno de los más simples. No tocamos nada, simplemente guardamos y hacemos “Generar -> Publicar WebService”. Esto publicará en el servidor web el servicio web que acabamos de crear. Evidentemente necesitamos un servidor en el que publicarlo, en mi caso he elegido realizar la publicación por ftp. La dirección sería: ftp://NombreDeUsuario:Contraseña@DireccionDelServidor/Una vez hecho esto, podemos irnos a un navegador y teclear: http://DireccionDelServidor/Service1.asmx y veremos que el servicio web responde de la forma esperada. Es decir, todo está listo Crear una aplicación que lo consuma no es problema. Creamos un proyecto “Aplicación para Windows” y construimos una interfaz con esta pinta: Ahora debemos agregar una referencia al WebService para que nuestra aplicación lo conozca. Para ello hacemos “Proyecto -> Agregar referencia Web” y en la dirección URL tecleamos: http://DireccionDelServidor/Service1.asmx y le damos un nombre a la referencia web, en mi caso “HelloWorld”. Ahora nuestro proyecto ya conoce al WebService pero, ¿cómo lo usamos? Bien, hagamos doble click sobre el botón “Voy a tener suerte”. Haremos que al ser clicado instancie al WebService, llame al método HelloWorld y ponga en la caja de texto el resultado del método. dijo: Service1 service = new Service1(); txtAns.Text = service.HelloWorld();[/quote] Ahora sólo nos queda ejecutar el programa y: Perfecto Hemos creado un WebService y después una aplicación de escritorio que lo consume. A partir de ahora, todo es ir complicando un poco más el proceso dotando al servicio web de más operaciones y más complejas. Aca un video para que lo aprecien mejor: