Este documento presenta una introducción a jQuery y AJAX. Explica qué es jQuery, sus características y cómo incluirlo en páginas web. Luego describe la sintaxis básica de jQuery, incluyendo cómo seleccionar elementos, usar eventos y más. También introduce conceptos como AJAX y cómo funciona para actualizar páginas web de forma asíncrona sin recargas completas.
0 calificaciones0% encontró este documento útil (0 votos)
76 vistas28 páginas
Este documento presenta una introducción a jQuery y AJAX. Explica qué es jQuery, sus características y cómo incluirlo en páginas web. Luego describe la sintaxis básica de jQuery, incluyendo cómo seleccionar elementos, usar eventos y más. También introduce conceptos como AJAX y cómo funciona para actualizar páginas web de forma asíncrona sin recargas completas.
Este documento presenta una introducción a jQuery y AJAX. Explica qué es jQuery, sus características y cómo incluirlo en páginas web. Luego describe la sintaxis básica de jQuery, incluyendo cómo seleccionar elementos, usar eventos y más. También introduce conceptos como AJAX y cómo funciona para actualizar páginas web de forma asíncrona sin recargas completas.
Este documento presenta una introducción a jQuery y AJAX. Explica qué es jQuery, sus características y cómo incluirlo en páginas web. Luego describe la sintaxis básica de jQuery, incluyendo cómo seleccionar elementos, usar eventos y más. También introduce conceptos como AJAX y cómo funciona para actualizar páginas web de forma asíncrona sin recargas completas.
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 28
Ingeniería de Software
con Inteligencia Artificial
www.senati.edu.pe CURSO: DESARROLLO DE APLICACIONES WEB I
Desarrollar Web completa con elementos JQuery y Ajax www.senati.edu.pe
OBJETIVOS En esta lección se abordan los siguientes objetivos: • Entender qué es Jquery: conocer sus características y posibilidades. • Aprender la sintaxis y utilizar sentencias de control para empezar a crear programas simples. • Saber qué formas existen para incluir Jquery en nuestras páginas web.
www.senati.edu.pe Desarrollar Web interactiva con JavaScript y JQuery básicas 1. jQuery - Introducción 2. Uso de jQuery 3. Uso del Evento Document.Ready 4. Selectores de jQuery 5. Eventos en jQuery 6. Ajax – Introducción 7. Como funciona AJAX 8. Objeto XHTMLRequest
www.senati.edu.pe INTRODUCCION A JQUERY › jQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. › jQuery es una biblioteca JavaScript liviana de "escribir menos, hacer más". › El propósito de jQuery es facilitar el uso de JavaScript en su sitio web. › jQuery toma muchas tareas comunes que requieren muchas líneas de código JavaScript para llevarlas a cabo y las envuelve en métodos que puede llamar con una sola línea de código. › jQuery también simplifica muchas de las cosas complicadas de JavaScript, como las llamadas AJAX y la manipulación DOM. www.senati.edu.pe INTRODUCCION A JQUERY La biblioteca jQuery contiene las siguientes características: › Manipulación HTML / DOM › Manipulación de CSS › Métodos de eventos HTML › Efectos y animaciones › AJAX › Utilidades
www.senati.edu.pe USO DE JQUERY Hay varias formas de comenzar a usar jQuery en su sitio web. Usted puede: › Descargue la biblioteca jQuery de jQuery.com <head> <script src="jquery-3.6.0.min.js"></script> </head> › Incluya jQuery de una CDN, como Google <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/ jquery.min.js"> </script> </head>
www.senati.edu.pe SINTAXIS DE JQUERY Con jQuery seleccionas (consulta) elementos HTML y realizas "acciones" en ellos. La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML y realizar alguna acción en los elementos. La sintaxis básica es: $( selector ).acción() › Un signo $ para definir / acceder a jQuery › Un ( selector ) para "consultar (o buscar)" elementos HTML › Una acción jQuery () que se realizará en los elementos Ejemplo: $(this).hide() - oculta el elemento actual. $("p").hide() - oculta todos los elementos <p>. $(".test").hide() - oculta todos los elementos con class = "test". $("#test").hide() - oculta el elemento con id = "test".
www.senati.edu.pe EVENTO DOCUMENT READY Es posible que haya notado que todos los métodos jQuery en muchos ejemplos están dentro de un evento de preparación de documentos: $(document).ready(function(){
// jQuery métodos van aquí...
}); Esto es para evitar que se ejecute cualquier código jQuery antes de que el documento termine de cargarse (esté listo). Es una buena práctica esperar a que el documento esté completamente cargado y listo antes de trabajar con él. Esto también le permite tener su código JavaScript antes del cuerpo de su documento, en la sección de cabecera.
www.senati.edu.pe SELECTORES DE JQUERY › Los selectores de jQuery le permiten seleccionar y manipular elementos HTML. › Los selectores de jQuery se utilizan para "buscar" (o seleccionar) elementos HTML en función de su nombre, id, clases, tipos, atributos, valores de atributos y mucho más. Se basa en los selectores CSS existentes. › Todos los selectores en jQuery comienzan con el signo de dólar y paréntesis: $(). El selector de elementos El selector de elementos de jQuery selecciona elementos en función del nombre del elemento, por ejemplo: Cuando un usuario hace clic en un botón, todos los <p>elementos estarán ocultos:
www.senati.edu.pe SELECTORES DE JQUERY El selector de #id El selector de jQuery usa el atributo id de una etiqueta HTML para encontrar el elemento específico. #id Una identificación debe ser única dentro de una página, por lo que debe usar el selector #id cuando desee encontrar un elemento único y exclusivo. Ejemplo: Cuando un usuario hace clic en un botón, el elemento con id=“test” se ocultara. $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
www.senati.edu.pe SELECTORES DE JQUERY El selector de clases El .class selector de jQuery busca elementos con una clase específica. Para buscar elementos con una clase específica, escriba un carácter de punto, seguido del nombre de la clase Ejemplo: Cuando un usuario hace clic en un botón, el elemento con class=“test” se ocultara. $(document).ready(function(){ $("button").click(function(){ $(“.test").hide(); }); });
www.senati.edu.pe MÁS EJEMPLOS DE SELECTORES DE JQUERY Syntax Description Example $("*") Selects all elements Probar $(this) Selects the current HTML element Probar $("p.intro") Selects all <p> elements with class="intro" Probar $("p:first") Selects the first <p> element Probar $("ul li:first") Selects the first <li> element of the first <ul> Probar $("ul li:first-child") Selects the first <li> element of every <ul> Probar $("[href]") Selects all elements with an href attribute Probar $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Probar $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Probar $(":button") Selects all <button> elements and <input> elements of type="button" Probar $("tr:even") Selects all even <tr> elements Probar $("tr:odd") Selects all odd <tr> elements Probar
www.senati.edu.pe EVENTOS DE JQUERY Todas las acciones de los diferentes visitantes a las que puede responder una página web se denominan eventos. Un evento representa el momento preciso en que sucede algo. Ejemplos: › mover el mouse sobre un elemento › seleccionando un botón de radio › haciendo clic en un elemento
www.senati.edu.pe EVENTOS DE JQUERY A continuación, se muestran algunos eventos DOM habituales:
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
www.senati.edu.pe SINTAXIS EVENTOS EN JQUERY En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente. Para asignar un evento de clic a todos los párrafos de una página, puede hacer esto: $("p").click();
El siguiente paso es definir qué debe suceder cuando se desencadena el evento.
Debes pasar una función al evento: $("p").click(function(){ // las acciones van acá!! });
www.senati.edu.pe INTRODUCCION A AJAX › AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones web asíncronas. › Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible interactuar con el servidor sin necesidad de recargar la página web, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. › Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página, aunque existe la posibilidad de configurar las peticiones como síncronas de tal forma que la interactividad de la página se detiene hasta la espera de la respuesta por parte del servidor. www.senati.edu.pe INTRODUCCION A AJAX AJAX no es un lenguaje de programación. AJAX solo usa una combinación de: › Un XMLHttpRequestobjeto integrado en el navegador (para solicitar datos de un servidor web) › JavaScript y HTML DOM (para mostrar o utilizar los datos) AJAX permite que las páginas web se actualicen de forma asincrónica mediante el intercambio de datos con un servidor web detrás de escena. Esto significa que es posible actualizar partes de una página web, sin recargar toda la página.
www.senati.edu.pe COMO FUNCIONA AJAX 1. Se produce un evento en una página web (se carga la página, se hace clic en un botón) 2. JavaScript crea un objeto XMLHttpRequest 3. El objeto XMLHttpRequest envía una solicitud a un servidor web 4. El servidor procesa la solicitud. 5. El servidor envía una respuesta a la página web. 6. La respuesta es leída por JavaScript. 7. JavaScript realiza la acción adecuada (como la actualización de la página)
www.senati.edu.pe OBJETO XMLHTTPREQUEST Todos los navegadores modernos admiten el XMLHttpRequest. El objeto XMLHttpRequest se puede utilizar para intercambiar datos con un servidor web detrás de escena. Esto significa que es posible actualizar partes de una página web, sin recargar toda la página. Su uso requiere de los siguientes pasos: 1. Definir una función de devolución de llamada 2. Abra el objeto XMLHttpRequest 3. Enviar una solicitud a un servidor
www.senati.edu.pe OBJETO XMLHTTPREQUEST La propiedad onreadystatechange define una función de devolución de llamada que se ejecutará cuando cambie readyState. La propiedad readyState tiene el estado de XMLHttpRequest. La propiedad status y la propiedad statusText tienen el estado del objeto XMLHttpRequest.
La función onreadystatechange se llama cada vez que cambia readyState. Cuando readyState es 4 y el estado es 200, la respuesta está lista. Ejemplo:
www.senati.edu.pe OBJETO XMLHTTPREQUEST El objeto XMLHttpRequest se utiliza para solicitar datos de un servidor. Enviar una solicitud a un servidor Para enviar una solicitud a un servidor, usamos los métodos open () y send () del XMLHttpRequestobjeto: xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); Open(método, url, async) especifica el tipo de requerimiento. Método: Tipo de requerimiento -> GET o POST url: dirección de servidor Async: true (asíncrono), false (síncrono). Send(): Envia el requerimiento al servidor. www.senati.edu.pe OBJETO XMLHTTPREQUEST El objeto XMLHttpRequest se utiliza para solicitar datos de un servidor.
Propiedades de respuesta del servidor
responseText: Esta propiedad devuelve la respuesta del servidor como una cadena de JavaScript y puede usarla en consecuencia: document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML: Esta propiedad devuelve la respuesta del servidor como un objeto
DOM XML.
www.senati.edu.pe AJAX CON JQUERY AJAX es la técnica de programación que permite a las aplicaciones web establecer una comunicación cliente-servidor de forma asíncrona sin necesidad de recargar la página web cada vez se solicite la información (lo cual evita además una transferencia de información innecesaria). El método load() es la forma más simple de obtener datos de un servidor y escribir el resultado devuelto en un contenedor (como por ejemplo en un <div>). www.senati.edu.pe AJAX CON JQUERY Desde un formulario HTML se pueden enviar datos utilizando los métodos GET (los datos se envían en la propia URL) o POST (más seguro y recomendable), siendo procesados luego por un lenguaje del lado del servidor (como PHP). Para ello es importante que ambos lenguajes usen el mismo método para el envío y la recepción, lo cual es también aplicable si la comunicación se realiza mediante AJAX. Para establecer dicha comunicación con AJAX en JQuery disponemos de los métodos get() y post(), en los cuales indicaremos como parámetros el nombre del archivo que recibirá los datos en el servidor web, los datos a enviar (indicando los mismos nombres de variables esperados por el servidor) y una función que recibirá el resultado de la petición.
www.senati.edu.pe AJAX CON JQUERY Otra forma de realizar la petición (un poco más compleja pero también más completa) es utilizando el método ajax() de JQuery, algunos de cuyos parámetros son (hemos subrayado los más usados):
www.senati.edu.pe AJAX CON JQUERY Ejemplo del Metodo $.ajax()
