Upload
duonghanh
View
217
Download
0
Embed Size (px)
Citation preview
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.