Este documento describe las tecnologías AJAX y jQuery. Explica que AJAX permite actualizaciones parciales de páginas web sin recargas completas mediante el uso de JavaScript, XML y objetos XMLHttpRequest. También describe las características y funciones básicas de jQuery como facilitar la manipulación del DOM, eventos y peticiones AJAX de forma más simple que JavaScript puro.

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');”

15. JQuery
• $('body').css('background', '#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'); });

17. Funciones para AJAX
$.ajax({
url: '/ruta/hasta/pagina.php',
type: 'POST',
async: true,
data: 'parametro1=valor1&parametro2=valor2',
success: procesaRespuesta,
error: muestraError
});

18. Funciones para AJAX

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' }
]

23. Jquery Data Tables