Tutorial Completo Ajax

AJAX
Tutorial de introducción
Miguel Ángel Villarroel Salgueiro

Departamento de Informática
Universidad de Valladolid
Estructura del tutorial

  Introducción
  JavaScript
  XML
  Ajax Básico
  Ajax Avanzado
  Ejemplo sencillo
  Ajax y Bases de Datos
  Ajax y XML
  La llamada POST
  Más ejemplos
Miguel Ángel Villarroel Salgueiro 2008
1
Fuentes
  Ajax Tutorial (www.w3schools.com, 2008)
  Simple Ajax Example (www.degraeve.com,
2008)
  Ajax Tutorial (www.xul.fr, 2008)
  Ajax: Creating Web Pages with Asincronous

Javascript and XML (Edmond Woychowsky,
2007)
  Ajax: A New Approach to Web Applications
(Jesse James Garrett, 2005)
Introducción
2
¿AJAX?
  AJAX es un acrónimo de Asynchronous
JavaScript And XML.
  Desarrollos iniciales desde 1997.
  Ajax: A New Approach to Web Applications

  Jesse James Garrett, Feb-18-2005.
  http://www.adaptivepath.com/ideas/essays/
archives/000385.php
  Muy popular
  Orkut, Gmail, Google Groups, Google Suggest,
Google Maps, Flickr, Amazon A9.com, etc.
AJAX es un framework
  Ajax no es un lenguaje de programación.
  Ajax es una plataforma tecnológica.
  Javascript
  XML (Extensible Markup Language)
  HTML/CSS
  Etc.
  Ajax es una arquitectura de aplicaciones.
  Es un marco de desarrollo para aplicaciones Web
(framework).
3
¿Por que es tan popular?
  Con AJAX se pueden crear aplicaciones web
mejores, más rápidas y más amigables.
  AJAX está basado en JavaScript y ¿llamadas
HTTP?.
  HTTP requests.
  Utiliza herramientas estándar
  El nombre AJAX es parte del éxito.
Breve historia
  Microsoft Outlook 2000 (acceso web).
  Diferentes formas de llamada en IE de MS.
// Provide the XMLHttpRequest class for IE 5.x-6.x:
if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
throw new Error( "This browser does not support XMLHttpRequest." )
};
  Implementación nativa en Mozilla 1.0 en 2002.

  Otros fabricantes:
  Apple:Safari 1.2, Konqueror, Opera Software: Opera 8.0,
iCab: 3.0b352, Microsoft: Internet Explorer 7.0 ¿?.
4
Breve historia
  El World Wide Web Consortium publicó una
especificación Working Draft para el objeto
XMLHttpRequest el 15 de abril de 2008.
  “para documentar un conjunto mínimo de
características interoperables basadas en
implementaciones existentes, permitiendo a
los desarrolladores Web el uso de estas
características sin la necesidad de código
dependiente de la plataforma.”.
Frameworks AJAX
  Existen distintos framework con métodos y
funciones reutilizables.
  “Compiladores” JavaScript
  Librerías de funciones
  Frameworks para el lado del servidor (server-side)
basados en JavaScript.
  Ejemplos
  JavaScript: Dojo toolkit, jQuery, Mootools, etc.
  Java: Google Web Toolkit, IT Mill Toolkit, Wings
Framework
  .NET: Ajax.NET Professional, ASP.NET AJAX
  PHP: Sajax, Tigermouse, Xajax.
  Python: Pyjamas es un compiladorJavaScript.
  Etc.
5
Aplicaciones Web clásicas
  El modelo clásico intentaba reducir el número
de llamadas HTTP.
  El usuario lanza un requerimiento HTTP al
servidor web.
  El servidor realiza algún proceso (corto o largo)
  El servidor devuelve una página HTML al cliente.
  El usuario espera durante espacios de
tiempo usualmente largos.
  La interactividad se ve notablemente
reducida.
Aplicaciones Web clásicas
6
Aplicaciones AJAX
  Se introduce una “capa intermedia” entre el
usuario y el servidor.
  Se elimina la naturaleza solicitud-espera-
respuesta de las aplicaciones Web clásicas.
  Aparentemente añadir una capa adicional
solo hace lenta la aplicación, pero en este
caso lo opuesto es verdadero.
Aplicaciones AJAX
  Al inicio de la sesión, el navegador carga una
máquina Ajax — escrita en JavaScript y oculta en
un frame oculto.
  En lugar de llamar a una página web común.
  La máquina controla la interfaz de usuario de la
aplicación y es responsable de comunicarse con el
servidor a nombre del usuario.
  La máquina Ajax permite que la interacción del
usuario con la aplicación sea asíncrona –
independiente de la comunicación con el servidor.
  El navegador no se queda a la espera de una
respuesta del servidor.
7
Aplicaciones AJAX
  Cada acción que normalmente generaría una
llamada HTTP toma la forma de una llamada
JavaScript a la máquina Ajax.
  Cualquier respuesta que no requiera del
servidor es administrada por la máquina —
validaciones, edición de datos, etc.
  Si la máquina necesita algo del servidor hace
las llamadas en forma asíncrona usando
XML, sin interrumpir la interacción del
usuario con la aplicación.
Aplicaciones AJAX
8
Modelo clásico vs. AJAX
Problemas de compatibilidad
  Mayormente causados por los productos de
Microsoft.
  ¿ATLAS?
  Distintas formas de crear el objeto
XMLHttpRequest.
  Distintas formas de operar con el modelo DOM de
las páginas.
  Diferentes comportamientos en los navegadores.
9
Componentes principales
  Presentación en el cliente
  HTML + CSS
  Interacción y control
  JavaScript, para el proceso local
  DOM (Document Object Model) para el acceso a
datos de la página o datos recibidos en XML
desde el servidor.
  Intercambio de datos
  Objetos XMLHttpRequest para leer o enviar datos
de o hacia el servidor, asíncronamente.
… opcionalmente
  La clase DomParser puede ser usada.
  Se puede usar SOAP para la comunicación
con el servidor.
  XSLT (XSL transformations) puede ser usado
para procesar los datos devueltos en formato
XML.
  Cualquier lenguaje válido puede ser usado
en el servidor.
10
Javascript
Características
  Lenguaje de programación interpretado. Añade
interactividad a las páginas Web.
  JavaScript está basado en objetos.
  programación basada en prototipos.
  Todos los navegadores modernos interpretan el
código JavaScript integrado dentro de las páginas
web.
  JavaScript cuenta con una una implementación del DOM.
  Inventado por Brendan Eich. Apareció por primera
vez en Netscape Navigator 2.0.
  Inicialmente llamado Mocha y más tarde LiveScript pero
fue rebautizado como JavaScript en un anuncio conjunto
entre Sun Microsystems y Netscape, el 4 de diciembre de
1995.
11
Características
  En junio de 1997 fue adoptado como un estándar
ECMA, con el nombre de ECMAScript. Poco
después también lo fue como un estándar ISO.
  JScript es la implementación de ECMAScript de
Microsoft, muy similar al JavaScript de Netscape,
pero con ciertas diferencias.
  El World Wide Web Consortium diseñó el estándar
Document Object Model (DOM), que incorporan
Konqueror, las versiones 6 de Internet Explorer y
Netscape Navigator, Opera versión 7, y Mozilla
desde su primera versión.
Ejemplo
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
12
XML
Conceptos
  XML: EXtensible Markup Language.
  Diseñado para transportar y almacenar
datos.
  Es un lenguaje de etiquetado, como HTML.
  Las etiquetas XML no están predefinidas.
  Está diseñado para ser autodescriptivo.
  Es una recomendación del W3C.
  Es solo texto plano, no “hace” nada.
13
Ejemplo
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!
</body>
</note>
AJAX Básico
14
Conceptos básicos
  Con AJAX, JavaScript puede comunicarse
directamente con servidor
  Objeto XMLHttpRequest
  JavaScript puede intercambiar datos con el servidor web
sin recargar la página.
  AJAX usa transferencia de datos asíncrona (HTTP
requests) entre el navegador y el servidor.
  Permite a las páginas web conseguir pequeñas cantidades
de información del servidor en lugar de páginas completas.
  Las aplicaciones son más pequeñas, rápidas e
interactivas.
Basada en estándares web

  AJAX es una tecnología independiente del software
del servidor web.
  AJAX está basado en:
  JavaScript, XML, HTML, CSS
  “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest”
  Los estándares usados en Ajax están bien definidos
y son soportados por los principales navegadores.
  ¿Las aplicaciones AJAX son independientes del
navegador y la plataforma del servidor? (!).
15
Palabras finales
  AJAX intenta conseguir mejores aplicaciones Web.
  Las aplicaciones Web tienen muchas ventajas sobre
las aplicaciones de escritorio:
  Llegan a un público mayor.
  Son fáciles de instalar y mantener.
  Fáciles de desarrollar.
  Sin embargo las aplicaciones Web no son siempre
tan “ricas” y “amigables” (user friendly) como las
aplicaciones de escritorio.
  Pero con AJAX las aplicaciones Web pueden ser
más “ricas” y “amigables” que con el modelo clásico.
  ¡Google Docs!
Primera aplicación AJAX

  Crear una aplicación con dos campos de
texto
  Username
  Time
  El campo Username será llenado por el
usuario
  El campo Time será llenado por AJAX
16
testAjax.htm
  Atención: no hay botón Enviar
<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
Navegadores:
El problema Microsoft
  La piedra fundamental de AJAX es el objeto
XMLHttpRequest.
  Diferentes navegadores usan diferentes
métodos para crear el objeto
XMLHttpRequest.
  La mayoría de los navegadores usan el objeto
nativo de JavaScript llamado XMLHttpRequest.
  Internet Explorer :ActiveXObject.
17
Enfrentando el problema de
compatibilidad
  Se usa el patrón try & catch.
  Funciona en la mayoría de navegadores.
  Añade líneas al código.

  JavaScript es un lenguaje interpretado.
  Es obligatorio si se desea que la aplicación
se ejecute en distintos navegadores.
Enfrentando el problema de
compatibilidad
  Se crea primero una variable xmlHttp para contener (apuntar) el
objeto XMLHttpRequest.
  Se intenta crear el objeto con XMLHttp=new XMLHttpRequest()
  Válido para Firefox, Opera, Safari, etc.
  Si falla se intenta xmlHttp=new

ActiveXObject("Msxml2.XMLHTTP")
  Explorer 6.0+
  Si falla se intenta xmlHttp=new

ActiveXObject("Microsoft.XMLHTTP")
  Explorer 5.5+
  Si todo falla el navegador es muy antiguo y no soporta Ajax.
18
testAjax.htm
<html>
<body>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
testAjax.htm
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
19
testAjax.htm
</script>
Name: <input type="text" name="username" />
</form>
</body>
</html>
El objeto XMLHttpRequest
  Métodos importantes
  open
  send
  Propiedades/atributos importantes:
  onreadystatechange
  readyState
  status
  responseText
  responseXml
20
Métodos
  open (modo, url, boolean)
  modo: tipo de llamada GET o POST
  url: la localización del fichero/recurso
  boolean: true (asíncrono), false (síncrono).
  Opcionalmente un logín y un password pueden
añadirse a los argumentos.
  send ("cadena")
  null : para comandos GET.
  Una cadena con datos (formateados) para
comandos POST.
La propiedad
onreadystatechange
  Luego de una llamada al servidor es necesaria una
función para recibir los datos devueltos por éste.
  La propiedad onreadystatechange almacena la
función que procesará la respuesta del servidor.
  No es un método, la función es almacenada en la
propiedad para ser llamada automáticamente.
  El siguiente código define la propiedad
onreadystatechange y almacena una función vacía
dentro de ella.
21
La propiedad
onreadystatechange
xmlHttp.onreadystatechange=function()
{
// El código aquí
}
La propiedad
readyState
  La propiedad readyState contiene el estado
de la respuesta del servidor.
  Cada vez que ésta cambia la función
onreadystatechange debe ser ejecutada.
  Hay cinco valores posibles para la variable:
Estado Descripción
0 La llamada no ha sido inicializada
1 La llamada ha sido preparada
2 La llamada ha sido enviada
3 La llamada está en proceso
4 La llamada está completada
22
La propiedad
readyState
{
if(xmlHttp.readyState==4)
{
// Obtener los datos de la respuesta
// del servidor
}
}
La propiedad
responseText
  Los datos devueltos por el servidor pueden
ser recuperados con la propiedad
responseText.
  En el ejemplo:
  Se asignará el valor del campo de entrada "time"
igual a responseText.
23
La propiedad
readyState
{
{
document.myForm.time.value=xmlHttp.respons
eText;
}
}
status y responseXML
  status
  200 : todo ha ido bien.
  404 : el servicio/recurso no ha sido encontrado.
  responseXML
  Contiene a un fichero/cadena XML.
  Los métodos del DOM permiten extraer datos de
ésta respuesta.
24
Enviando una llamada al
servidor
  Para enviar una llamada al servidor se usan los
métodos open() y send().
  El método open() establece la comunicación y el
tipo de llamada (GET o POST) y la sincronía de la
llamada.
  El método send() envía la llamada hacia el servidor.
  Si el servidor usa ASP y los ficheros HTML y ASP
están en el mismo directorio, el código podría ser:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
¿Cuando debe ejecutarse la

función AJAX?
  Se puede realizar el intercambio de datos en
cualquier momento.
  Por ejemplo, se puede ejecutar la acción
cuando el usuario teclea algo en el campo
username.
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
</form>
25
testAjax.htm (final)
<html>
<body>
function ajaxFunction()
{
var xmlHttp;
try
{
}
catch (e)
{
try
{
}
catch (e)
{
try
{
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
{
{
document.myForm.time.value=xmlHttp.responseText;
}
26
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
</form>
</body>
</html>
El script del lado del servidor

  Hay que crear el script que devuelve la
actual hora del servidor.
  La propiedad responseText contendrá los datos
devueltos por el servidor.
  Se desea enviar de vuelta la hora actual.
  El código en "time.asp" podría ser
27
El script del lado del servidor
<%
response.expires=-1
response.write(time)
%>
  La página nunca es almacenada en caché.
Ejecutando la aplicación Ajax

  El campo Time obtiene la hora del servidor
del fichero "time.asp".
  Sin volver a cargar la página completa
  ¡No hay “parpadeo”!
Name: Time:
28
Ejecutando la aplicación Ajax
Name: ju Time: 1:44:20 PM
Name: juan Time: 1:44:22 PM
Otro ejemplo:
Acceso a un fichero de texto.
  Accede a un fichero data.txt que contiene
una sola línea (¡Hola mundo!)
  1 Submit
  2 Submit
textossssss
  3 Submit
Received: ¡Hola mundo!
29
HTML + Ajax
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new
ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new
ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
HTML + Ajax
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" +
xhr.responseText;
30
HTML + Ajax
else
document.ajax.dyn="Error code " +
xhr.status;
}
};
xhr.open(GET, "data.txt", true);

xhr.send(null);
}
</script>
</head>
HTML + Ajax
<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit"
ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
31
AJAX Avanzado
Comunicación Dinámica:
Un ejemplo
  Una página puede comunicarse
dinámicamente con un servidor web online,
según el usuario introduce datos en un
formulario HTML.
Type a name in the box below:

First Name:
Suggestions:
32
Un ejemplo
First Name: a
Suggestions: Anna , Amanda

First Name: am
Suggestions: Amanda
Un ejemplo
First Name: ami
Suggestions: no suggestion

First Name: e
Suggestions: Eva , Eve , Evita , Elizabeth , Ellen
33
El ejemplo explicado:
El formulario HTML
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
El formulario HTML
  Es sólo un formulario HTML con un campo de
entrada llamado “txt1”.
  Un atributo de tipo evento para el campo de entrada
establece que una función sea lanzada por un
evento onkeyup.
  El párrafo debajo del formulario contiene un
elemento span llamado "txtHint".
  El elemento spam es usado como un marcador de
localización (placeholder) para los datos
recuperados del servidor.
34
El formulario HTML
  Cuando el usuario introduce datos, una
función llamada "showHint()" es ejecutada.
  La ejecución de la función es lanzada
(triggered) por el evento "onkeyup".
  Cada vez que el usuario quita un dedo de una
tecla, estando en el campo de entrada, la función
“showHint” es ejecutada.
La función showHint()
  showHint() es una función JavaScript muy
simple, localizada en la sección <head> de la
página HTML.
  La función contiene el siguiente código:
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
35
El formulario HTML
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
La función showHint()
  La función es ejecutada cada vez que un carácter es introducido en el
campo de entrada.
  Si hay alguna entrada en el campo de texto (str.length > 0) la función:
ejecuta lo siguiente:
  Establece la url (nombre de fichero) para enviar al servidor.
  Añade un parámetro q a la url con el contenido del campo de entrada.
  Añade un número aleatorio para prevenir que el servidor esté usando un
fichero almacenado en caché.
  Crea un objeto XMLHTTP, y le dice al objeto que ejecute una función
llamada stateChanged cuando un cambio es lanzado.
  Abre el objeto XMLHTTP con la url indicada.
  Envía una llamada HTTP al servidor.
  Si el campo de entrada está vacío, la función simplemente limpia el
contenido del marcador/elemento txtHint.
36
La función GetXmlHttpObject()
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
}
catch (e)
{
try
La función GetXmlHttpObject()
{
}
catch (e)
{
}
}
return xmlHttp;
}
37
La función stateChanged()
  Se ejecuta cada vez que el estado del objeto
XMLHTTP cambia.
  Cuando el estado cambia a 4 (“completado”)
txtHint es llenado con el texto de respuesta.
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.re
sponseText;
}
}
Código completo:
La página HTML
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
38
Código completo:
El código AJAX JavaScript
  Almacenado en el fichero "clienthint.js".
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
Código completo:
if (xmlHttp==null)
{
return;
}
var url="gethint.asp";
url=url+"?q="+str;
xmlHttp.send(null);
}
39
Código completo:
{
{
sponseText;
}
}
Código completo:
{
var xmlHttp=null;
try
{
}
catch (e)
{
40
Código completo:
try
{
}
catch (e)
{
}
}
return xmlHttp;
}
Código completo:
La página Ajax del servidor
  No hay “servidores Ajax”.
  Las páginas Ajax pueden ser atendidas por
cualquier servidor web.
  A continuación se presenta la página del
servidor de este ejemplo escrito en ASP.
  También se dará un ejemplo en PHP.
41
Código completo:
AJAX con ASP
  El código en "gethint.asp" está escrito en
VBScript para un Internet Information Server
(IIS).
  Solo recorre un arreglo de nombres y
devuelve los que corresponden al cliente:
Código completo:
AJAX con ASP
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
42
Código completo:
AJAX con ASP
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
Código completo:
AJAX con ASP
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky“
'get the q parameter from URL

q=ucase(request.querystring("q"))
43
Código completo:
AJAX con ASP
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
Código completo:
AJAX con ASP
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
44
Código completo:
AJAX con PHP
  El código anterior reescrito en PHP.
  Recordar cambiar el valor de la variable url
en "clienthint.js" de "gethint.asp" a
"gethint.php".
Código completo:
AJAX con PHP
<?php
header("Cache-Control: no-cache, must-revalidate");
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// Fill up array with names

$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
45
Código completo:
AJAX con PHP
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
Código completo:
AJAX con PHP
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL

$q=$_GET["q"];
46
Código completo:
AJAX con PHP
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],
0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
Código completo:
AJAX con PHP
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
47
Código completo:
AJAX con PHP
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response

echo $response;
?>
Código completo:
AJAX con PHP
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
48
Ajax y Bases de Datos
Acceso a Bases de Datos

  AJAX puede ser usado para acceder o
comunicarse interactivamente con una base
de datos.
  En el siguiente ejemplo se mostrará como
una página web puede localizar información
en una base de datos usando tecnología
AJAX.
49
Ejemplo
  AJAX puede ser usado para acceder o
comunicarse interactivamente con una base
de datos.
  En el siguiente ejemplo se mostrará como
una página web puede localizar información
en una base de datos usando tecnología
AJAX.
La página
Select a Name in the Box Below
Select a Customer: Alfreds Futterkiste
Customer info will be listed here.
50
La página

Alfreds Futterkiste
North/South
Wolski Zajazd
La página
CustomerID ALFKI
CompanyName Alfreds Futterkiste
ContactName Maria Anders
Address Obere Str. 57
City Berlin
PostalCode 12209
Country Germany
51
La página
Select a Customer: North/South
CustomerID NORTS
CompanyName North/South
ContactName Simon Crowther
Address South House 300 Queensbridge
City London
PostalCode SW7 1RZ
Country UK
La página
Select a Customer: Wolski Zajazd
CustomerID WOLZA
CompanyName Wolski Zajazd
ContactName Zbyszek Piestrzeniewicz
Address ul. Filtrowa 68
City Warszawa
PostalCode 01-012
Country Poland
52
El formulario HTML
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers"
onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
El formulario HTML
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed
here.</b></div>
</p>
</body>
</html>
53
El formulario HTML
  Un simple formulario HTML con una caja drop down llamada
"customers".
  El párrafo debajo contiene un elemento div llamado "txtHint". El
elemento es usado como un marcador de lugar para la
información recuperada del servidor.
  Cuando el usuario selecciona un dato, una función llamada
"showCustomer()" es ejecutada.
  La ejecución de la función es lanzada por el evento "onchange".
  En otras palabras, cada vez que el usuario cambia el valor en la

caja drop down, la función showCustomer es llamada.
Código completo:
  selectcustomer.js
var xmlHttp;
function showCustomer(str)
{
if (xmlHttp==null)
{
return;
}
54
Código completo:
var url="getcustomer.asp";
url=url+"?q="+str;
xmlHttp.send(null);
}
Código completo:
{
{
sponseText;
}
}
// repetir el código anterior
55
Código completo:
El código ASP
  getcustomer.asp
  VBScript para Internet Information Server
(IIS)
  El código se ejecuta contra una base de
datos SQL y devuelve el resultado en una
tabla HTML.
Código completo:
El código ASP
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
56
Código completo:
El código ASP
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & “:</b></
td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
Código completo:
AJAX con PHP
  Recordar cambiar el valor de la variable url a
"getcustomer.php".
  El código se ejecuta contra una base de
datos MySQL.
  Devuelve el resultado como una tabla HTML.
57
Código completo:
AJAX con PHP
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
Código completo:
AJAX con PHP
$result = mysql_query($sql);
echo "<table border='1'>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
58
Código completo:
AJAX con PHP
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Ajax y XML
59
Acceso a un fichero XML
  AJAX puede ser usado para tener
comunicación interactiva con un fichero XML.
  El siguiente ejemplo mostrará como una
página web puede obtener información de un
fichero XML usando tecnología AJAX.
La página
Select a CD in the Box Below
Select a CD: Bob Dylan
60
La página

Bob Dylan
Customer infoBonnie
will beTyler
listed here.
Dolly Parton
La página
TITLE: Empire Burlesque

ARTIST: Bob Dylan
COUNTRY: USA
COMPANY: Columbia
PRICE: 10.90
YEAR: 1985
61
La página
Select a CD: Bonnie Tyler
TITLE: Hide your heart

ARTIST: Bonnie Tyler
COUNTRY: UK
COMPANY: CBS Records
PRICE: 9.90
YEAR: 1988
La página
Select a CD: Dolly Parton
TITLE: Greatest Hits

ARTIST: Dolly Parton
COUNTRY: USA
COMPANY: RCA
PRICE: 9.90
YEAR: 1982
62
El formulario HTML
<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
El formulario HTML
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></
div>
</p>
</body>
</html>
63
El formulario HTML
  Un simple formulario HTML con una caja drop down llamada
“cds".
  El párrafo debajo contiene un elemento div llamado "txtHint". El
elemento es usado como un marcador de lugar para la
información recuperada del servidor.
  Cuando el usuario selecciona un dato, una función llamada
"showCD()" es ejecutada.
  La ejecución de la función es lanzada por el evento "onchange".
  En otras palabras, cada vez que el usuario cambia el valor en la

caja drop down, la función showCD es llamada.
Código completo:
  selectcd.js
var xmlHttp
function showCD(str)
{
if (xmlHttp==null)
{
return;
}
64
Código completo:
var url="getcd.asp";
url=url+"?q="+str;
xmlHttp.send(null);
}
Código completo:
{
{
sponseText;
}
}
{
// copiar el código mostrado anteriormente
65
Código completo:
El fichero XML
  cd_catalog.xml
  Contiene una colección de CDs.
<?xml version="1.0" encoding="ISO-8859-1"?>

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
Código completo:
El fichero XML
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COMPANY>RCA</COMPANY>
66
Código completo:
El fichero XML
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
:
:
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
Código completo:
El código ASP
  getcd.asp
  VBScript para Internet Information Server
(IIS).
  El código se ejecuta contra un fichero XML y
devuelve el resultado en HTML.
67
Código completo:
El código ASP
<%
response.expires=-1
q=request.querystring("q")
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q

& "']")
Código completo:
El código ASP
for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%>
68
Código completo:
AJAX con PHP
  Recordar cambiar el valor de la variable url a
"getcd.php".
  Es código está escrito en PHP usando el
DOM XML para cargar el documento XML
"cd_catalog.xml".
  El código se ejecuta contra el fichero XML.
  Devuelve el resultado en HTML.
Código completo:
AJAX con PHP
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();

$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
69
Código completo:
AJAX con PHP
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue ==
$q)
{
$y=($x->item($i)->parentNode);
}
}
}
Código completo:
AJAX con PHP
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo($cd->item($i)->nodeName);
echo(": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>
70
La llamada POST
Uso de POST con el objeto

XMLHttpRequest
  A continuación se desarrollará un ejemplo
para ilustrar el uso de la opción POST en las
llamadas al servidor usando el objeto
XMLHttpRequest.
  El siguiente ejemplo llama un script CGI que
imprime la palabra enviada del cliente al
servidor y la dirección IP del cliente.
71
La llamada
word: Go
word: clave Go
The secret word is clave and your IP is

137.188.114.219.
Página HTML
  Usa una versión ligeramente diferente de
verificación del tipo de navegador.
<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
72
Página HTML
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new
ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
Página HTML
function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before
querystring
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
73
Página HTML
<body>
<form name="f1">
<p>word: <input name="word" type="text">
<input value="Go" type="button"
onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-
ajax-example.cgi")'></p>
<div id="result"></div>
</form>
</body>
</html>
Fichero CGI
  Es un fichero CGI Perl.
  simple-ajax-example.cgi
#!/usr/bin/perl -w
use CGI;
$query = new CGI;
$secretword = $query->param('w');
$remotehost = $query->remote_host();
print $query->header;
print "<p>The secret word is <b>$secretword</b> and
your IP is <b>$remotehost</b>.</p>
74
Fichero CGI
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new
ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
Uso de POST: Modificar un

fichero en el servidor.
  Un texto es enviado al servidor y es escrito
en un fichero.
  Se usan además un fichero externo javascript y
un recurso escrito en PHP.
  El método send() tiene como argumento una
cadena de parámetros.
xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-
form-urlencoded");
xhr.send(data);
75
Uso de POST: Modificar un
fichero en el servidor.
  El parámetro data del método send()
contiene una cadena en el formato del
método HTML POST.
  Pares de variables y valores separados por &.
var data = "file=" + url + "&content=" + content;
  La variable-parametro file es el nombre del

fichero a modificar. Debe ser verificado para
no acceder a otros ficheros.
La llamada
No me lo creo, pero lo probaré Go
Nothing for now.
Cookies !!!!!!!!!! Go
Nothing for now.
76
La llamada
Cookies !!!!!!!!!! Go
Now you can view the content of the file you

have created,
http://www.xul.fr/ajax-post-text.txt .
El fichero http://www.xul.fr/ajax-
post-text.txt.
Cookies !!!!!!!!!!
77
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Demo of POST, storing a sentence into a text file.</
title>
<script src="ajax.js" type="text/javascript"></script>

<script language="JavaScript">
Código HTML
function Write(url, data) // data: the parameters
{
var xhr = createXHR();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
// nothing for now
// alert("sent " + url + " " + data);
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-
www-form-urlencoded");
xhr.send(data);
}
78
Código HTML
function submitForm()
{
var content = document.ajax.sentence.value;
Write("ajax-post-text.php", "file=ajax-post-
text.txt&content=" + content);
var storing = document.getElementById("storage");
storing.innerHTML = "<p>Now you can view the content of
the file you have created, <b><a href='http://www.xul.fr/
ajax-post-text.txt' target='_parent'>http://www.xul.fr/
ajax-post-text.txt</a></b>. ";
}
</script>
</head>
Código HTML
<body>
<FORM name="ajax" method="POST" action="">
<p>
<input type="text" name="sentence" value="No me lo creo,
pero lo probaré" size="80">
<INPUT type="button" value=“Go" ONCLICK="submitForm()">
</p>
</FORM>
<div id="storage"> Nothing for now. </div>
</body>
</html>
79
ajax.js
function createXHR()
{
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
ajax.js
catch (err1) {
request = false;
}
}
}
return request;
}
80
ajax-post-text-php
<?php
$posted = &$_POST ;
$fname=$posted["file"];
if(strcmp($fname, "ajax-post-text.txt") != 0)
die("You are not authorized to change this file.");
$value = $posted["content"];
$nfile = fopen($fname, "w");
if($nfile != false)
{
fwrite($nfile, $value);
fclose($nfile);
}
?>
Más ejemplos
81
Ejemplos sencillos
Acceder a un fichero XML
  Accede al fichero "cd_catalog.xml" localizado
en el servidor.
  Lo despliega como contenido HTML.
Código completo:
Código HTML + Ajax
<html>
<head>
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
82
Código completo:
Código HTML + Ajax
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}Miguel Ángel Villarroel Salgueiro 2008
Código completo:
Código HTML + Ajax
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}
txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagN
ame("CD");
83
Código completo:
Código HTML + Ajax
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue +
"</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
Código completo:
Código HTML + Ajax
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue +
"</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
84
Código completo:
Código HTML + Ajax
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}
</script>
</head>
<body>
<div id="copy">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD
info</button>
</div>
</body>
</html>
Más ejemplos sencillos

  Cargar un fichero texto en un elemento HTML
  http://www.w3schools.com/Ajax/tryit.asp?
filename=tryajax_httprequest_js1
  Cargar un fichero XML

filename=tryajax_httprequest_js
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
85
Más ejemplos sencillos
  Obtener la información del HEAD de un recurso.
  Obtener información específica del HEAD
--test_xmlhttp.txt
This is a test using an XML HTTP request to show a text file.
If this text shows, it worked!
--test_xmlhttp2.txt
This is another text file - shown WITHOUT re-loading the page! This is how
the XML HTTP request object works!
Ejemplos de aplicación
  Gmail
  Google groups
  Google maps
  Amazon.com
  Etc.
86
Final
Gracias
87

Tutorial Completo Ajax

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Completo Ajax

Cargado por

Copyright:

Formatos disponibles

AJAX

Miguel Ángel Villarroel Salgueiro

Estructura del tutorial

 Ajax: Creating Web Pages with Asincronous

 Ajax: A New Approach to Web Applications

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

 Implementación nativa en Mozilla 1.0 en 2002.

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Aplicaciones Web clásicas

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

 Las etiquetas XML no están predefinidas.

 Está diseñado para ser autodescriptivo.

 Es una recomendación del W3C.

 Es solo texto plano, no “hace” nada.

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Basada en estándares web

Miguel Ángel Villarroel Salgueiro 2008

Primera aplicación AJAX

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

 Añade líneas al código.

Miguel Ángel Villarroel Salgueiro 2008

 Si falla se intenta xmlHttp=new

 Si falla se intenta xmlHttp=new

 Si todo falla el navegador es muy antiguo y no soporta Ajax.

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

¿Cuando debe ejecutarse la

Miguel Ángel Villarroel Salgueiro 2008

Miguel Ángel Villarroel Salgueiro 2008

El script del lado del servidor

Miguel Ángel Villarroel Salgueiro 2008

 La página nunca es almacenada en caché.

Miguel Ángel Villarroel Salgueiro 2008

Ejecutando la aplicación Ajax

Miguel Ángel Villarroel Salgueiro 2008

Name: juan Time: 1:44:22 PM

Miguel Ángel Villarroel Salgueiro 2008

Received: ¡Hola mundo!

Miguel Ángel Villarroel Salgueiro 2008

xhr.open(GET, "data.txt", true);

Miguel Ángel Villarroel Salgueiro 2008

  Ajax: Creating Web Pages with Asincronous

  Ajax: A New Approach to Web Applications

  Implementación nativa en Mozilla 1.0 en 2002.

  Las etiquetas XML no están predefinidas.

  Está diseñado para ser autodescriptivo.

  Es una recomendación del W3C.

  Es solo texto plano, no “hace” nada.

  Añade líneas al código.

  Si falla se intenta xmlHttp=new

  Si falla se intenta xmlHttp=new

  Si todo falla el navegador es muy antiguo y no soporta Ajax.

  La página nunca es almacenada en caché.

  En otras palabras, cada vez que el usuario cambia el valor en la