1. CONEXIÓN A BASES DE DATOS
RELACIONALES CON MVC
usando jQuery y AJAX en MVC 5
Prof. José Edgardo Henríquez Calderón
2. ¿Qué es AJAX?
• Ajax (Asynchronous JavaScript and XML) se refiere a un grupo
de tecnologías que se utilizan para desarrollar aplicaciones
web.
• Ajax permite que un usuario de la aplicación web interactúe con una
página web sin la interrupción que implica volver a cargar la página
web. La interacción del sitio web ocurre rápidamente sólo con partes
de la página de recarga y renovación.
3. Ajax se compone de las siguientes
tecnologías:
• XHTML y CSS para presentar información.
• DOM (Document Object Model - modelo de objetos de documento)
para visualizar e interactuar de forma dinámica la información
presentada.
• El objeto XMLHttpRequest para manipular los datos de forma
asíncrona con el servidor web.
• XML, HTML y XSLT para el intercambio y la manipulación de datos.
• Se visualiza JavaScript para enlazar solicitudes e información de datos.
4. • Ajax incorpora estas tecnologías para crear un nuevo enfoque al
desarrollo de aplicaciones web.
• Ajax define un método de iniciar un cliente con la comunicación del
servidor sin recargas de páginas.
• Proporciona una forma de permitir actualizaciones de página
parciales.
5. • En una aplicación web tradicional, las solicitudes HTTP, que se inician
mediante la interacción del usuario con la interfaz web, se realizan a
un servidor web.
6. • En una aplicación web Ajax, no se interrumpe el usuario en
interacciones con la aplicación web.
7. Limitaciones de Ajax
• Las limitaciones siguientes representan algunas de las desventajas
principales:
• Soporte de navegador - No todos los navegadores admiten JavaScript
o el objeto XMLHttpRequest. Incluso entre navegadores que no
ofrecen soporte a JavaScript y XMLHttpRequest, estos objetos se
pueden tratar de forma diferente. Se deben tener en cuenta todas las
implementaciones del navegador de Ajax.
• Seguridad y privacidad de usuario - No se resuelven todos los puntos
de vista. Es necesario tener en cuenta los problemas relacionados con
la seguridad y la privacidad de usuario a la hora de desarrollar una
aplicación Ajax.
8. • Accesibilidad - Puesto que no todos los navegadores disponen de soporte
para JavaScript o el objeto XMLHttpRequest, debe asegurarse de
proporcionar una manera de hacer que la aplicación web sea accesible
para todos los usuarios.
• Marcador y navegación - Puesto que Ajax se utiliza para cargar bits de
contenido de forma asíncrona en una página existente, es posible que
parte de la información de la página no corresponda a una página recién
cargada. Puede que el historial del navegador y los marcadores no se
comporten de forma correcta porque el URL no se ha modificado aunque
ciertas partes de la página se hayan cambiado.
•
9. • Motor de búsqueda - No es posible realizar búsquedas en
aplicaciones Ajax; sin embargo, sí se pueden utilizar las características
y elementos de Ajax de una aplicación en la que se puedan realizar
búsquelas.
10. Que es JQuery
• Librería de JavaScript
• autor: John Resig (14/01/2006 en el BarCamp NYC)
• múltiples contribuciones de desarrolladores
• bajo licencia GPL
11. Facilita la programación de JavaScript:
• Código más reducido y compatible con casi todos los navegadores.
• Programada eficientemente: comprimida solo ocupa unas decenas de
KBs.
12. Características JQuery
• Selección de elementos DOM
• Eventos
• Manipulación de la hoja de estilos CSS.
• Efectos y animaciones. Animaciones personalizadas.
• AJAX
• Utilidades varias: obtener información del navegador, operar con objetos y
vectores, funciones para rutinas comunes, etc.
• Compatible con la mayoría de los navegadores
13. Características JQuery
• Sencillo de escribir. El código es comprensible y fácil de leer.
• Fácil de escalar y mantener
• " jQuery no es un framework, es solamente una librería para
• facilitarnos el manejo del DOM, los eventos y las peticiones
• AJAX
• " Framework MVC en JavaScript: Angular.js, Backbone.js,
• React.js
• ! Otros proyectos JQuery: jQuery User Interface, QUnit
• JS Unit Testing, jQuery Mobile
14. Ejemplo JavaScript vs JQuery
• function cambiaFondo(color) {
• document.body.style.background = color;
• }
• onload="cambiaFondo('#ccc');”
16. Conceptos Básicos de JQuery
• $(document).ready() : indicar si el documento se encuentra
preparado para su manipulación.
• $(document).ready(function() { console.log('el documento está
preparado'); });
19. Funciones para AJAX
• dataType:
• xml : responseXML
• html: responseText
• script: evalúa JavaScript y devuelve el resultado
• json: objeto JavaScript generado
20. funciones simplificadas y especializadas
$.ajax() : $.get(), $.post()
$.get('/ruta/hasta/pagina.aspx');
$.get(url, datos, funcionManejadora); //también $.post()
$.load() : inserta el contenido de la respuesta del servidor en el
elemento de la página que se indica
21. funciones simplificadas y especializadas
$('#info').load('/ruta/hasta/pagina.aspx’);
$.getJSON() : carga respuesta de tipo JSON
$.getScript() : evalúa/ejecuta una respuesta JavaScript
22. Ajax y formularios
• Transformar información de un formulario a una cadena de datos
$('#myForm').serialize();
Crear un array de objetos conteniendo
información de un formulario
$('#myForm').serializeArray();
// crea una estructura como esta:
[
{ name : 'field1', value : 123 },
{ name : 'field2', value : 'hello world' }
]
Al combinar estas tecnologías, las páginas web parece que son más receptivas puesto que los paquetes pequeños de datos se intercambian con el servidor y las páginas web no se vuelven a cargar cada vez que un usuario realiza un cambio de entrada.
Fuente: https://www.ibm.com/docs/es/rational-soft-arch/9.6.1?topic=page-asynchronous-javascript-xml-ajax-overview
Desde una perspectiva de usuario de página web, significa que la mejora de la interacción con una aplicación web, que proporciona al usuario más control de su entorno, es similar a la de una aplicación de escritorio.
El servidor web procesa la solicitud y devuelve una página HTML al cliente. Durante el transporte HTTP, el usuario no puede interactuar con la aplicación web.
El motor de Ajax o el intérprete JavaScript permite que el usuario interactúe con la aplicación web independientemente del transporte HTTP procedente del servidor o que tenga el servidor como destino representando la interfaz y gestionando las comunicaciones con el servidor en nombre del usuario.
Aunque Ajax es una técnica de desarrollo de aplicaciones web que se ha diseñado para que las páginas web sean más receptivas e interactivas con un usuario, Ajax presenta algunas limitaciones a tener en cuenta antes de desarrollar una aplicación basada en Ajax.