contenido - suarezdefigueroa.es de cliente.pdf · cakephp, laravel o zend. python. también de...

14
Unidad 5: Scripts de Cliente Manuel Castaño Guillén 1 Contenido Introducción .................................................................................................................................. 2 Elección del lenguaje de programación ........................................................................................ 2 Diferencias entre la ejecución en lado del cliente y del servidor ................................................. 4 Modelo de objetos del documento DOM ..................................................................................... 4 JQuery ........................................................................................................................................... 6 Incorporación de JQuery a una página...................................................................................... 7 Antes de realizar cualquier acción en el documento con jQuery, debemos asegurarnos de que el documento esté listo. Para ello usamos $(document).ready() : .................................... 7 Sintaxis de jQuery...................................................................................................................... 8 Selectores .................................................................................................................................. 8 Eventos ...................................................................................................................................... 9 Efectos ....................................................................................................................................... 9 Manipulación de DOM desde jQuery ...................................................................................... 10 Recuperando y cambiando la información de DOM ........................................................... 10 Añadiendo información a DOM .......................................................................................... 10 Eliminando información de DOM ........................................................................................ 11 Manipulando estilos ............................................................................................................ 11 AJAX ......................................................................................................................................... 12 Ejemplo búsqueda progresiva utilizando AJAX ................................................................... 13

Upload: duonghanh

Post on 05-Oct-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

1

Contenido Introducción .................................................................................................................................. 2

Elección del lenguaje de programación ........................................................................................ 2

Diferencias entre la ejecución en lado del cliente y del servidor ................................................. 4

Modelo de objetos del documento DOM ..................................................................................... 4

JQuery ........................................................................................................................................... 6

Incorporación de JQuery a una página...................................................................................... 7

Antes de realizar cualquier acción en el documento con jQuery, debemos asegurarnos de

que el documento esté listo. Para ello usamos $(document).ready() : .................................... 7

Sintaxis de jQuery ...................................................................................................................... 8

Selectores .................................................................................................................................. 8

Eventos ...................................................................................................................................... 9

Efectos ....................................................................................................................................... 9

Manipulación de DOM desde jQuery ...................................................................................... 10

Recuperando y cambiando la información de DOM ........................................................... 10

Añadiendo información a DOM .......................................................................................... 10

Eliminando información de DOM ........................................................................................ 11

Manipulando estilos ............................................................................................................ 11

AJAX ......................................................................................................................................... 12

Ejemplo búsqueda progresiva utilizando AJAX ................................................................... 13

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

2

Introducción

Caso práctico

Después de aprender a desarrollar en PHP

Luisa hay cuestiones que no le “cuadran”.

Luisa: Sabes, Juan, hemos aprendido a

desarrollar en PHP pero no entiendo como

algunas páginas web hacen para recuperar

datos sin necesidad de navegar de una página a

otra.

Juan: Claro, es que para empezar a programar

en PHP os enseñan la técnica más sencilla que

es un formulario y enviar los datos, pero hay técnicas más vistosas que no necesitan ir de una

página a otra.

Luisa: ¿por ejemplo?

Juan: AJAX es la más famosa, es código JavaScript que se comunica con el servidor, envía datos

desde la página y recibe respuestas que incluye en la misma página.

Luisa: ¿algo parecido a lo que hacen los navegadores que a la vez que escribimos nos van

sugiriendo respuestas?

Juan: Exacto.

Elección del lenguaje de programación El HTML puede considerarse el lenguaje nativo de Internet, pero no es el único que

encontramos en las páginas web.

Cada vez existe un mayor número de lenguajes de programación, tanto para web como para

móviles, que nos permiten ampliar las posibilidades de desarrollo de una manera más sencilla,

dependiendo de si estamos haciendo un proyecto para iOS, Android, etc.

La asociación IEEE Spectrum ha realizado una clasificación de los lenguajes más utilizados,

utilizando encuestas propias, datos de Google y de GitHub.

En la práctica, el uso de un lenguaje u otro varía mucho en función de las necesidades y

también de las preferencias del propio desarrollador. A pesar de ello, la encuesta de IEEE nos

señala una tendencia en la que los lenguajes de código abierto son los preferidos por los

desarrolladores al permitir estudiar, modificar y mejorar su diseño.

A la hora de seleccionar con qué lenguaje trabajar, es importante conocer las diferencias y

singularidades de cada uno de ellos, sus ventajas e inconvenientes, en función de la plataforma

para la que estemos desarrollando nuestro proyecto. Además, también conviene familiarizarse

con el concepto framework, cada vez más extendido, y que hace referencia al conjunto de

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

3

buenas prácticas, módulos y librerías de cada lenguaje para abordar proyectos y necesidades

concretas.

Ruby. Es uno de los lenguajes de programación que mayor crecimiento ha

experimentado en los últimos años. Creado por Yukihiro “Matz” Matsumoto, Ruby es

un lenguaje de programación de código abierto orientado a objetos y que permite la

programación tanto en web como en escritorio. Para la programación de webs o

webapps, se utiliza su conocido framework “Rails”.

ASP.NET. Es un lenguaje creado por Microsoft y que requiere un servidor Windows

para su utilización. Se utiliza principalmente para desarrollar sitios web dinámicos,

aplicaciones web o servicios web XML.

PHP. Se trata de un lenguaje de servidor de código abierto muy extendido, flexible y

potente, muy adecuado para el desarrollo web. Ha sido utilizado para la creación de

millones de webs en el mundo, incluidas algunas tan conocidas como Wikipedia o

Facebook. Esta popularidad hace que existan varios frameworks que se pueden utilizar

a la hora de abordar un proyecto web o una WebApp como Codeigniter, Symfony,

CakePHP, Laravel o Zend.

Python. También de código abierto, orientado a objetos que permite la creación de

sitios web dinámicos y complejos pero de actualización fácil y con un corto tiempo de

carga. Actualmente, se utiliza en webs tan populares como Pinterest, Instagram o

Dropbox. A pesar de que hay múltiples frameworks, el más utilizado y conocido es

Django, su framework para web.

JavaScript: Es uno de los lenguajes, si no “el lenguaje”, más utilizado y popular para

ejecutar del lado del cliente. Gracias a su multitud de frameworks, se pueden realizar

desarrollos realmente impresionantes. Los más conocidos son jQuery, Backbone.js,

Ember.js, Knockout.js o Angular.js. Para ejecutar del lado del servidor, se utiliza su

framework Node.js.

Objetive-C: Este lenguaje de programación se orienta a objetos y se utiliza

especialmente para crear aplicaciones para Mac OS X e iOS. Es una capa por encima de

C, por lo que es posible compilar cualquier programa escrito en C con un compilador

de Objetive-C.

Swift: Creado por Apple, por lo que su aplicación es exclusiva al desarrollo de

aplicaciones en Mac OS X e iOS. Una de sus mayores ventajas es que se puede usar

cualquier librería programada en Objetive-C y llamar a funciones de C, lo que permite

que los desarrolladores puedan intercambiar parte del código según su preferencia.

Dart: Si Swift es el lenguaje para OS e iOS, Dart es el lenguaje de código abierto creado

por Google para Android, su objetivo no es reemplazar a JavaScript, pero sí proponer

una alternativa más moderna. Es más, se podría decir que Google ha elaborado la

estructura de Dart pensando en que los desarrolladores que conozcan JavaScript se

sientan cómodos con este nuevo entorno.

También puede resultar útil consultar la página web de la empresa de software Tiobe, que

publica mensualmente un ranking de lenguajes en función del número de búsquedas

realizadas en los principales buscadores en todo el mundo.

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

4

Diferencias entre la ejecución en lado del cliente y del servidor Como ya vimos, la ejecución en el lado cliente, script de cliente, consiste en ejecutar el código

en el navegador. Esto lleva consigo unas diferencias a ejecutar el código en el lado servidor,

script de servidor:

En los scripts de cliente el trabajo es realizado en el procesador de la máquina cliente,

con lo cual liberamos de trabajo al servidor, esto es muy útil cuando tenemos

problemas de saturación en los accesos al servidor

En caso ejecutar el código en el servidor es muy habitual que haya más comunicación

entre el cliente y el servidor pues habrá un intercambio de información constante, esto

producirá un mayor consumo de ancho de banda, para evitarlo es mejor realizar todos

los cálculos o procesos que podamos en el lado de cliente.

La respuesta del código ejecutado en el entorno cliente normalmente será más rápida

que la respuesta del lado servidor puesto que evitamos el retardo de enviar y recibir

los datos.

La desventaja principal de procesar en el lado cliente es que el código es visible y

accesible por el usuario con lo cual nos pueden copiar nuestro trabajo fácilmente y

encontrar fallos de seguridad, por tanto, es más seguro el procesamiento en el lado

servidor.

De todas formas, hemos de tener en cuenta que actualmente, cada vez, es más barato el

ancho de banda, el almacenamiento en la nube y características que hacen que el desarrollo

de aplicaciones desde el lado servidor no sea tan costoso.

Modelo de objetos del documento DOM Para interactuar con una página web se provee al lenguaje de una implementación del

Document Object Model (DOM).

DOM es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un

conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar

sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

5

manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido,

estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó

principalmente. El responsable del DOM es el World Wide Web Consortium (W3C).

El DOM no es ni parte de del HTML, ni es parte del JavaScript, sino una serie de reglas

separadas. Todas estas reglas son implementadas por todos los principales fabricantes de

navegadores, y cubre dos áreas:

Haciendo el modelo del HTML. Cuando el explorador carga una página, se crea un

modelo de la página en memoria. El DOM específica la forma en el cual el explorador

debería estructurar el modelo usando el árbol de DOM. El DOM es llamado como un

objeto modelo porque el modelo (árbol DOM) está hecho de objetos, donde cada

objeto representa una diferente parte de la página cargada en la ventana del

explorador.

Accediendo y cambiando la página HTML. DOM también define métodos y

propiedades de las que podemos hacer uso para acceder y actualizar cada objeto en

este modelo, que a su vez actualiza lo que el usuario ve en el explorador.

Cada nodo es un objeto con métodos y propiedades. Cada cambio que hagamos al árbol de

DOM se verá reflejado en el navegador y podrá cambiar la página web visualizada.

Cuando un navegador carga la página web, se crea una estructura de árbol de esa página,

árbol de DOM y se guarda en la memoria del navegador. Podemos encontrar diferentes tipos

de nodos:

document: Es el inicio del árbol, representa la página web completa (que también

corresponde al objeto documento). Cuando accedemos a cualquier elemento,

atributo, o nodo de texto navegamos a través del nodo documento que es el punto

principal para visitar todo el árbol de DOM.

elementos: Los elementos HTML describen la estructura de una página HTML. Para

acceder al árbol de DOM, se puede buscar por elementos y una vez que encontremos

los elementos que queremos, entonces podremos acceder a sus nodos de texto o

propiedades que queremos.

atributos: Las etiquetas de aperturas de los elementos HTML pueden llevar atributos y

estos son representados por el nodo de atributos en el árbol de DOM. Los nodos

atributos no son hijos del elemento que los contiene; pues ellos son parte del

elemento. Una vez que accedemos al elemento, hay métodos y propiedades

específicos en JavaScript para leer o cambiar ese atributo del elemento. Un ejemplo

muy común de esto es cambiar el valor de la clase de atributo para disparar una nueva

regla CSS que afecte su presentación.

texto: Una vez que hemos accedido a un nodo de elemento, podemos llegar al texto

que está dentro del elemento, esto se almacena en su propio nodo de texto. Los nodos

de texto no pueden tener hijos. Si un elemento contiene texto y otro un elemento hijo,

el elemento hijo no es un hijo del nodo texto sino que un hijo del elemento que lo

contiene.

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

6

Ejemplos de cambios que podemos realizar en una página web manipulando el árbol DOM:

Insertar nuevas etiquetas

Cambiar el contenido de un párrafo

Ordenar el contenido de una tabla

Ejemplo de construcción de un árbol DOM a partir de una página web:

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo de DOM</title>

</head>

<body>

<!-- es un ejemplo un poco simple -->

<p>Bienvenidos al <b>DOM</b></p>

</body>

</html>

Crearía el siguiente árbol DOM:

JQuery JQuery es un framework, una librería desarrollada en JavaScript cuyo objetivo que sea más

fácil de desarrollo del código cliente en la página web.

JQuery simplifica las líneas de código de JavaScript consiguiendo en pocas líneas realizar tareas

que en JavaScript llevarían mucho trabajo, en concreto, simplifica el manejo de eventos, la

manipulación del árbol DOM y la utilización de AJAX.

JQuery corrige muchos de los problemas que causa JavaScript, en concreto, está diseñado para

funcionar en todos los navegadores de igual manera corrigiendo muchas incompatibilidades.

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

7

Incorporación de JQuery a una página Para incorporar JQuery a nuestras páginas tenemos dos opciones:

Descargar la librería de jquery.com a nuestro alojamiento y enlazar a esta librería

Enlazar a librería jQuery de algún CDN (content delivery network, una “Red de

distribución de contenido” es un conjunto de servidores que contienen copias de una

misma serie de contenidos -imágenes, vídeos, documentos, …- y que están ubicados

en puntos diversos de una red para poder servir sus contenidos de manera más

eficiente)

Para enlazar jQuery, al tratarse de código JavaScript, utilizaríamos una sintaxis:

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo</title>

</head>

<script type="text/javascript" src=" jquery-x-x.min.js"></script>

<body>

Mi web

</body>

</html>

donde x.x es la versión

Si lo queremos enlazar al CDN de Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Antes de realizar cualquier acción en el documento con jQuery, debemos asegurarnos de que

el documento esté listo. Para ello usamos $(document).ready() :

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo</title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(iniciar);

function iniciar() {

// tareas a realizar con jQuery

}

</script>

<body>

Mi web

</body>

</html>

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

8

Sintaxis de jQuery La sintaxis para indicar a jQuery las acciones a realizar es:

$( selector ) . evento ( tareas a realizar );

Los selectores son los mismos usados en CSS. Las tareas, por comodidad, es mejor

desarrollarlas en una función aparte. Veamos algunos ejemplos:

$(“p”).click (procesar); Ejecutaría la función procesar al hacer clic en cualquier párrafo de la página

$(“#texto”).mouseover(procesar) Al pasar el ratón por encima del elemento con id texto se ejecutaría la función procesar

$(“td input”).keyup(procesar) Al escribir en un cuadro de texto que está dentro de una celda se ejecutaría la función procesar

Selectores Recordemos en este punto algunos de los selectores más habituales que podemos utilizar en

CSS3:

Etiqueta html. Uno de los selectores más básicos, una etiqueta html, este selector

afecta a todas las etiquetas html de ese tipo que haya en la página. Ejemplo p afecta a

todos los párrafos

Clase (.nombreclase). Otro selector básico, afecta a todos los elementos de la página a

los que se le haya aplicado esa clase. Ejemplo .rojo afectaría a todos los elementos con

estilo clase .rojo

Id (#id). Selector básico que afecta a un elemento (teóricamente solo puede haber un

elemento con un id en concreto). Por ejemplo #texto afectaría al elemento html con id

texto.

Clase aplicada a un elemento (elemento.clase). Este selector afecta a las etiquetas que

tengan una clase en concreto. Ejemplo p.rojo afecta a los párrafos que se les haya

aplicado la clase .rojo

Elemento dentro de elemento (elemento1 elemento2). Se aplica a todos elementos 2

que sean hijos de elementos 1. Ejemplo p a afecta a todos los hipervínculos siempre

que estén dentro de un párrafo.

Elemento con un determinado valor en el atributo (elemento[atributo=”valor”]). Se

aplica a los elementos que tengan un valor concreto en un atributo especificado.

Ejemplo a[href=”suarezdefigueroa.es”] se aplica a todos los hipervínculos que

apunten a suarezdefigueroa.es (ojo sin http://www.)

Pseudo elementos (elemento:pseudo) se aplica a determinados elementos o en

determinadas situaciones. Ejemplos, a:hover se aplica a todos los hipervínculos al

situar el ratón encima, p:first se aplica al primer párrafo en una colección de párrafos.

Hay muchas más posibilidades pero con estas es suficiente para una visión rápida.

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

9

Eventos Dentro de los eventos que podemos programar, entre otros, en JQuery tenemos:

Eventos de ratón click Al hacer clic dblclick Al hacer doble clic mouseenter Al posicionar el ratón encima mouseleave Al sacar el ratón de encima mousemove Al mover el ratón por encima

Eventos de teclado keypress Al presionar una tecla keydown Al hundir una tecla keyup Al soltar una tecla

Eventos de formulario submit Al enviar un formulario change Al cambiar un valor de un control de

formulario focus Al adquirir el enfoque un control de formulario blur Al perder el enfoque un control de formulario

Otros eventos ready Se produce cuando el árbol DOM está cargado completamente

load Sucede cuando la página o el elemento en cuestión está completamente cargado en el navegador.

resize Al cambiar el tamaño de la ventana del navegador

scroll Sucede al desplazar el contenido de la página dentro del navegador

unload Al salir de la página

Efectos Dentro de las funciones desarrolladas en jQuery una de las más destacadas es la realización de

efectos especiales para páginas web, que se desarrollan rápido y con poco código fuente. Estos

efectos sirven para aplicar dinamismo a una página web y una respuesta atractiva ante la

interacción con el usuario.

Dentro de estos efectos tenemos:

$(“selector”).hide(velocidad, callback) Oculta un elemento, podemos indicar velocidad en milisegundos y podemos indicar una función callback que se ejecutará después de ocultar el elemento.

$(“selector”).show(velocidad, callback) Igual que el anterior pero para mostrar $(“selector”).toogle(velocidad, callback) Alterna los dos efectos anteriores, es decir, una

vez oculta otra vez muestra y así sucesivamente. $(“selector”).fadeIn(velocidad, callback) Igual que show pero progresivo $(“selector”).fadeOut(velocidad, callback)

Igual que hide pero progresivo

$(“selector”).fadeTo(velocidad, opacidad, callback)

Muestra y oculta progresivamente, podemos indicar velocidad, opacidad (entre 0 y 1) y función a realizar después del efecto.

$(“selector”).slideDown(velocidad, callback)

Muestra un efecto persiana abriendo

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

10

$(“selector”).slideUp(velocidad, callback) Muestra un efecto persiana cerrando $(“selector”).slideToogle(velocidad, callback)

Una vez cierra otra abre y así sucesivamente

$(“selector”).animate(estilos,velocidad, callback)

Realiza un cambio progresivo a los estilos indicados

Estas acciones se pueden encadenar, de forma que cuando una acaba comienza la siguiente,

para ello basta con ponerlas consecutivamente, por ejemplo, recoger un párrafo y extender

después:

$(“p”).slideUp(1000).slideDown(1000);

Manipulación de DOM desde jQuery Desde el código jQuery podemos manipular el árbol DOM leyendo su información, agregando

contenido (que se reflejará en la visualización de la página), cambiando su información o

borrándola.

Recuperando y cambiando la información de DOM

Para recuperar la información del árbol DOM tenemos las funciones:

text() Para recuperar o cambiar el contenido de etiquetas como párrafos, capas,…

html() Recupera o cambia el contenido html de etiquetas como párrafos, capas,…

val() Recupera o modifica el contenido de controles de formularios. attr() Recupera o modifica el valor de un atributo

Ejemplo para cambiar la dirección URL de un link:

$(“a”).attr(“href”,”http://www.nuevapagina.es”);

Ejemplo recuperar el contenido escrito en un cuadro de texto:

$(“input”).val();

Añadiendo información a DOM

Para añadir nuevos elementos en nuestra página web tenemos varios métodos:

prepend() Añade información al principio de una colección append() Añade información al final de una colección de elementos after() Añade información detrás del elemento seleccionado before() Añade información antes del elemento seleccionado

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

11

Ejemplo añadir un elemento al final de una lista:

$(“ul”).append(“<li>elemento al final de la lista</li>”)

Ejemplo añadir una imagen después de una lista:

$(“ul”).after(“<img src=’imagen.jpg’>”)

Eliminando información de DOM

Para borrar información de una página tenemos los métodos:

remove() Elimina los elementos seleccionados y sus hijos empty() Elimina los hijos de los elementos seleccionados

Ejemplo borrar una lista:

$(“ul”).remove();

Ejemplo borrar los elementos de una lista:

$(“ul”).empty();

Manipulando estilos

Para cambiar el aspecto de los elementos de la página web tenemos:

css() Cambiar una o varias propiedades de los estilos de un elemento addClass() Aplicar una clase (previamente definida) a un elemento removeClass() Borrar una clase que se está aplicando a un elemento

Ejemplo poner letra en azul y fondo en amarillo a un párrafo:

$("p").css({"background-color": "yellow", "color": "#00F”"});

Ejemplo poner letra en azul y fondo en amarillo a un párrafo aplicando la clase que

definiremos previamente mediante:

.azulsobreamarillo {background-color: yellow; color: blue}

$("p").addClass(“azulsobreamarillo”);

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

12

AJAX El método XMLHttpRequest (XHR) de JavaScript permite a los navegadores comunicarse con el

servidor sin la necesidad de recargar la página. Este método, también conocido como Ajax

(Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.

Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una petición a una

URL y cuando recibe una respuesta, una vez recibida la respuesta una función de devolución

puede ser ejecutada, esta función recibe además la respuesta del servidor y puede utilizar esta

respuesta para incluirla en la página sin necesidad, como hemos dicho, de recargar la página o

llamar a otra página (En el esquema anterior podemos observar que en la navegación normal

se cargan dos páginas diferentes en el navegador mientras que en la navegación utilizando

AJAX solo se visualiza una página por parte del usuario). Debido a que la respuesta es

asíncrona, el resto del código de la aplicación continúa ejecutándose.

A través de varios métodos, jQuery provee soporte para Ajax, de forma independiente del

navegador que utilicemos, estos son:

$.get()

$.getScript()

$.getJSON()

$.post()

$().load().

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

13

A pesar que la definición de Ajax posee la palabra XML, la mayoría de las aplicaciones no

utilizan dicho formato para el transporte de datos, sino que en su lugar se utiliza HTML plano o

información en formato JSON (JavaScript Object Notation).

JSON es un formato intercambio de información compacto, más que XML porque puede no

usar etiquetas o nombres de campos. Es muy sencillo, esto ha hecho que sea muy usado en

AJAX. En JSON podemos representar los datos con

objetos: conjunto desordenado de pares nombre/valor. Un objeto comienza con

{ (llave de apertura) y termine con } (llave de cierre). Cada nombre es seguido por

: (dos puntos) y los pares nombre/valor están separados por , (coma).

{ "nombre" : "A", "apellido" : "B", }

Vectores: colección de valores. Un arreglo comienza con [ (corchete izquierdo) y

termina con ] (corchete derecho). Los valores se separan por , (coma).

["A","B","C"]

[10,20,30]

[{"titulo":"Título 1","descripcion":"Descripción 1"}, {"titulo":"Título 2","descripcion":"Descripción

2"}]

Ejemplo búsqueda progresiva utilizando AJAX

En la página html crearemos una función que será invocada cada vez que el usuario pulse una

tecla y que enviará las peticiones de búsqueda a la página php ( función cargarnombres) y otra

función que procesará la respuesta recibida desde la página php ( función listadonombres):

<script type="text/javascript">

$(document).ready(iniciar);

function iniciar() {

$("#nombreabuscar").keyup(cargarnombres);

}

function cargarnombres(){

var tecleado;

tecleado=$("#nombreabuscar").val();

$.post("busqueda.php",{texto:tecleado},listadonombres);

}

function listadonombres(datos)

{$("#resultado").html(datos);}

</script>

<body>

<input type=”text” id=”nombreabuscar” name=”nombreabuscar”>

<div id=”resultado”></div>

</body>

En la página tendremos un cuadro de texto llamado #nombreabuscar y una capa donde

cargaremos los datos recibidos llamada #resultado.

Unidad 5: Scripts de Cliente Manuel Castaño Guillén

14

Solo se envía un dato llamado texto y que debe coincidir con la variable $_POST[“texto”] de la

página búsqueda.php que tendrá el siguiente contenido:

<?

$texto=$_POST["texto"];

$servidor= "localhost"; $usuario= "root"; $clave= ""; $bd= "basededatos";

$conexion= new mysqli($servidor, $usuario, $clave, $bd);

if ($conexion->connect_error) { die("Error de conexión: " . $conexion->connect_error);}

$sql = "SELECT * FROM ALUMNOS WHERE APELLIDOS like '%$texto%'";

$resultado = $conexion->query($sql);

if ($resultado->num_rows > 0)

{ while( $registro = $resultado->fetch_assoc() )

{echo "Nombre:" . $registro["NOMBRE"]." ".$registro["APELLIDOS"]."<br>";}}

else

{ echo "No se encontraron alumnos"; }

$conexion->close(); ?>

Por simplicidad hemos realizado un archivo .php que directamente genera código HTML y, así,

en la página receptora, o sea, la página html del script de cliente, solo será necesario utilizar el

método html(…) para cargar el código recibido dentro de la capa.