wikiserver - Contribucions de l’usuari [ca]

NF3 - Objectes predefinits del llenguatge Javascript

2023-05-30T15:39:45Z

Jcomas: /* Scrollbars & Info */

== The Browser Object Model (BOM) ==

Si creus que JavaScript viu dins del navegador de web, és parcialment correcte, és cert que el navegador web és l'amfitrió pel vostres programes JavaScript, però els vostres programes mai interaccionaran directament amb el navegador web. En comptes d'això s'ha de treballar amb una col·lecció d'objectes JavaScript que actuen com un intermediari entre el vostre JavaScript i el navegador web. Aquesta col·lecció d'objectes s'anomena BOM(Model d'Objecte del Navegador). El seu objectiu és proporcionar una interfície simple, compatible entre els programes javascript i el navegador web.

Els programes escrits per una plataforma (com l'UNIX) no funcionen en una altra plataforma (com Windows) sense molta feina de conversió. Això és a causa que utilitzen una interfície de programació molt diferent per dur a terme la mateixa tasca. Considerem ara la indústria dels navegadors web. El codi Javascript que crea per a l'Internet Explorer ha de ser capaç de funcionar a la perfecció en el Netscape Navigator. Pots fins i tot utilitzar el codi que va escriure per al navegador en Linux amb Internet Explorer en Macintosh. Això és a causa que tots dos navegadors són compatibles amb la mateixa interfície de programació, és a dir, el model d'objectes del navegador.

El model d'objectes del navegador es compon de una gran col·lecció d'objectes que permeten als programes Javascript ficar-se en cada racó del navegador web. Tots els objectes estan disposats en una estructura d'arbre.
L'objecte de la finestra es troba en la part superior d'aquest arbre i tots els altres objectes del model d'objectes del navegador es pot trobar en el seu interior, BOM és molt gran i bastant complex.

[[Fitxer:bom.png|500px|center]]

=== Objecte Window ===

L'objecte '''Window''' és compatible amb tots els navegadors. Representa la finestra del navegador.
Tots els objectes globals de Javascript, funcions i variables es converteixen automàticament en membres de l'objecte Window.
Les variables globals són propietats de l'objecte Window. Les funcions globals són mètodes de l'objecte Window.
Fins i tot l'objecte document (de l'HTML DOM) és una propietat de l'objecte Window:

<pre>
window.document.getElementById("header");
// es igual a:
document.getElementById("header");
</pre>

Ara veurem els mètodes i propietats d'aquest objecte:Leer

==== La mida del navegador ====

Hi ha diverses maneres de determinar la mida de la finestra del navegador (viewport) que no inclou les barres de lliscament ni les barres d'eines.
Segons sigui el teu navegador Chrome, Firefox, Opera o Safari
* window.innerHeight = la altura de la finestra
* window.innerinnerWidth = la amplada de la finestra
Si el navegador és Internet Explorer 5 o superior:
* document.documentElement.clientHeight
* document.documentElement.clientWidth
* document.body.clientHeight;
* document.body.clientWidth;

Per solucionar el problema podem fer :

<pre>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
</pre>

Podeu veure tots els métodes en aquesta pàgina : [http://www.w3schools.com/jsref/obj_window.asp w3schools window]

[[Fitxer:pantallaParametros.png|500px|center]]

==== Events de temporitzador ====

https://www.w3schools.com/js/js_timing.asp

L'objecte window permet l'execució de codi en un moment donat o a intervals mitjançant els mètodes:

* setTimeout(funcio, milisegons)
Executa una funció al cap del nombre de milisegons especificat per paràmetre.

* setInterval(funcio, milisegons)
Executa una funció repetidament en intervals del nombre de milisegons especificat per paràmetre.

=== Objecte Navigator ===

L'objecte navigator ens dona informació sobre el navegador utilitzat per l'usuari.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: [http://www.w3schools.com/jsref/obj_navigator.asp w3schools navigator]

=== Objecte History ===

L'objecte History ens dona informació sobre les pàgines visitades.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: [http://www.w3schools.com/jsref/obj_history.asp w3schools history]

=== Objecte Screen ===

L'objecte Screen ens dona informació sobre la pantalla del usuari. Per exemple, la propietat ''screen.availWidth'' ens dona l'altura sense incloure la barra de windows.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: [http://www.w3schools.com/jsref/obj_screen.asp w3schools screen]

=== Objecte Location ===

L'objecte Location ens dona informació sobre la URL actual de la pàgina.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: [http://www.w3schools.com/jsref/obj_location.asp w3schools location]

== Popup Window ==
Una finestra PopUp és un dels mètodes més antics de mostrar informació (html) a l'usuari. Normalment, només has d'escriure:
<pre>
window.open("http://www.infomerce.es");
</pre>
Y s'obrirà una nova finetra amb la url corresponent. Molts navegadors el que obren és una nova pestanya en comptes d'una finestra separada.
Moltes pàgines han abusat dels PopUps, per això, els navegadors intenten bloquejar-les i protegir l'usuari. Però, pot ser hi ha situacions on el seu ús està indicat, com per exemple a l'hora de comprar algun producte a una tenda on-line podem conversar via chat amb un dels depenents reals de la botiga per preguntar quelcom.

Perquè és beneficiós?
* La finestra emergent és independent amb el seu propi entorn de Javascript. Així que el servei de xat no necessita integrar-se amb javascripts del lloc de la tenda.
* La finestra emergent és molt simple agregar al lloc. És només un petit botó, sense javascripts addicionals per carregar-se.
* L'element emergent pot persistir fins i tot si l'usuari deixa la pàgina. Per exemple, el depenent avisa a l'usuari que hi ha una oferta especial en una altre pàgina. L'usuari pot navegar amb l'altre finestra sense tancar el xat.

=== Sintaxy de window.open() ===

La sintaxi és:
<pre>
window.open(url, name, params)
</pre>

*url : La url que es vol mostrar
*name: El nom de la finestra, pot ser usat com a ''target'' dels formularis.
*params: Es pot definir molts paràmetres separats tots ell amb una coma.

'''Params:'''
*left/top (numeric) : Coordenades top/left de la finestra
*width/heith (numeric) : L'amplada i la llargada de la finestra
*menubar(yes/no) : Mostra o oculta el menu del navegador
*toolbar (yes/no) : mostra o oculta les opcions del navegador (pag. endavant, enrera, recàrrega,...) (*desuso)
*location (yes/no) : mostra o oculta la url
*status (yes/no) : mostra o oculta la barra d'estat del navegador (*desuso)
*resizable (yes/no) : Permet o no canviar la mida de la finestra.
*scrollbars (yes/no) : Mostra o no les barres de lliscament de la finestra.(*desuso)

Exemple:
<pre>
var p1 = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no'
var p2 = 'width=0,height=0,left=-1000,top=-1000'
window.open('/', 'test', p1+p2)
</pre>

'''Com accedir a la finestra:'''
Una vegada la finestra s'ha obert, podem canviar el seu contingut des de la finestra 'pare'. Ho podem fer amb el valor retornat per la funció window.open().
Exemple:

<source lang="javascript">
var win = window.open("", "", "width=200,height=100");
win.document.write("<p>Una nova Finestra!</p>");
win.focus();
</source>

</pre>
També, des de la finestra oberta podem accedir al 'pare' utilitzant la propietat '''window.opener'''. Aquesta propietat la tenen tots els popUps. Les altres finestres contenen el valor ''null''.



== Exercicis ==

=== Moure finestra 1===

Crea una pàgina amb tres botons:
*obrir finestra:ens obrirà una finestra de 200x200 pixels centrada a la pantalla que carregarà una pàgina web qualsevol.
*moure esquerra: ens mourà la finestra oberta pel botó obrir 10 pixels a l'esquerra.
*moure dreta: ens mourà la finestra oberta pel botó obrir 10 pixels a la dreta.

=== Moure finestra 2===

Crea una finestra amb un botó amb l'etiqueta "iniciar moviment". Quan es premi el botó s'obrirà una segona finestra de 200x200 pixels que es mourà sola per la pantalla. experimenta amb diferents moviments.

=== Títol mòbil ===

Crea una pàgina web amb un títol (tag html H1) que es mogui a la forma de banner: a intervals regulars es deplacen cap a l'esquerra tots els caràcters i els caràcters que desapareixen per l'esquerra tornen a apareixer per la dreta.

=== Títol mòbil amb colors===

Crea una pàgina com la de l'exercici anterior però afegint la característica que cada caràcter sigui d'un color diferent.



=== Descans ===

*Queremos crear una aplicación que nos avise con una ventana emergente que deberiamos descansar cada X minutos que son introducidos por el usuario.

:[[sol_descans]]

=== Scrollbars & Info ===
* A l'exercici anterior crea un botó per tal que es puguin amagar o mostrar les barres de desplaçament.
* A més a més mostra tota la informació que puguis del navegador de l'usuari
* Mostra el numero de pagines visitades.
* Mostra la url actual, el port i el protocol.

//Nota: para que pueda cambiar las barras laterales o barra direcciones hay que entrar en about:config-> dom.disable_window_open_feature.location... y cambiar la configuración de predeterminado a por el usuario

:[[sol barra]]



==COOKIES==

Són arxius de text, de reduïda grandària, que un lloc web pot gravar al dics dur de l'equip client, amb la finalitat d'emmagatzemar informació relativa a l'usuari o a les seves preferències.

*No són perilloses: no contenen virus, troians, scripts, ni cap tipus de codi maliciós.
*Han de seguir una estructura molt concreta per poder ser emmagatzemades.
*No poden sobrepassar una determinada grandària.

Les galetes poden emmagatzemar:

*Preferències estètiques de l'usuari.
*Dades de l'usuari: login i contrasenya, número de targeta bancària, etc.
*Si les galetes contenen informació confidencial, sí que representen un perill potencial. Cal fer servir mecanismes d'encriptació i desencriptació de dades.

Les galetes són específiques de cada navegador: les que han estat gravades per un navegador no poden ser llegides per un altre.

'''<nombre>=<valor>; expires=<fecha>; max-age=<segundos>; path=<ruta>; domain=<dominio>; secure; httponly;'''

Los parámetros son:

''<nombre>=<valor>''
Requerido. <nombre> es el nombre (key) que identifica la cookie y <valor> es su valor. A diferencia de las cookies en PHP, en JavaScript se puede crear una cookie con un valor vacío (<nombre>=).

''expires=<fecha> y max-age=<segundos>''

Opcional. Ambos parámetros especifican el tiempo de validez de la cookie. expires establece una fecha (ha de estar en formato UTC) mientras que max-age establece una duración máxima en segundos. max-age toma preferencia sobre expires. Si no se especifica ninguno de los dos se creará una session cookie. Si es max-age=0 o expires=fecha-pasada la cookie se elimina.

''path=<ruta>''
Opcional. Establece la ruta para la cuál la cookie es válida. Si no se especifica ningún valor, la cookie será válida para la ruta la página actual.

''domain=<dominio>''
Opcional. Dentro del dominio actual, subdominio para el que la cookie es válida. El valor predeterminado es el subdominio actual. Establecer domain=.miweb.com para una cookie que sea válida para cualqueir subdominio (nota el punto delante del nombre del dominio). Por motivos de seguridad, los navegadores no permiten crear cookies para dominios diferentes al que crea la cookie (same-origin policy).

''secure''
Opcional. Parámetro sin valor. Si está presente la cookie sólo es válida para conexiones encriptadas (por ejemplo mediante protocolo HTTPS).

''HttpOnly''
Opcional. Parámetro no disponible en JavaScript ya que crea cookies válidas sólo para protocolo HTTP/HTTPS y no para otras APIs, incluyendo JavaScript.

'''CREAR COOKIES'''

https://cybmeta.com/cookies-en-javascript

<source lang="javascript>

document.cookie = "nombrecookie=valorcookie; max-age=3600; path=/";

document.cookie = "comida_favorita=arroz; max-age=3600; path=/";
</source>

Si vas a utilizar el parámetro expires, recuerda que ha de ser una fecha en formato UTC. Te puede ser de ayuda el método Date.toUTCString(). Por ejemplo, una cookie con caducidad para el 1 de Febrero del año 2068 a las 11:20:

<source lang="javascript>
var expiresdate = new Date(2068, 1, 02, 11, 20);
var cookievalue = "Hola Mundo!";
document.cookie = "testcookie=" + encodeURIComponent( cookievalue ) + "; expires=" + expiresdate.toUTCString();
document.cookie = "color_favorito=amarillo";
</source>

Recuerda también que si no se específica fecha de caducidad la cookie será válida sólo para la sesión actual.

'''MODIFICAR COOKIES'''

<source lang="javascript>

// Supongamos que estamos en "miweb.com/blog"
// y creamos las siguientes cookies

// Creamos la cookie para el path "/"
document.cookie = "nombre=Miguel; path=/";

// Con la siguiente linea se crea una nueva cookie para el path "/blog" (valor por defecto)
// pero no se modifica la cookie "nombre" anterior porque era para un path diferente
document.cookie = "nombre=Juan";

// Con la siguiente línea SI se modifica la cookie "nombre" del path "/" correctamente
document.cookie = "nombre=Juan; path=/";
</source>

'''ELIMINAR COOKIES'''

<source lang="javascript>

document.cookie = "nombre=Miguel";

//Si queremos eliminarla:

document.cookie = "nombre=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

// O con max-age
document.cookie = "nombre=; max-age=0";

// Se crean dos cookies con el mismo identificador
// para dos paths diferentes
document.cookie = "nombre=Miguel; path=/noticias";
document.cookie = "nombre=Juan; path=/blog";

// Solo se elimina la cookie del path /noticias
document.cookie = "nombre=; max-age=0; path=/noticias";
</source>

'''LEER y OBTENER el valor de las cookies'''

<source lang="javascript">
// Se crean dos cookies para dos subdominios diferentes
document.cookie = "cookienoticias=valorcn; domain=noticias.miweb.com";
document.cookie = "cookietienda=valorct; domain=tienda.miweb.com";

var lasCookies = document.cookie;
alert( lasCookies );
// Obtendremos cookienoticias=valorcn
// No podemos acceder a la cookie cookietienda
// porque es válida solo para tienda.miweb.com y estamos en noticias.miweb.com
</source>

'''Paràmetre Expires'''

Informar el paràmetre expires és necessari per a que una cookie es conservi un cop tancat el navegador. El més recomanable, doncs, és informar el paràmetre expires amb la data d'aquí a un any o d'aquí a un mes.

com veiem al següent codi:

<source lang="javascript>

// cookie que caducarà en un any
var data = new Date();
data.setFullYear(data.getFullYear() +1);
document.cookie="cookie1=Aquesta cookie caducarà d'aquí a un any; expires="+data.toUTCString()+";";

// cookie que caducarà en un mes
data = new Date();
data.setMonth(CookieDate.getMonth() +1);
document.cookie="cookie2=Aquesta cookie caducarà d'aquí a un mes; expires="+data.toUTCString()+";";

</source>

'''IMPORTANT:'''

*A Chrome no funcionen les cookies en local (file:///)

*A Firefox funcionen les cookies en local però no es conserven un cop tanquem el navegador

*Per tant, quan fem exercicis de cookies usarem un hosting http (apache o similar)

==EXERCICIS==
===Cookies 1===

Crea una pàgina que guardi el nom de l'usuari en cookies:

-la pàgina mostrarà en carregar el nom que hi ha emmagatzemat a les cookies

-a la part superior hi haurà un botó amb l'etiqueta "login" que ens enviarà a una pàgina auxiliar amb un camp de text per introduir el nom, un botó que escriurà la cookie i tornarà a la pàgina principal. També hi haurà un enllaç a la pàgina principal que ens permetrà interrompre el procés sense escriure la cookie.

===Cookies 2===
Adapta l'exercici anterior de forma que l'usuari també entri els cognoms:

-la pàgina mostrarà en carregar el nom i cognoms que hi ha emmagatzemats a les cookies

-La pàgina auxiliar tindrà un nou camp de text que permetrà introduir els cognoms a l'usuari.

===Cookies 3===
Adapta l'exercici anterior de forma que l'usuari també pugui escollir el color de fons de la pàgina i es guardi en una cookie:

-la pàgina mostrarà en carregar el nom i cognoms que hi ha emmagatzemats a les cookies i canviarà el color del fons de pàgina a l'emmagatzemat a les cookies.

-Afegeix a la pàgina auxiliar 4 radio buttons que ens permetrà escollir el color de fons. El color escollit es guardarà a les cookies. Pots usar la pàgina https://htmlcolorcodes.com/color-names/ per a escollir els 4 possibles colors.

===Cookies 4===
Adapta l'exercici anterior de forma que es mostri al peu de pàgina la data i hora de l'última visita:

-la pàgina mostrarà en carregar el nom i cognoms que hi ha emmagatzemats a les cookies, canviarà el color del fons de pàgina a l'emmagatzemat a les cookies i mostrarà la data i hora de l'última visita emmagatzemada a les cookies. A continuació escriurà la data i hora actuals a les cookies.

indicació: el mètode '''toLocaleString()''' aplicat a un objecte Date ens retorna el seu valor en format "dd/mm/aaaa hh:mm:ss".

==LOCALSTORAGE==

'''localStorage vs Cookies'''

La mejor forma de entender por qué es necesario el localStorage es indicando los tres grandes problemas de las cookies:

*Espacio limitado: Una cookie sólo puede ocupar 4kb de espacio. Es por eso que las cookies suelen utilizarse sólo para almacenar un hash o un identificador que será utilizado por el servidor para identificar la visita.
*Cada vez que se realiza una petición al servidor, toda la información que está almacenada en las cookies es enviada y también es recibida nuevamente con la respuesta del servidor. O sea, en los intercambios de información entre el navegador web y el servidor siempre van pegadas las cookies.
*Las cookies tienen una caducidad.

Y aquí viene localStorage a solucionarlos la vida!

*Espacio menos limitado: localStorage puede ocupar entre 5 y 10MB dependiendo del navegador web. Con 5 o 10 megas ya podemos tener algo más de información
*La información almacenada con localStorage no es enviada al servidor en cada petición.
*No existe una caducidad para localStorage, la información quedará almacenada hasta que se elimine expresamente. Aunque se cierre el navegador.

Una cookie tiene caducidad, pero le puedes poner que caduque dentro de 1 año… vale, sí… pero caduca, con localStorage nos olvidamos de tener que guardar la cookie aumentando el tiempo de caducidad.

Sin embargo, que la información persista en el tiempo, no siempre es una buena idea. A veces lo que interesa es que la información se elimina una vez se cierre el navegador. Para estos casos, en vez de utilizar localStorage, se debe usar sessionStorage.

El sessionStorage es exactamente igual que localStorage, pero con la salvedad de que una vez cerrado el navegador se pierde la información, todo lo demás es lo mismo. Si se quiere trabajar con sessionStorage, sólo hay que coger todo el código de este articulo y donde pone localStorage cambiarlo por sessionStorage.

'''La API del localStorage'''

Almacenar un valor localStorage

Para '''guardar''' la información utilizamos el método setItem:

<source lang="javascript">
localStorage.setItem('key', 'value');
</source>

De esta forma, en nuestro espacio de almacenamiento local, tendremos un elemento llamado key y que tendrá por valor value.
Recuperar un valor localStorage

Para '''recuperar''' la información utilizamos el método getItem:
<source lang="javascript">
var value = localStorage.getItem('key');
</source>

Este código Javascript almacena en la variable value el contenido almacenado para key.
Cómo saber el '''número de elementos''' almacenados en localStorage

La API asociada permite el uso de length para conocer cuantos elementos están guardados en localStorage.
<source lang="javascript">
alert(localStorage.length);
</source>

Al ejecutar este código, nos aparecería una alerta con el número de elementos almacenados en nuestro espacio local.
Borrar un elemento localStorage

Como es lógico, la API también permite '''eliminar''' un elemento que tengamos guardado. Para ello utilizamos el método removeItem
<source lang="javascript">
localStorage.removeItem('key');
</source>

'''Limitaciones del localStorage'''

Más que limitaciones, deberíamos hablar de la gran limitación: Sólo podemos almacenar cadenas de texto. O sea, no podemos guardar booleanos (true o false), no podemos guardar arrays, objetos, floats... sólo strings.

Estamos ante una gran limitación… pero podemos superarla con unas pocas líneas de código!! ¿cómo? pues con ese “recurso” que cada vez cobra más fuerza: '''JSON'''.

Los navegadores que soportan localStorage (o sea, los modernos), también tienen soporte para JSON. Gracias a JSON podremos convertir un objeto (o lo que esa) en cadena de texto y almacenarlo en nuestro localStorage. Al mismo tiempo, con JSON podremos transformar la cadena recuperada de localStorage al objeto inicial

<source lang="javascript">
// Creamos un objeto
var object = { 'uno' : '1', 'dos' : '2' };
// Lo guardamos en localStorage pasandolo a cadena con JSON
localStorage.setItem('key', JSON.stringify(object)); //JSON.stringify: convierte un JSON a un String
// Creamos una nueva variable object2 con el valor obtenido de localStorage usando JSON recuperar el objeto inicial
var object2 = JSON.parse(localStorage.getItem('key')); //JSON.parse convierte un string con formato JSON a JSON.
// La alerta mostrará 1 por pantalla
alert(object2.uno);
</source>

'''EXERCICI'''

* Adapta el quart exercici de cookies de forma que usi Localstorage enlloc de cookies.



== Politica de seguretat : "El mateix Origen" ==
La política de "mateix origen" limita l'accés d'una finestra a una altra.
La raó darrere d'això és la seguretat. Si tens ''blabla.com'' en una finestra i gmail.com en un altre, llavors no voldries que un script des de ''blabla.com'' pugui accedir o modificar el teu correu electrònic o executar accions en gmail en nom teu.

L'essència de la política del mateix origen pot formular-se com: les finestres poden comunicar-se entre elles només si són del mateix protocol://domini: port o, en breument, del mateix origen.

Aquest exemples son del mateix origen:
<pre>
http://site.com
http://site.com/
http://site.com/my/page.html
</pre>

Aquestes altres, en canvi, son s'origen diferent:
<pre>
http://www.site.com (another domain)
http://site.org (another domain)
https://site.com (another protocol)
http://site.com:8080 (another port)
</pre>

== Missatges entre diferents finestres ==
La API per l'intercanvi de missatges entre diferents finestres és compatible amb tots els navegadors moderns, incloent IE8. Permet finestres / marcs de diversos dominis comunicar-se entre si. Per fer-ho s'utilitza el mètode postMessage.

El mètode window.postMessage permet la comunicació entre scripts amb seguretat. Normalment, els scripts de diferents pàgines se'ls permet comunicar si i només si les pàgines on son executats es troben en llocs amb el mateix protocol (http), el mateix port (80 és el valor predeterminat para HTTP), i domini (document.domain ha d'estar configurat a les dues pàgines amb el mateix valor).
''Window.postMessage proporciona un mecanisme controlat per eludir aquesta restricció'' d'una manera que és segura quan s'usa correctament.

Sintaxi :

<source lang="javascript">

window.postMessage(data, targetDomain)

</source>

* ''data'' : El missatge a enviar. La especificació diu que pot ser qualsevol tipus d'objecte, però a la pràctica la majoria de navegadors només implementen strings.
* ''targetDomain'' : el domini de la pàgina a la qual va dirigit el missatge.

'''El receptor del missatge'''
El receptor del missatge ha d'implementar un event per tal d'agafar la informació:

<source lang="html">
<div id="test">Envia'm un missatge!</div>

if (window.addEventListener){
addEventListener("message", listener, false); //Per altres Navegadors compatibles
} else {
attachEvent("onmessage", listener); //Per al navegador Microsoft Explorer
}

function listener(event){
if ( event.origin !== "http://javascript.info" )
return document.getElementById("test").innerHTML = "received: "+ event.data;
}

</source>
* event.origin : contè la informació del domini REAL d'on prové el missatge. No hi ha manera de que un hacker ho reemplaci.

Altres propietats de event:
*event.source : conté la referència a la finestra que t'envia el missatge. Pot contestar al missatge enviat de la següent manera : event.source.postMessage("missatge de resposta", event.origin);
*event.data : El primer paràmetre de postMessage();

Nota: IE8 no deixa comunicar-se entre pestanyes. Només amb iframes.

== Exercicis ==


== OBJECTE DATE ==

Javascript disposa dels objectes Date per a tractar amb dates. Internament, el sistema emmagatzema els milisegons transcorreguts des de les 0 hores de l'1 de gener del 1970 a la data que assignem a l'objecte Date.

crearem un objecte date usant el constructor Date. Aquest constructor pot prendre quatre formes:

<source lang="javascript">

new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);

</source>

Les més útils ens seran la primera i la quarta:

<source lang="javascript">

// Date sense parametres crea un objecte amb la data actual del sistema
var data1 =new Date();

// Si li passem més d'un paràmetre els interpretarà com a
// year, month, day, hours, minutes, seconds, milliseconds (per aquest ordre)
//
// important: els mesos estan numerats de 0 a 11 (0=gener, ... , 11=desembre)

// 0:0 del 28/10/2021:
var data2 = new Date(2021,9,28);

// 11:15 del 28/10/2021:
var data3 = new Date(2021,9,28,11,15);

</source>

Per a fer operacions amb dates hem de tenir en compte que internament s'emmagatzemen com a milisegons entre dues dates. Per exemple:
<source lang="javascript">
var d1 = new Date(2021,0,1);
var d2 = new Date(2022,0,1);

var d3=(d2-d1)/1000/3600/24;

document.write(d3+" dies transcorreguts");

</source>

NF1 - AJAX

2023-05-16T15:19:17Z

Jcomas: /* Solucions */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia







=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>
:si es crida: http://URL-servidor/exercici6.php?q=e
:retorna: <source>Eva<br>Eve<br>Evita<br>Elizabeth<br>Ellen</source>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==

http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:57:40Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia







=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>
:si es crida: http://URL-servidor/exercici6.php?q=e
:retorna: <source>Eva<br>Eve<br>Evita<br>Elizabeth<br>Ellen</source>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:57:11Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia







=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>
:si es crida: http://URL-servidor/exercici6.php?q=e
:retorna: <notextile>Eva<br>Eve<br>Evita<br>Elizabeth<br>Ellen</notextile>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:52:57Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia







=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>
:si es crida: http://URL-servidor/exercici6.php?q=e
:retorna: Eva\<br>Eve<br>Evita<br>Elizabeth<br>Ellen



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:50:15Z

Jcomas: /* Exercici 4 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia







=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:49:30Z

Jcomas: /* Exercici 4 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
:si es crida: http://URL-servidor/exercici4.php?q=barcelona
:retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>






=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:49:10Z

Jcomas: /* Exercici 4 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:

:si es crida: http://URL-servidor/exercici4.php?q=barcelona

retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>






=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:47:05Z

Jcomas: /* Exercici 4 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:

si es crida: http://URL-servidor/exercici4.php?q=barcelona

retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>






=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-18T16:46:31Z

Jcomas: /* Exercici 4 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
si es crida: http://URL-servidor/exercici4.php?q=barcelona
retorna: ---------,Ciutat Vella,Eixample,Sants-Montuïc,Les Corts,Gràcia
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>






=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:20:47Z

Jcomas: /* Solucions */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==


== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:20:23Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>


== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

Exercici 6

2023-04-14T16:19:46Z

Jcomas: /* Programa de servidor exercici6.php */

== Programa de client '''exercici6.html''' amb objecte XMLHtmlRequest ==

<source lang=html>
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>

<script lang="javascript">
var xhr=new XMLHttpRequest();

var contingut=document.getElementById("contingut");
var input=document.getElementById("input");

input.oninput=function () {
xhr.open("GET","exercici6.php?q="+input.value);
xhr.send(null);
};

xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200) {
contingut.innerHTML=xhr.responseText;
}

};
</script>
</body>
</html>
</source>

== Programa de client '''exercici6.html''' amb FETCH ==

<source lang=html>
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>

<script lang="javascript">

var contingut=document.getElementById("contingut");
var input=document.getElementById("input");
input.oninput=function () {

fetch("exercici6.php?q="+input.value)
.then( function(response){
if(response.ok) {
return response.text()
} else {
throw "Error a la crida Ajax";
}
})
.then(function(responseText){
contingut.innerHTML=responseText;
})
.catch(function(err) {
console.log(err);
});

};

</script>

</body>
</html>
</source>
== Programa de client '''exercici6.html''' amb AXIOS ==

<source lang=html>
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">

var contingut=document.getElementById("contingut");
var input=document.getElementById("input");
input.oninput=function () {

axios.get("exercici6.php?q="+input.value)
.then(function(response){
contingut.innerHTML=response.data;
})
.catch(function(err) {
console.log(err);
});

};

</script>

</body>
</html>
</source>

Exercici 4

2023-04-14T16:18:46Z

Jcomas: /* Programa de servidor exercici4.php */

== Programa de client '''exercici4.html''' amb objecte XMLHtmlRequest ==

<source lang=html>
<html>
<body>
<h1>exercici 4 AJAX</h1>

<label>Escull una ciutat:</label>

<select name="ciutat" id="ciutat">
<option value="-">---------</option>
<option value="barcelona">Barcelona</option>
<option value="lacoruna">La Coruña</option>
<option value="madrid">Madrid</option>
<option value="sevilla">Sevilla</option>
</select>
<br><br>
<label>Escull un barri:</label>
<select name="barri" id="barri">
<option value="-">---------</option>
</select>

<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");

var xhr=new XMLHttpRequest();
ciutat.onchange=function () {
xhr.open("GET","exercici4.php?q="+ciutat.value);
xhr.send(null);
};

xhr.onreadystatechange=function (){

barri.innerHTML="";

if(xhr.readyState==4 && xhr.status==200) {
var arr_barris=(xhr.responseText).split(",");

for(var _barri of arr_barris) {
var opt=document.createElement("option");
var opt_text=document.createTextNode(_barri);
opt.appendChild(opt_text);
barri.appendChild(opt);
}
}
};

</script>

</body>
</html>

</source>

== Programa de client '''exercici4.html''' amb FETCH ==

<source lang=html>
<html>
<body>
<h1>exercici 4 AJAX</h1>

<label>Escull una ciutat:</label>

<select name="ciutat" id="ciutat">
<option value="-">---------</option>
<option value="barcelona">Barcelona</option>
<option value="lacoruna">La Coruña</option>
<option value="madrid">Madrid</option>
<option value="sevilla">Sevilla</option>
</select>
<br><br>
<label>Escull un barri:</label>
<select name="barri" id="barri">
<option value="-">---------</option>
</select>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");
ciutat.onchange=function () {

fetch("exercici4.php?q="+ciutat.value)
.then( function(response){
if(response.ok) {
return response.text()
} else {
throw "Error a la crida Ajax";
}
})
.then(function(responseText){
barri.innerHTML="";
var arr_barris=(responseText).split(",");

for(var _barri of arr_barris) {
var opt=document.createElement("option");
var opt_text=document.createTextNode(_barri);
opt.appendChild(opt_text);
barri.appendChild(opt);
}
})
.catch(function(err) {
console.log(err);
});

};

</script>

</body>
</html>

</source>

== Programa de client '''exercici4.html''' amb AXIOS ==

<source lang=html>
<html>
<body>
<h1>exercici 4 AJAX</h1>

<label>Escull una ciutat:</label>

<select name="ciutat" id="ciutat" onchange="canvi_ciutat()">
<option value="-">---------</option>
<option value="barcelona">Barcelona</option>
<option value="lacoruna">La Coruña</option>
<option value="madrid">Madrid</option>
<option value="sevilla">Sevilla</option>
</select>
<br><br>
<label>Escull un barri:</label>
<select name="barri" id="barri">
<option value="-">---------</option>
</select>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");
ciutat.onchange=canvi_ciutat;

function canvi_ciutat() {

axios.get("exercici4.php?q="+ciutat.value)
.then(function(response){
barri.innerHTML="";
var arr_barris=(response.data).split(",");

for(var _barri of arr_barris) {
var opt=document.createElement("option");
var opt_text=document.createTextNode(_barri);
opt.appendChild(opt_text);
barri.appendChild(opt);
}
})
.catch(function(err) {
console.log(err);
});

}

</script>

</body>
</html>

</source>

NF1 - AJAX

2023-04-14T16:14:06Z

Jcomas: /* Exercicis curs 2021-2022 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:13:53Z

Jcomas: /* Exercicis amb Fetch */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==
* Torna a fer els exercicis 4 i 6 usant la llibreria Fetch

== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:13:33Z

Jcomas: /* Exercicis amb Axios */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis amb Axios==
* Torna a fer els exercicis 4 i 6 usant la llibreria Axios

== Exercicis amb Fetch==

== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:11:38Z

Jcomas: /* Exercicis amb XMLHttpRequest */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis amb Axios==

== Exercicis amb Fetch==

== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:09:09Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis amb XMLHttpRequest==

Per a cada exercici es proporciona els programa PHP de servidor necessari.

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:06:52Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>



== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:06:28Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

Fitxer exercici6.php:
<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>

ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:05:54Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

<source lang="php">
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>

ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T16:05:34Z

Jcomas: /* Exercici 6 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

<source lang="php">

<?php
<?php
// Array with names
$a = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>

ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T15:58:13Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

<source lang="php">

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$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";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
</source>

ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T15:56:50Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes

<source lang="php">
<?php
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$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";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
?>

ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T15:45:52Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>





=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T15:43:01Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>






=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-14T15:41:48Z

Jcomas: /* Exercicis (Es proporcionen els fitxers PHP necessaris) */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


-->

=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:45:10Z

Jcomas: /* Exercicis */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis (Es proporcionen els fitxers PHP necessaris)==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:42:14Z

Jcomas: /* Exercicis */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.

Fitxer exercici4.php:
<source lang="php">
<?php
$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);
$q = $_REQUEST["q"];
echo "---------,".implode(",",$barri[$q]);
?>
</source>


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:36:53Z

Jcomas: /* Exercicis */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>


=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:36:30Z

Jcomas: /* Exercicis */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>



=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>



=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina

Fitxer exercici3.php:
<source lang="php">
<?php
$nom=$_REQUEST["nom"];
$cognom=$_REQUEST["cognom"];

echo strtoupper($nom).",".strtoupper($cognom);
?>
</source>


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:34:58Z

Jcomas: /* Exercicis */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>



=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.

Fitxer exercici2.php:
<source lang="php">
<?php
sleep(3);
?>
</source>



=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:33:42Z

Jcomas: /* Exercici 1 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source lang="php">
<?php
phpinfo();
?>
</source>



=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - AJAX

2023-04-11T17:32:49Z

Jcomas: /* Exercici 1 */

= AJAX =

Ajax significa Asynchronous JavaScript i XML, un terme que va ser encunyat per Jesse James Garrett en Adaptive Path, el febrer de 2005. S'hi descriu una metodologia de desenvolupament d'aplicacions web d'una manera diferent a la tradicional.
Segons l'article, les aplicacions web i llocs tradicionals funcionen sincrònicament-cada vegada
segueix un enllaç, o quan s'envia un formulari, el navegador envia les dades al servidor, el servidor (amb sort) respon, i tota la pàgina s'actualitza.
Aplicacions Ajax funcionen de forma asíncrona, el que significa que envies dades d'anada i tornada entre el navegador i el servidor sense haver de recarregar tota la pàgina. Substitueix només les parts de la pàgina que canvia.
[[Fitxer:ajax_vs_traditional.png|center]]

El realment bo d'això és que la comunicació entre el motor Ajax i el navegador passa a través de JavaScript i no a través de carregar la pàgina.
En termes pràctics, això significa per a l'usuari final menys temps d'espera per carregar les pàgines i la visualització, i més fàcil la interacció amb la pàgina, per que pots sol·licitar dades i continuar llegint el text o el contingut d'una altre part de la pàgina.
== Els principals elements d'AJAX ==
Ajax no és una tecnologia única. Més aviat, és una col·lecció de quatre tecnologies que es complementen:
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Tecnologia
! align="left" width="450 px" style="background:Lavender; color:Black"|Expliació
|-
| JavaScript ||És un llenguatge de scripting de propòsit general dissenyat per a ser integrat dins les aplicacions. L'intèrpret de JavaScript en un navegador web permet la interacció programàtica amb moltes de les capacitats incorporades del navegador. Aplicacions Ajax estan escrits en JavaScript.
|-
| Cascading Style Sheets (CSS) || Ofereix una forma de definir els estils visuals reutilitzables per a elements de la pàgina web. Ofereix una forma senzilla i potent de definir i aplicar un estil visual consistent. En una aplicació Ajax, l'estil d'una interfície d'usuari es pot ajustar de forma interactiva a través de CSS.
|-
| Document Object Model (DOM) ||El DOM presenta l'estructura de les pàgines web com un conjunt d'objectes programables que poden ser manipulats amb JavaScript. Scripts del DOM permet a una aplicació Ajax modificar la interfície d'usuari sobre la marxa, tornar a dibuixar de manera efectiva les parts de la pàgina.
|-
| XMLHttpRequest object (XHR) || El objecte XMLHttpRequest permet que els programadors web recuperarin les dades des del servidor web com una activitat de fons. El format de dades és típicament XML, però funciona bé amb totes les dades basades en text.
|-
|}

== Funcionament ==
L'objecte XHR ens permet fer peticions HTTP al servidor i rebre la resposta mitjançant programació , en lloc que el navegador doni automàticament la resposta com una nova pàgina .
El primer que hem de fer és crear un objecte XHR. A continuació , proporcionar-li la informació que necessita per realitzar la sol·licitud i finalment , gestionar la resposta quan ens la donen.Entre l'enviament de la sol·licitudi la recepció de la resposta , hi ha feina per fer en el servidor, i algunes linies més de codi que hem d'escriure en PHP, Java, .NET o qualsevol altre.

Ens interessa principalment el codi del costat del client, a més la mecànica del costat del servidor de maneig d'una senzilla
petició Ajax no són molt diferents de programació web pre-Ajax.

[[Fitxer:lifecycle-ajax.png|center]]

===El API XMLHttpRequest===
El cor d'AJAX és una API anomenada XMLHttpRequest(XHR), disponible en els llenguatges de scripting en el costat del client,com ara JavaScript. S'utilitza per realitzar peticions, HTTP o HTTPS, directament al servidor web, i per carregar les respostes directament a la pàgina del client. Les dades que rebem des del servidor es poden rebre en forma de text pla o text XML. Aquestes dades podran ser utilitzats per modificar el DOM del document actual, sense haver de recarregar la pàgina, o també podran ser avaluats amb JavaScript, si són rebuts en format JSON.
XMLHttpRequest juga un paper molt important en la tècnica AJAX, ja que sense aquest objecte, no seria possible realitzar les peticions asíncrones al servidor.
Una de les limitacions de XMLHTTPR equest és que, per seguretat, només ens deixa realitzar peticions AJAX, a les pàgines que es trobin allotjades en el mateix domini, des del qual s'està realitzant la petició AJAX.

=== L'objecte XHR (XMLHttpRequest) ===
En un món perfecte, el codi escrit per a un navegador funcionaria en tots els navegadors. Ja hem après que no vivim en aquest món, i les coses no són diferents quan es tracta d'Ajax. Hi ha una manera estàndard de fer peticions asíncrones a través de l'objecte JavaScript XHR, i una manera patentada Internet Explorer que utilitza un control ActiveX. Amb IE 7, un embolcall que emula la interfície estàndard està disponible, però IE 6 requereix codi diferent.
Un cop creat l'objecte XHR, el codi per configurar, iniciar i respondre a la sol·licitud és relativament independent del navegador, i la creació d'una instància de XHR és fàcil per a qualsevol navegador en particular. El problema és que els diferents navegadors implementen XHR de diferents maneres, i hem de crear la instància de la manera adequada per al navegador actual.
Utilitzarem la técnica ''featured detection'' per averiguar quin objecte XHR podem crear pel navegador actual.
Exemple de la '''creació''' d'aquest Objecte:
<pre>
var xhr;
if (window.ActiveXObject) { //Iexplorer
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
xhr = new XMLHttpRequest();
}
else {
throw new Error("Ajax is not supported by this browser");
}
</pre>

=== Mètodes i propietats de l'objecte XHR ===
Primer donem una ullada als mètodes del Objecte XMLHttpRequest:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Mètode
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| abort() || Fa que la Sol·licitud que s'està executant sigui cancel·lada.
|-
| getAllResponseHeaders() || Retorna una cadena que conté els noms i valors de totes les capçaleres de resposta.
|-
| getResponseHeader(name) || Retorna el valor de la capçalera de la resposta anomenada 'named'.
|-
| open(method,url,async, username,password) || Estableix el mètode HTTP (GET o POST) i l'URL de destinació de la sol·licitud. Opcionalment, la sol·licitud pot ser declarada síncrona (async=false), i es pot subministrar un nom d'usuari i contrasenya per a les sol·licituds que requereixen autenticació.
|-
| send(dades) ||dades: S'usa en el cas que estiguem utilitzant el mètode POST, com a mètode d'enviament.Si fem servir GET, dades serà null
|-
| setRequestHeader(name,value) || Afegeix el parell etiqueta / valor a la capçalera de dades que s'enviarà al servidor
|}

Exemples amb els diferents mètodes de enviament d'informació (GET i POST):
*Exemple amb GET: Amb el mètode GET els paràmetres es passen a la mateixa URL.
<source lang="java">
xmlhttp.open("GET", "datos.php?curso=SMX1&tutor=Julio+Noguera", true);
xmlhttp.send(null);
</source>
*Exemple amb POST: Con el método POST los parámetros se pasan con la función datos.send().
<source lang="java">
xmlhttp.open("POST","datos.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("curso=SMX1&tutor=Julio+Noguera");
</source>

si no s'estableix la capçalera "Content-Type" correcta, el servidor descarta totes les dades enviades mitjançant el mètode POST. D'aquesta manera, al programa que s'executa en el servidor no li arriba cap paràmetre. Així, per enviar paràmetres mitjançant el mètode POST, és obligatori incloure la capçalera "Content-Type"

===Propietats del Objecte XMLHttpRequest:===

L'objecte XMLHttpRequest, disposa de les següents propietats, que ens faciliten informació sobre el estat de la petició al servidor, i on rebrem les dades de la resposta retornada a la petició AJAX:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Propietat
! align="left" width="450 px" style="background:Lavender; color:Black"|Descripció
|-
| onreadystatechange || Emmagatzema una funció (o el nom d'una funció), que serà cridada automàticament, cada vegada que es produeixi un canvi en la propietat readyState.
|-
| readyState ||Emmagatzema l'estat de la petició XMLHTTPRequest. Possibles estats, del 0 al 4:
'''0:''' sol·licitud no inicialitzada.

'''1:''' connexió establerta amb el servidor.

'''2:''' sol·licitud rebuda.

'''3:''' processant sol·licitud.

'''4:''' sol·licitud ja acabada i la resposta està disponible.
|-
| responseText || Conté les dades de resposta, com una cadena de text.
|-
| responseXML || Si es responseText és XML aqui trobem l'arbre XML DOM associat. Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc.).Retorna un [object XMLDocument]
|-
| status || El codi d'estat de resposta retornat pel servidor. Per exemple: 200 per a l'èxit o el 404 perquè no es troba. Consulteu l'especificació [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10 HTTP] per a tot el conjunt de codis.
|-
| statusText || El missatge de text de l'estat retornat pel servidor. (per exemple: "Not Found" o "OK").
|}

=== Utilització de l'objecte XHR ===

Ara que tenim una instància XHR creada, donem una ullada al que es necessita per configurar i executar la sol·licitud al servidor.

*Especificar un mètode HTTP com GET o POST
*Especificar la URL del servidor al que demanarem la informació a mostrar a l'usuari
*Especificar a l'objecte XHR la manera que volem saber del progrès de la petició
*Especificar la informació a enviar al servidor (content).

Amb la següent sentencia javascript especifiquem els primers dos items del llistat anterior:
<source lang="java">
xhr.open('GET', 'url');
o
xhr.open('POST', 'url');
</source>
Tingues en compte que la sentencia anterior no envia res al servidor, només estem configurant l'objecte per tal que utilitzi un servidor i un mètode de conexió HTTP.

El tercer item diu que hem de dotar a l'objecte XHR amb un mecanisme d'avís per fer-nos saber com va la petició ajax. Per fer-ho, s'ha d'assignar una funció de resposta (callback function) a la propietat ''onreadystatechange'' del objecte XHR. Aquesta funció l'executarà l'objecte XHR en diverses ocasions, segons l'estat amb el que es trobi l'objecte.
<source>
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
// només ens interesa si la petició al servidor
// s'ha completat i ha estat correcta.
}
else {
// problema amb la petició
}
}
}
</source>

A l'últim item s'ha d'especificar, si hi ha, la informació necessaria que necessita saber el servidor per tal de processar correctament la petició. Finalment, enviar la petició. Aixó s'aconsegueix amb el mètode ''send()'' de l'objecte XHR.
<pre>
xhr.send("a=1&b=2");
</pre>

=== Resposta del servidor mitjançant l'objecte XHR ===

Una vegada s'ha completat la petició al servidor podem agafar la seva resposta (response) del objecte XHR. El format de la resposta pot ser qualsevol format en mode TEXT; no està limitat a XML. De fet, la majoria del temps, la resposta de Ajax és un altre format. Aquest pot ser text planer, un fragment HTML o pot ser una representació d'objecte de JavaScript com és JSON.

Sigui quin sigui el format del text, la resposta es pot obtenir mitjançant la propietat ''responseText'' del objecte XHR. Si la resposta està en format XML, per que s'ha especificat utilitzant el tipus MIME '''text/xml''' o '''application/xml''', es tractada i es crea un arbre DOM que està disponible a la propietat responseXML del objecte XHR.

Una vegada tenim la resposta del servidor la hem de carregar al element DOM apropiat.

Exemple:
<source lang="java">
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status >= 200 && this.status < 300) {
document.getElementById('someContainer').innerHTML = this.responseText;
}
}
}
</source>

<source lang="java">

var objetoXHR = new XMLHttpRequest();

function obtenerDatosServidor(origen, elemento) //Función “obtenerDatosServidor” contiene dos parámetros
{
var objeto_destino = document.getElementById(elemento); // Se elige el elemento HTML a ser modificado.
objetoXHR.open(“GET”, origen); //Se configura una conexión asíncrona con una URL.
objetoXHR.onreadystatechange = respuesta; // Se indica la función a ser llamada una vez el estado
// del objeto cambie.
objetoXHR.send(null); // Se abre la conexión.
}

function respuesta()
{
if (objetoXHR.readyState == 4 && objetoXHR.status == 200)
{
objeto_destino.innerHTML = objetoXHR.responseText;
}
}

</source>

===EJEMPLO GET EN AJAX===

'''SERVIDOR GET'''

<source lang="PHP">
<?php
$seleccion = $_GET['curso'];
$tutor = $_GET['tutor'];

echo "curso ".$seleccion." tutor ".$tutor ;

</source>

'''GET con AJAX'''
<source lang="javascript">
<script>
window.onload = function () {
let datos;

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById("resultado").innerHTML = datos.responseText;

}

function iniciar() {
var url = 'get.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
datos = new XMLHttpRequest();
datos.open("GET", url + '?' + params, true);
datos.onreadystatechange = mostrar_datos;
datos.send(null);
}

document.getElementById("boton").onclick = iniciar;
}
</script>

</head>

<body>

<form name="formulario" method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMX1" selected> SMX1 </option>
<option value="SMX2"> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" />
<input type="button" id="boton" name="boton" value="ok">

</form>
<br>
<h3>CONTENIDO:</h3>
<div id="resultado">resultado</div>
</body>
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/b7GuKxIQYOg

===EJEMPLO POST EN AJAX===

'''SERVIDOR POST'''

<source lang="PHP">
$seleccion = $_POST['curso'];
$tutor = $_POST['tutor'];
echo "curso ".$seleccion." tutor ".$tutor;

</source>

'''POST con AJAX'''

<source lang="javascript">

<script type="text/javascript">
var datos;

function pedir_datos(url, params) {
datos = new XMLHttpRequest();
datos.open("POST", url, true);
datos.onreadystatechange = mostrar_datos;
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
datos.send(params);
}

function mostrar_datos() {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}

function iniciar() {
var url = 'post.php';
var params = formulario.curso.name + '=' + formulario.curso.value + '&' + formulario.tutor.name + '=' + formulario.tutor.value;
pedir_datos(url, params);
}
</script>

</head>

<body>
<form name="formulario" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMX1"> SMX1 </option>
<option value="SMX2" selected> SMX2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Julio Noguera" />
<input type="submit" name="submit" value="boton" />
</form>
<div id="resultado"> </div>
</body>

</source>

'''CORS'''

Esta cabecera la ponemos para que peticiones AJAX se acepten desde fuera del dominio. Sin ella, no funcionaria las peticiones al hosting XXXXX.

Esta cabecera NO debe estar si haceis peticiones AJAX entre un mismo dominio

header("Access-Control-Allow-Origin: *");

'''VIDEOTUTORIAL'''

https://youtu.be/ULSCT3nYzJ8

===FETCH===

API fetch es que utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Aquí hay que aclarar un punto con los errores: si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch(), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then(). Sólo si hay un error de red o de otro tipo se ejecutará el catch().

Otro aspecto importante que hay que comprender es que para obtener el body o cuerpo del mensaje devuelto por el servidor deberemos obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.

<source lang="javascript">
fetch('https://httpbin.org/ip')
.then(function(response) { //Este objeto 'response' contiene la respuesta que hace el servidor y dispone de una serie de propiedades con los valores de esa respuesta
console.log('response.body =', response.body);
console.log('response.bodyUsed =', response.bodyUsed);
console.log('response.headers =', response.headers);
console.log('response.ok =', response.ok);
console.log('response.status =', response.status);
console.log('response.statusText =', response.statusText);
console.log('response.type =', response.type);
console.log('response.url =', response.url);
return response.text();
})
.then(function(data) {
console.log('data = ', data);
})
.catch(function(err) {
console.error(err);
});
</source>

-hemos llamado a fetch() con la URL a la que queremos acceder como parámetro esta llamada nos devuelve una promesa

-el método then() de esa promesa nos entrega un objeto response

-del objeto response llamamos al método text() para obtener el cuerpo retornado en forma de texto

-nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido

-el método then() de esa promesa recibe el cuerpo devuelto por el servidor en formato de texto

-hemos incluido un catch() por si se produce algún error

<source lang="javascript>

let data = new FormData();
// También se puede enviar cambiando el FormData
// data = new URLSearchParams("profesor=Julio&INS=La Merce");
data.append('profesor', 'Julio');
data.append('INS', 'La Mercè');
fetch('./datos.php', {
method: 'POST',
body: data
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["INS"].$_POST["profesor"];
</source>

'''OTRA FORMA RECUPERANDO DATOS DEL FORMULARIO'''

'''HTML'''
<source lang="html">
<form action='./datos.php' id="formulario" method="POST">
Input1: <input name='input1'><br>
Input2: <input name='input2'><br>
<input type='submit'>
</form>
</body>
</source>

'''JS'''
<source lang="javascript">
var testForm = document.getElementById('formulario');
testForm.onsubmit = function(event) { //en el momento que se activa un botón submit
event.preventDefault(); //evita que se propague el evento recargando la página.
var formData = new FormData(document.getElementById('formulario')); //recupera los datos del formulario.

fetch('./datos.php', {
method: 'POST',
body: formData
})
.then(function(response) {
if(response.ok) {
return response.text()
} else {
throw "Error en la llamada Ajax";
}

})
.then(function(texto) {
console.log(texto);
})
.catch(function(err) {
console.log(err);
});

}
</source>

'''SERVIDOR'''
<source lang="PHP">
echo $_POST["input1"].$_POST["input2"];
</source>

'''VIDEOTUTORIAL'''

Promeses: https://www.youtube.com/watch?v=pHBmmbDQl0o

FETCH: https://youtu.be/6BeO1gObVS8

https://www.todojs.com/api-fetch-el-nuevo-estandar-que-permite-hacer-llamadas-http/

https://cursos.mejorcodigo.net/article/el-fetch-api-en-javascript-43

https://desarrolloweb.com/articulos/fetch-post-ajax-javascript.html

===AXIOS===

Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesa.

Así que Axios es una alternativa que nos brinda multitud de ventajas:

*La API es unificada para las solicitudes Ajax.
*Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
*De fácil utilización y como complemento perfecto para las páginas convencionales.
*Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
*Compatibilidad con todos los navegadores en sus versiones actuales.

'''TABLA COMPARATIVA'''

https://www.javascriptstuff.com/ajax-libraries/

'''GET'''
<source lang="js">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://api.github.com/users/julio', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
</source>

'''POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
</source>

'''FORMA MÁS ABREVIADA GET'''

<source lang="js">
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</source>

'''FORMA MÁS ABREVIADA POST'''

<source lang="js">
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
</source>

'''VIDEOTUTORIAL'''

https://youtu.be/-Fl11UJmYSQ

https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/

===ASYNC AWAIT===

https://codingpotions.com/vue-axios#async--await-para-las-llamadas

https://blog.nexlab.dev/tech/2018/08/31/que-es-async-await-en-javascript.html

https://www.oscarblancarteblog.com/2019/03/15/javascript-async-await/

https://www.youtube.com/watch?v=stiPdlSkTOI

== Exercicis ==

=== Exercici 1 ===

Crea una petició amb AJAX per tal de conèixer els paràmetres de configuració del php. Et recordo que per obtenir-los només cal executar la funció de php anomenada phpinfo();

Fitxer exercici1.php:
<source>
<?php
phpinfo();
?>
</source>



=== Exercici 2 ===

Realitzar un exercici que mostri per pantalla en quin estat de petició està (1 al 4) per pantalla, per a això s'haurà d'afegir en un fitxer anomenat espera a php o jsp amb una pausa de tres segons i quan acabi haurà de mostrar el temps abans i després d'aquest temps.


=== Exercici 3 ===
Crea dos camps (nom i cognom). Envia la informació mitjançant AJAX al servidor PHP i fes que et retorni els valors passats a majúscules. Insereix directament amb HTML la informació a un DIV a la pàgina


=== Exercici 4 ===
Desplegables encadenats. Es vol crear 2 desplegables en HTML que la seva informació la obtingui del servidor mitjançant AJAX.
El primer Desplegable ha de contenir les següents ciutats: Barcelona, Madrid, Sevilla, LaCoruña.
El segon desplegable mostrarà els Barris de la Ciutat escollida al primer desplegable.


=== Exercici 5 ===
*a)Crea un formulari que demani nom d'usuari i contrasenya. Crea un botó de validació que validi amb AJAX que l'usuari introduït no existeixi. Si existeix s'ha de proposar un nom alternatiu. Com no utilitzarem BD crea un fitxer on a cada linia hi hagi un nom d'usuari. El nou nom d'usuari no ha de coincidir amb cap dels noms que apareix a la llista.


*b)Crea un Botó anomenat enviar que mitjançant AJAX envii el nom d'usuari i la contrasenya al servidor. El nom d'usuari s'ha d'afegir al fitxer anterior.


=== Exercici 6 ===

Es tracta de crear un input que s'introduiran noms i mitjançant ajax consultar la base de dades si hi ha el nom en cas d'existir ha de mostrar tots els noms que comencen amb les lletres introduïdes


ocult


== Exercicis curs 2021-2022==

* Exercicis 4 i 6 amb objecte XMLHttpRequest
* Exercicis 4 i 6 amb fetch
* Exercicis 4 i 6 amb axios

== Solucions ==
http://wikiserver.infomerce.es/index.php/Exercici_4

http://wikiserver.infomerce.es/index.php/Exercici_6

== API que usen AJAX ==

https://www.svnlabs.com/blogs/php-spotify-web-api/

https://developer.spotify.com/dashboard/

https://rapidapi.com/categories

= Referències =
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html

= Bibliografia =
<p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>
<p>Dace Crane, Bear Bibeault, Jord Sonneveld,"Ajax in Practice", Ed. Manning, 2007, ISBN 1-932394-99-0 </p>
<p>Christian Heilmann, "Beginning JavaScript with DOM Scripting and Ajax", Ed. Apress, 2006, ISBN 1-59059-680-3 </p>

NF1 - Esdeveniments i Validacio de formularis

2023-03-21T18:55:07Z

Jcomas: /* solució */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2

=== Event document.onload ===
Crea una pàgina on sigui imprescindible assignar les funcions de resposta a events quan es dispara l'event document.onload.

=== Estrella Michelin ===

Un restaurant té 4 tapes principals on cadascuna té un preu 1 €, 2 €, 3 € i 4 € (esquerra a dreta).

Com el local és petit, es disposa de dos cambrers, cadascun d'ells té un botó que l'executarà en el cas de servir una tapa. Quan un cambrer serveixi una tapa haurà:
*1. Primer seleccionar-se amb el botó
*2. Clicar a la tapa o tapes servides.

Cada vegada que el cambrer faci click a una tapa el seu preu s'incrementarà en la recaudació del cambrer.

[[Fitxer:Michelin.png|900px|center]]

:[[solucio michelin]]


= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF2 - Model d'objectes del document

2023-03-07T18:12:35Z

Jcomas: /* Exercici Carta Restaurant - continuació */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici mostrar/ocultar nodes DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

=== Exercici Carta Restaurant ===
La carta d'un restaurant té 5 primers plats, 5 segons plats i 5 postres/cafè. Cada plat tindrà un preu associat.
Fes una pàgina que permeti prendre una comanda al cambrer. Primer es mostraran els primers plats seleccionats, a continuació els segons plats seleccionats, a continuació els postres/cafè seleccionats i finalment el preu total de la comanda.
*Inicialment la comanda estarà en blanc i el preu serà de 0,00 €.
*Al peu de pàgina hi haurà tres botons amb els texts "afegir primer", "afegir segon" i "afegir postre/cafè" respectivament.
*Quan es premi el botó "afegir primer" s'afegirà un combo box (<select>) amb els possibles primers plats a la secció de primers plats de la pàgina.
*Els botons "afegir segon" i "afegir postre/cafè" tindran un comportament equivalent pels segons i postres/cafès respectivament.
*Sempre que es canvii el valor seleccionat a un dels combos es recalcularà el preu total de la comanda.

=== Exercici Carta Restaurant - continuació===
Afegeix al peu de pàgina tres botons amb els texts "Borrar primer", "Borrar segon" i "Borrar postre/cafè".
*El botó "Borrar primer" eliminarà l'ultim dels combos de primers plats.
*Els botons "Borrar segon" i "Borrar postre/cafè" tindran un comportament equivalent pels segons plats i pels postres/cafès respectivament.

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T18:09:59Z

Jcomas: /* Exercicis curs 2022/2023 */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici mostrar/ocultar nodes DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

=== Exercici Carta Restaurant ===
La carta d'un restaurant té 5 primers plats, 5 segons plats i 5 postres/cafè. Cada plat tindrà un preu associat.
Fes una pàgina que permeti prendre una comanda al cambrer. Primer es mostraran els primers plats seleccionats, a continuació els segons plats seleccionats, a continuació els postres/cafè seleccionats i finalment el preu total de la comanda.
*Inicialment la comanda estarà en blanc i el preu serà de 0,00 €.
*Al peu de pàgina hi haurà tres botons amb els texts "afegir primer", "afegir segon" i "afegir postre/cafè" respectivament.
*Quan es premi el botó "afegir primer" s'afegirà un combo box (<select>) amb els possibles primers plats a la secció de primers plats de la pàgina.
*Els botons "afegir segon" i "afegir postre/cafè" tindran un comportament equivalent pels segons i postres/cafès respectivament.
*Sempre que es canvii el valor seleccionat a un dels combos es recalcularà el preu total de la comanda.

=== Exercici Carta Restaurant - continuació===
bla

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T18:08:12Z

Jcomas: /* Exercici Carta Restaurant */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici mostrar/ocultar nodes DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

=== Exercici Carta Restaurant ===
La carta d'un restaurant té 5 primers plats, 5 segons plats i 5 postres/cafè. Cada plat tindrà un preu associat.
Fes una pàgina que permeti prendre una comanda al cambrer. Primer es mostraran els primers plats seleccionats, a continuació els segons plats seleccionats, a continuació els postres/cafè seleccionats i finalment el preu total de la comanda.
*Inicialment la comanda estarà en blanc i el preu serà de 0,00 €.
*Al peu de pàgina hi haurà tres botons amb els texts "afegir primer", "afegir segon" i "afegir postre/cafè" respectivament.
*Quan es premi el botó "afegir primer" s'afegirà un combo box (<select>) amb els possibles primers plats a la secció de primers plats de la pàgina.
*Els botons "afegir segon" i "afegir postre/cafè" tindran un comportament equivalent pels segons i postres/cafès respectivament.
*Sempre que es canvii el valor seleccionat a un dels combos es recalcularà el preu total de la comanda.

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T18:06:29Z

Jcomas: /* Exercicis curs 2022/2023 */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici mostrar/ocultar nodes DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

=== Exercici Carta Restaurant ===
La carta d'un restaurant té 5 primers plats, 5 segons plats i 5 postres/cafè. Cada plat tindrà un preu associat.
Fes una pàgina que permeti prendre una comanda al cambrer. Primer es mostraran els primers plats seleccionats, a continuació els segons plats seleccionats, a continuació els postres/cafè seleccionats i finalment el preu total de la comanda.
*Inicialment la comanda estarà en blanc i el preu serà de 0,00 €.
*Al peu de pàgina hi haurà tres botons amb els texts "afegir primer", "afegir segon" i "afegir postre/cafè" respectivament.
*Quan es premi el botó "afegir primer" s'afegirà un combo box (<select>) amb els possibles primers plats a la secció de primers plats de la pàgina.
*Els botons "afegir segon" i "afegir postre/cafè" tindran un comportament equivalent pels segons i postres/cafès respectivament.

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T17:35:48Z

Jcomas: /* Exercici Enllaços DOM */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici mostrar/ocultar nodes DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T17:35:19Z

Jcomas: /* Exercici Enllaços DOM */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici Enllaços DOM ===
Afegeix a l'exercici anterior un combo box (<select>) amb els valors 1, 2 i 3 de text amb l'etiqueta "paràgraf" i dos botons amb el text "mostrar" i "ocultar".
*Quan es faci click al botó mostrar, es mostrarà (estil "display:block;") el paràgraf indicat pel valor seleccionat al combo box.
*Quan es faci click al botó ocultar, s'ocultarà (estil "display:none;") el paràgraf indicat pel valor seleccionat al combo box.

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T16:12:56Z

Jcomas: /* Exercicis curs 2022s passats */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022/2023 ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF2 - Model d'objectes del document

2023-03-07T16:12:20Z

Jcomas: /* Exercicis */

= Document Object Model =
És un conjunt d'objectes (API) Javascript que permeten interactuar amb el document HTML. Podem realitzar les següents operacions:
*Canviar i llegir el contingut i la estructura
*Canviar i llegir estils CSS
*Gestionar events

Existeixen diversos nivells (versions) de DOM :
*Nivell 0: Introduït per Netscape i Microsoft a principis dels 90 durant la guerra dels navegadors. Per aixó, no existeix un DOM estàndard.
*Nivell 1: A partir d'aquí es va fer càrrec del DOM el W3C. Va introduir contingut dinàmic.
*Nivell 2: "Serialització" de XML (ex: permet guardar documents), events de teclat,...

Els navegadors per poder utilitzar les utilitats de DOM, necessiten transformar la pàgina original. Una pàgina HTML normal no és més que una successió de caràcters, per la qual cosa és un format molt difícil de manipular. Per això, els navegadors web transformen automàticament totes les pàgines web en una estructura més eficient de manipular.

== Arbre DOM ==
DOM transforma tots els documents XHTML en un conjunt d'elements anomenats nodes, que estan interconnectats i que representen els continguts de les pàgines web i les relacions entre ells. Pel seu aspecte, la unió de tots els nodes es diu "arbre de nodes".
[[Fitxer:dom1.png|center]]

L'arrel de l'arbre de nodes de qualsevol pàgina XHTML sempre és la mateixa: un node de tipus especial denominat ''Document''.

A partir d'aquest node arrel, cada etiqueta XHTML es transforma en un node de tipus ''Element''. La conversió d'etiquetes en nodes es realitza de forma jeràrquica. D'aquesta forma, del node arrel solament poden derivar els nodes HEAD i BODY. A partir d'aquesta derivació inicial, cada etiqueta XHTML es transforma en un node que deriva del node corresponent a la seva '''etiqueta pare'''.

La transformació de les etiquetes XHTML habituals genera dos nodes: el primer és el node de tipus ''Element'' (corresponent a la pròpia etiqueta XHTML) i el segon és un node de tipus ''Text'' que conté el text tancat per aquesta etiqueta XHTML.
Exemple:
<source lang="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
</source>
[[Fitxer:dom2.gif|center]]
L'especificació completa de DOM defineix 12 tipus de nodes:
[[Fitxer:dom3.png|center]]
Encara que les pàgines XHTML habituals es poden manipular manejant solament quatre o cinc tipus de nodes:
*''Document'', node arrel del que deriven tots els altres nodes de l'arbre.
*''Element'', representa cadascuna de les etiquetes XHTML. Es tracta de l'únic node que pot contenir atributs i l'únic del que poden derivar altres nodes.
*''Attr'', es defineix un node d'aquest tipus per representar cadascun dels atributs de les etiquetes XHTML, és a dir, un per cada parell atribut=valor.
*''Text'', node que conté el text tancat per una etiqueta XHTML.
*''Comment'', representa els comentaris inclosos a la pàgina XHTML.

Cada node té diverses propietats que reflecteixen el grau parentiu amb els altres. Alguna d'aquestes propietats son les següents:
*childNodes: array amb els nodes fills.
*firstChild: primer node fills
*lastchild: últim node fill
*parentNode: node pare
*nextSibling: següent germà (node al mateix nivell i amb el mateix pare)
*lastSibling: germà anterior.
Exemple:
[[Fitxer:dom4.png|center]]

<source lang="java">

<ul id="myList"><li>Coffee</li><li id="arribaHermano">Tea</li><li>Mejillones</li></ul>
<div id="demo"></div>

var pri = document.getElementById("myList").firstChild.innerHTML;
var ulti = document.getElementById("myList").lastChild.innerHTML;
var x = document.getElementById("myList").parentNode.nodeName;
var Upbrother = document.getElementById("arribaHermano").previousSibling.innerHTML;
var ProHermano = document.getElementById("arribaHermano").nextSibling.innerHTML;

var nuevoItem = document.createElement("LI"); // Crear un nodo <li>
var nodoTexto = document.createTextNode("Nuevo Elemnto"); // crea un texto de nodo
nuevoItem.appendChild(nodoTexto); // Adjunta el texto a la <li>

var list = document.getElementById("myList"); // Obtiene el <ul> elemento para insertar un nuevo nodo
list.insertBefore(nuevoItem, list.childNodes[0]);

document.getElementById("demo").innerHTML ="primer Hijo: "+ pri+" Último Hijo: "+ ulti +" Nodo Padre: "+ x +" Hermano Previo: "+ Upbrother + " Próximo Hermano: "+ProHermano;

</source>

'''!CUIDADO'''
<source lang="java">
<ul id="myList">
<li>Coffee</li>
<li id="arribaHermano">Tea</li>
<li>Mejillones</li>
</ul>
<div id="demo"></div>

var primerHijoEspacio=document.getElementById("myList").firstChild; //selecciona primer espacio
var PrimerElementoCoffe=primerHijoEspacio.nextSibling; // selecciona el siguiente nodo que corresponde con el elemento.
var siguienteNodoEspacio=PrimerElementoCoffe.nextSibling; //selecciona el siguiente nodo que es un espacio.
var SegundoElementoTea=siguienteNodoEspacio.nextElementSibling; //selecciona el siguiente elemento.
var TercerElementoMejillones=SegundoElementoTea.nextElementSibling; //selecciona el siguiente elemento.

var TodoHijosEspacioElementos=document.getElementById("myList").childNodes; //incluye texto/comentarios y elementos
var ElementosHijos=document.getElementById("myList").children; //sólo elementos

//let primerElementoHijo=document.getElementById("myList").firstElementChild(); //selecciona el primer Nodo que corresponde con un Elemento
</source>

== Mètodes d'accés als nodes de l'arbre ==
És important recordar que l'accés als nodes, la seva modificació i la seva eliminació solament és possible quan l'arbre DOM ha estat construït completament, és a dir, després que la pàgina XHTML es carregui per complet.
A continuació es mostren les diferents formes per aconseguir un node de l'arbre de manera directa, sense haver de recórrer-ho:
*''getElementsByTagName(nomEtiqueta)'' : obté tots els elements de la pàgina XHTML l'etiqueta de la qual sigui igual que el paràmetre que se li passa a la funció.
El següent exemple mostra com obtenir tots els paràgrafs d'una pàgina XHTML:
<source lang="java">
var parrafos = document.getElementsByTagName("p");
</source>
El valor que retorna la funció és un array amb tots els nodes que compleixen la condició que la seva etiqueta coincideix amb el paràmetre proporcionat. El valor retornat és un array de nodes DOM, no un array de cadenes de text o un array d'objectes normals. Per tant, s'ha de processar cada valor del array de la forma que es mostra:
<source lang="java">
for(var i=0; i<parrafos.length; i++) {
//Obtenim tots els enllaços del cada paràgraf
var enlaces = parrafos[i].getElementsByTagName("a");
...
}
</source>

*''getElementsByName("nomElement")'':En aquest cas es busquen els elements l'atribut dels quals name sigui igual al paràmetre proporcionat.
En el següent exemple, s'obté directament l'únic paràgraf amb el nom indicat:
<source lang="java">
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
</source>
Normalment l'atribut name és únic per als elements HTML que ho defineixen, per la qual cosa és un mètode molt pràctic per accedir directament al node desitjat. En el cas dels elements HTML '''radiobutton''', l'atribut '''name''' és comú a tots els radiobutton que estan relacionats, per la qual cosa la funció retorna una col·lecció d'elements.

*''getElementById(idelement)'': Retorna l'element XHTML l'atribut del qual coincideix amb el paràmetre indicat en la funció. Com l'atribut ha de ser únic per a cada element d'una mateixa pàgina, la funció retorna únicament el node desitjat.
<source lang="java">
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
</source>

*''getElementsByClassName("nomclass")'': retorna una col·lecció de tots els elements en el document amb el nom de classe especificat, com un objecte nodelist. L'objecte nodelist representa una col·lecció de nodes. Els nodes poden ser accedits per nombres d'índex. L'índex comença en 0.

<source lang="java">

<div class="exemple">Primer Element amb class="exemple".</div>
<div class="exemple">Segon Element amb class="exemple".</div>

var x = document.getElementsByClassName("exemple");
</source>

*''document.querySelector()'' :Retorna el primer element que compleixi amb el criteri donat. Pot ser invocada sobre el document o sobre algun element. En cas d'usar-se sobre un element, les cerca es limita als fills d'aquest element.
Si la cerca no troba res, retorna null.

<source lang="javascript">

document.querySelector()

<h2 class="example">A heading with class="example"</h2> 
<p class="example">A paragraph with class="example".</p>

document.querySelector(".example").style.backgroundColor = "red";
</source>

*''document.querySelectorAll()'' Retorna tots els elements que compleixin amb el criteri donat. A l'igual que querySelector pot ser invocada sobre el document o sobre algun element. Sempre retorna 1 nodelist.

<source lang="javascript">
/*Selecciona tots els elements i retorna un NodeList, després per cada iteració afeig un 'border'*/
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,div,p');
for (var i = tags.length - 1; i >= 0; i--) {
tags[i].style.outline = "1px solid green";
}
</source>

=== Accedir als atributs d'un node ===
Els atributs XHTML dels elements de la pàgina es transformen automàticament en propietats dels nodes. Per accedir al seu valor, simplement s'indica el nom de l'atribut XHTML darrere del nom del node.
<source lang="java">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>
</source>
Per obtenir el valor de qualsevol propietat CSS del node, s'ha d'utilitzar l'atribut style. El següent exemple obté el valor de la propietat margin de la imatge:
<source lang="java">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

== Creació i eliminació nodes de l'arbre ==
=== Creació de nodes XHTML simples ===
crear i afegir a la pàgina un nou element XHTML senzill consta de quatre passos diferents:

*Creació d'un node de tipus Element que representi a l'element.
*Creació d'un node de tipus Text que representi el contingut de l'element.
*Afegir el node Text com a node fill del node Element.
*Afegir el node Element a la pàgina, en forma de node fill del node corresponent al lloc en el qual es vol inserir l'element.
D'aquesta manera, si es vol afegir un paràgraf simple al final d'una pàgina XHTML, és necessari incloure el següent codi Javascript:
<source lang="java">
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
</source>

Funcions utilitzades per a la creació del node:
*''createElement(etiqueta)'': Crea un node de tipus '''element''' que representa l'element XHTML.
*''createTextNode(contingut)'': crea un node de tipus '''text''' que emmagatzema el contingut textual (innerHTML).
*''nodepare.appendChild(nodefill)'': afegeix el '''nodefill''' com a fill de '''nodepare'''.

=== Eliminació de nodes XHTML ===
Per eliminar un node és molt senzill, només s'ha d'utilitzar la funció ''removeChild(nodeAeliminar)''.
Exemple:
<source lang="java">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>
</source>
Per eliminar un node d'una pàgina XHTML s'invoca a la funció removeChild() des del valor parentNode del node que es vol eliminar. Quan s'elimina un node, també s'eliminen automàticament tots els nodes fills que tingui, per la qual cosa no és necessari esborrar manualment cada node fill.

=== Esdeveniments dinàmics ===

<source lang="java">
var btn = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
btn.appendChild(contenido);
btn.addEventListener('click', function(){alert("hola mundo");}, false);
document.body.appendChild(btn);
</source>

opció 2

<source lang="java">
var i = 1;
document.getElementById('creator').addEventListener('click',function(){
var div = document.createElement('div');
var text = document.createTextNode('New Div ' + i);
div.appendChild(text);
document.body.appendChild(div);
i++;
});

document.addEventListener('click',function(e){
// Fixed
if(e.target.tagName.toLowerCase() === 'div'){
console.log(e.target);
}
})

<div>
Div actual
</div>
<button id='creator'>Crear</button>
</source>

== Exercicis curs 2022s passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

== Exercicis cursos passats ==

=== Exercici Enllaços DOM ===
Crea un document HTML amb diferents enllaços i paràgrafs i digues:
*Nombre d'enllaços de la pàgina
*Direcció a la qual enllaça el penúltim enllaç
*Nombre d'enllaços del tercer paràgraf
:[[solucio_enllaços]]

=== Exercici llista ===
Utilitzar les funcions DOM per crear nous nodes i afegir-los a una llista ordenada existent.
:[[solucio_llista_dom]]

=== Exercici Mostra Direcció ===
Crea aquesta llista d'enllaços, en passar el ratolí per la llista, mostra la direcció a la qual apunten a l'editor de text (dins un input)
:[[solucio_mostra_direccio]]

=== Exercici Canvi Fons ===
Crea una pàgina amb tres botons que ens permetin seleccionar la imatge de fons del document.

:[[solucio_boto_fons]]

=== Exercici llista afegir Altre ===
Realitzar un script que quan premem en l'opció d'uns dels radiobutton (Html, Css, Altre) en el cas de ser l'opció 'Altre' es mostri l'editor de text (input)
:[[solucio_afegir_altre]]

=== Ejercicio Añadir Diversos Elementos ===
Se dispondrá de 5 botones:

"Crear Párrafo", "Crear Imagen", "Borrar último", "Borrar Primero", "sustituir primer párrafo por vacio"

Para poder Crear un párrafo deberá existir un textArea donde introduciremos un texto que irá añadiéndose cada vez que cliquemos y de color rojo.

El botón crear Imagen nos pedirá un prompt de una url o dirección de una imagen y después su atributo "alt" para darle una descripción.

Borrar último, borrará el último elemento creado.

Borrar primero, borrará el primer elemento creado

El último botón se tratará de sustituir el primer párrafo por otro que tenga como texto "vacio". (replaceChild)

:[[solucio_Anadir_diversos_elementos]]

=== Exercici Web Dinámica ===
a) Crea un HTML amb els següents camps:
Input text1 : Que demani la etiqueta que es vol crear
Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir)
Boto crear: Crea el node del input text1 com a fill de input text2.
:[[solucio_crea_html]]

b)Creació automática:
Crea automàticament una Web via DOM que contingui:
Tants paràgrafs com text trobis a la web http://www.lipsum.com/
Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.
:[[solucio_web_dom]]

=== Exercici Botons Celestials ===
Crea una pàgina web amb dos botons amb el text:
*Text boto 1: 'Angelet'
*Text boto 2: 'Diablet'
El comportament ha de ser el següent:
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
:[[solucio_botons_celestials]]

== Bibliografia ==

https://www.w3schools.com/jsref/dom_obj_document.asp

NF1 - Esdeveniments i Validacio de formularis

2023-02-28T17:10:20Z

Jcomas: /* solució */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2

=== Event document.onload ===
Crea una pàgina on sigui imprescindible assignar les funcions de resposta a events quan es dispara l'event document.onload.

=== Estrella Michelin ===

Un restaurant té 4 tapes principals on cadascuna té un preu 1 €, 2 €, 3 € i 4 € (esquerra a dreta).

Com el local és petit, es disposa de dos cambrers, cadascun d'ells té un botó que l'executarà en el cas de servir una tapa. Quan un cambrer serveixi una tapa haurà:
*1. Primer seleccionar-se amb el botó
*2. Clicar a la tapa o tapes servides.

Cada vegada que el cambrer faci click a una tapa el seu preu s'incrementarà en la recaudació del cambrer.

[[Fitxer:Michelin.png|900px|center]]

:[[solucio michelin]]


= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF1 - Esdeveniments i Validacio de formularis

2023-01-13T16:51:26Z

Jcomas: /* Event document.onload */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2

=== Event document.onload ===
Crea una pàgina on sigui imprescindible assignar les funcions de resposta a events quan es dispara l'event document.onload.

=== Estrella Michelin ===

Un restaurant té 4 tapes principals on cadascuna té un preu 1 €, 2 €, 3 € i 4 € (esquerra a dreta).

Com el local és petit, es disposa de dos cambrers, cadascun d'ells té un botó que l'executarà en el cas de servir una tapa. Quan un cambrer serveixi una tapa haurà:
*1. Primer seleccionar-se amb el botó
*2. Clicar a la tapa o tapes servides.

Cada vegada que el cambrer faci click a una tapa el seu preu s'incrementarà en la recaudació del cambrer.

[[Fitxer:Michelin.png|900px|center]]

:[[solucio michelin]]


= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF1 - Esdeveniments i Validacio de formularis

2023-01-13T16:51:09Z

Jcomas: /* Exercicis */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2

=== Event document.onload ===
Crea una pàgina on sigui imprescindible assignar les funcions de resposta a events quan es dispara l'event document.onload.

=== Estrella Michelin ===

Un restaurant té 4 tapes principals on cadascuna té un preu 1 €, 2 €, 3 € i 4 € (esquerra a dreta).

Com el local és petit, es disposa de dos cambrers, cadascun d'ells té un botó que l'executarà en el cas de servir una tapa. Quan un cambrer serveixi una tapa haurà:
*1. Primer seleccionar-se amb el botó
*2. Clicar a la tapa o tapes servides.

Cada vegada que el cambrer faci click a una tapa el seu preu s'incrementarà en la recaudació del cambrer.

[[Fitxer:Michelin.png|900px|center]]

:[[solucio michelin]]


= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF1 - Esdeveniments i Validacio de formularis

2023-01-13T16:46:46Z

Jcomas: /* Exercicis */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2

=== Estrella Michelin ===

Un restaurant té 4 tapes principals on cadascuna té un preu 1 €, 2 €, 3 € i 4 € (esquerra a dreta).

Com el local és petit, es disposa de dos cambrers, cadascun d'ells té un botó que l'executarà en el cas de servir una tapa. Quan un cambrer serveixi una tapa haurà:
*1. Primer seleccionar-se amb el botó
*2. Clicar a la tapa o tapes servides.

Cada vegada que el cambrer faci click a una tapa el seu preu s'incrementarà en la recaudació del cambrer.

[[Fitxer:Michelin.png|900px|center]]

:[[solucio michelin]]


= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF1 - Esdeveniments i Validacio de formularis

2023-01-13T16:45:55Z

Jcomas: /* Exercicis */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.

=== Ordre dels events ===
Crea una pàgina amb quatre seccions DIV aniuades i etiquetades amb els noms div1, ... , div4:
<source>
<div id="div1"><div id="div2"><div id="div3"><div id="div4">contingut random...</div></div></div></div>
</source>
Crea funcions de resposta a l'event CLICK per a cada element DIV que escrigui un missatge de l'estil "Has clickat sobre l'element div1".
Com aconseguiries que l'ordre en què es disparen els elements siguin els següents?:
*div1,div2,div3,div4
*div4,div3,div2,div1
*div1,div3,div4,div2



= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>

NF1 - Esdeveniments i Validacio de formularis

2023-01-13T16:34:03Z

Jcomas: /* event MOUSEOVER */

= Esdeveniments =
Fins ara, totes les aplicacions i scripts que s'han creat tenen alguna cosa en comú: s'executen des de la primera instrucció fins a l'última de forma seqüencial. Gràcies a les estructures de control de flux (if, for, while) és possible modificar lleugerament aquest comportament i repetir alguns trossos del script i saltar-se altres trossos en funció d'algunes condicions.

Aquest tipus d'aplicacions són poc útils, ja que no interactuen amb els usuaris i no poden respondre als diferents esdeveniments que es produeixen durant l'execució d'una aplicació. Afortunadament, les aplicacions web creades amb el llenguatge Javascript poden utilitzar el model de programació basada en esdeveniments.

En aquest tipus de programació, els scripts es dediquen a esperar al fet que l'usuari "faci alguna cosa" (que premi una tecla, que mogui el ratolí, que tanqui la finestra del navegador). A continuació, el script respon a l'acció de l'usuari normalment processant aquesta informació i generant un resultat.

Els esdeveniments fan possible que els usuaris transmetin informació als programes. Javascript defineix nombrosos esdeveniments que permeten una interacció completa entre l'usuari i les pàgines/aplicacions web. La pulsació d'una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d'un formulari, redimensionar la finestra del navegador, etc.

Javascript permet assignar una funció a cadascun dels esdeveniments. D'aquesta forma, quan es produeix qualsevol esdeveniment, Javascript executa la seva funció associada. Aquest tipus de funcions es denominen "event handlers" en anglès i solen traduir-se per "manegadors d'esdeveniments".

== Model bàsic d'esdeveniments ==
=== Tipus d'esdeveniments ===
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per exemple, clicar el botó esquerre del ratolí) pot estar definit per a diversos elements XHTML diferents i un mateix element XHTML pot tenir associats varis esdeveniments diferents.

El nom de cada esdeveniment es construeix mitjançant el prefix ''on'', seguit del nom en anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el ratolí es denomina ''onclick'' i l'esdeveniment associat a l'acció de moure el ratolí es denomina ''onmousemove''.

La següent taula resumeix els esdeveniments més importants definits per Javascript:

<table>

<tr>
<th>Event</th>
<th>Descripció</th>
<th>Elements per els que está definit</th>
</tr>

<tr>
<td><code>onblur</code></td>
<td>Deseleccionar l'element (el contrari de onfocus)</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onchange</code></td>
<td>Succeeix quan el valor del element ha canviat</td>
<td><code><input></code>, <code><select></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onclick</code></td>
<td>clicar i deixar anar el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>ondblclick</code></td>
<td>clicar dos vegades seguides amb el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onfocus</code></td>
<td>Seleccionar un element</td>
<td><code><button></code>, <code><input></code>, <code><label></code>, <code><select></code>, <code><textarea></code>, <code><body></code></td>
</tr>
<tr>
<td><code>onkeydown</code></td>
<td>Prémer una tecla (sense deixar-la anar)</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeypress</code></td>
<td>Prémer una tecla</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onkeyup</code></td>
<td>Deixar anar una tecla premuda</td>
<td>Elements de formulari i <code><body></code></td>
</tr>
<tr>
<td><code>onload</code></td>
<td>La pàgina s'ha carregat completament</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onmousedown</code></td>
<td>Prémer (sense deixar anar) un botn del ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmousemove</code></td>
<td>Moure el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseout</code></td>
<td>El ratolí <em>"surt"</em> de l'element (passa sobre un altre element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseover</code></td>
<td>El ratoli <em>"entra"</em> dintre de l'elemento (passa per sobre de l'element)</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onmouseup</code></td>
<td>Deixar anar el botó que estava premut en el ratolí</td>
<td>Tots els elements</td>
</tr>
<tr>
<td><code>onreset</code></td>
<td>Inicialitzar el formulari (esborrar totes les dades)</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onresize</code></td>
<td>S'ha modificat la mida de la finestra del navegador</td>
<td><code><body></code></td>
</tr>
<tr>
<td><code>onselect</code></td>
<td>Seleccionar un text</td>
<td><code><input></code>, <code><textarea></code></td>
</tr>
<tr>
<td><code>onsubmit</code></td>
<td>Enviar el formulari</td>
<td><code><form></code></td>
</tr>
<tr>
<td><code>onunload</code></td>
<td>S'abandona la pàgina (per exemple al tancar el navegador)</td>
<td><code><body></code></td>
</tr>

</table>

Podeu veure tots el esdeveniments [[http://www.w3schools.com/jsref/dom_obj_event.asp aquí]]

===Gestor d'esdeveniments===

Un esdeveniment de Javascript per si mateix manca d'utilitat. Perquè els esdeveniments resultin útils, s'han d'associar funcions o codi Javascript a cada esdeveniment. D'aquesta forma, quan es produeix un esdeveniment s'executa el codi indicat, per la qual cosa l'aplicació pot respondre davant qualsevol esdeveniment que es produeixi durant la seva execució.

Les funcions o codi Javascript que es defineixen per a cada esdeveniment es denominen "manegador d'esdeveniments" i com Javascript és un llenguatge molt flexible, existeixen diverses formes diferents d'indicar els manegadors:

*Manejadores com a atributs dels elements XHTML.
*Manejadores com a funcions Javascript externes.
*Manejadores "semàntics".

==== Gestor d'esdeveniments com a atributs XHTML ====

Es tracta del mètode més senzill i alhora menys professional d'indicar el codi Javascript que s'ha d'executar quan es produeixi un esdeveniment. En aquest cas, el codi s'inclou en un atribut del propi element XHTML. En el següent exemple, es vol mostrar un missatge quan l'usuari cliqui amb el ratolí sobre un botó:

<source lang="java">
<input type="button" value="clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

En aquest mètode, es defineixen atributs XHTML amb el mateix nom que els esdeveniments que es volen manejar. L'exemple anterior només vol controlar l'esdeveniment de clicar amb el ratolí, el nom del qual és onclick. Així, l'element XHTML pel qual es vol definir aquest esdeveniment, ha d'incloure un atribut anomenat onclick.

El contingut de l'atribut és una cadena de text que conté totes les instruccions Javascript que s'executen quan es produeix l'esdeveniment. En aquest cas, el codi Javascript és molt senzill (alert('Gràcies per clicar');), ja que solament es tracta de mostrar un missatge.

En aquest altre exemple, quan l'usuari punxa sobre l'element <div> es mostra un missatge i quan l'usuari passa el ratolí per sobre de l'element, es mostra un altre missatge:

<source lang="java">
<div onclick="alert('Has clicat amb el ratolí');" onmouseover="alert('Acabes de passar el ratolí per damunt');">Ratolí</div>

</source>

Pots clicar sobre aquest element o simplement passar el ratolí per damunt.
Aquest altre exemple inclou una de les instruccions més utilitzades en les aplicacions Javascript més antigues:

<source lang="java">
<body onload="alert("La pàgina s'ha carregat completament ");">
...
</body>
</source>

El missatge anterior es mostra després que la pàgina s'hagi carregat completament, és a dir, després que s'hagi descarregat el seu codi HTML, les seves imatges i qualsevol altre objecte inclòs a la pàgina.

L'esdeveniment onload és un dels més utilitzats ja que, com veurem en el capítol de DOM, les funcions que permeten accedir i manipular els nodes de l'arbre DOM solament estan disponibles quan la pàgina s'ha carregat completament.

==== Gestor d'esdeveniments i variable this ====

En els esdeveniments, es pot utilitzar la variable '''this''' per referir-se a l'element XHTML que ha provocat l'esdeveniment. Aquesta variable és molt útil per a exemples com el següent:

Quan l'usuari passa el ratolí per sobre de el <div>, el color de la vora es mostra de color negre. Quan el ratolí surt de el <div>, es torna a mostrar la vora amb el color gris clar original.

<source lang="java">
Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</source>

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<source lang="java">

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

</source>

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<source lang="java">
<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...
</source>

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut ''id'' de el < div >.

==== Gestor d'esdeveniments com a funcions externes ====

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<source lang="java">
<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />
</source>

Utilitzant funcions externes es pot transformar en:

<source lang="java">
function mostraMissatge() {
alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />
</source>

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable '''this''' i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

<source lang="java">
function ressalta(element) {
switch(element.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
element.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
element.style.borderColor = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...
</source>
En l'exemple anterior, la funció externa és cridada amb el paràmetre ''this'', que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat *
''borderColor''.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor ''black'', Internet Explorer ho emmagatzema com ''black black black black'' i Opera emmagatzema la seva representació hexadecimal ''#000000''.

====Gestor d'esdeveniments semàntics====
Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:
<source lang="java">
<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

</source>
Es pot transformar en:

<source lang="java">
// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />
</source>

La tècnica dels manegadores semàntics consisteix en:

*Assignar un identificador únic a l'element XHTML mitjançant l'atribut ''id''.
*Crear una funció de Javascript encarregada de manejar l'esdeveniment.
*Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
*L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:
<source lang="java">
document.getElementById("clica");
</source>
A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és ''onclick'':
<source lang="java">
document.getElementById("clica").onclick = ...
</source>
Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:
<source lang="java">
document.getElementById("clica").onclick = mostraMissatge;
</source>
Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.
<source lang="java">
// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();
</source>
El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable '''this''' per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment '''onload''':

<source lang="java">
window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}
</source>

====Gestor d'esdeveniments amb DOM====

El mètode addEventListener ens permet incloure un gestor d'esdeveniment. La sintaxi de addEventListener és la següent:

<source lang="java">
element_que_escolta.addEventListener('event',funció_a_llançar, booleà);
</source>

''element_que_escolta'' - és qualsevol element present en un document al qual es vol associar l'esdeveniment.

''esdeveniment'' - és el succés ocorregut sobre l'element (clic, load, ...).

''funció_a_llançar'' - és qualsevol funció definida que vulguem que s'executi quan passi l'esdeveniment.

''booleà'' - és un valor que defineix l'ordre del flux d'esdeveniments.

Si es vol escoltar un esdeveniment només una vegada i després eliminar-ho s'ha d'utilitzar el mètode removeEventListener:

<source lang="java">
element_que_escolta.removeEventListener ('esdeveniment',funció_a_llançar, booleà);
</source>

''NOTA 1:'' Explicació del paràmetre booleà del mètode addEventListener amb un exemple.
Suposem que tenim això:

<source lang="java">
<html onclick="processaEvent()">
<head><title>Exemple de fluix events</title></head>
<body onclick="processaEvent()">
<div onclick="processaEvent()">Clica aqui</div>
</body>
</html>
</source>

Quan fem clic al div no només ho estem fent sobre ell, sinó sobre els elements que el contenen en l'arbre del DOM, és a dir, hem fet clic a més sobre l'element html i sobre l'element body. Sí només hi ha una funció assignada a una escolta per al div no hi ha major problema, però si a més hi ha una per al html i una altra per al body, quin és l'ordre en què s'han de llançar les tres funcions?

Per contestar a aquesta pregunta hi ha un model de comportament, el flux d'esdeveniments (anglès). Segons aquest, quan es fa clic sobre un element, l'esdeveniment es propaga en dues fases, una que és la captura -el esdeveniment comença en el nivell superior del document i recorre els elements de pares a fills- i l'altra la bombolla -el ordre invers, ascendint de fills a pares-.

Un cop vist això, podem comprendre el tercer paràmetre de addEventListener, que el que fa és permetre'ns escollir l'ordre de propagació:

'''true''': El flux d'esdeveniments és com el representat, i la fase de captura passa en llançar l'esdeveniment. L'ordre de propagació per l'exemple seria, per tant, l'indicat, ''html-body-div.''

'''false''': Permet saltar la fase de captura, i la propagació seguiria només la bombolla. Així, l'ordre seria ''div-body-html.''

''NOTA 2:'' A internet explorer no funciona en les versions anteriors a la 7 (inclosa).

<source lang="javascript">

<script type="text/javascript">
function alerta(){
alert(this);
}

window.onload = function (){
var elBody = document.getElementsByTagName('body')[0];
var elDiv = document.getElementById('elDiv');
var elButton = document.getElementById('elButton');

elBody.addEventListener('click',alerta,false);
elDiv.addEventListener('click',alerta,false);
elButton.addEventListener('click',alerta,false);
}

//event.stopPropagation(); //evita propagarse el evento en forma de burbuja
</script>

</source>

<source lang="html">

<body id="body">
<div id="elDiv">Clica aqui
<button id="elButton">boton</button>
</div>
</body>

</source>

Exemple d'utilització manejadores d'esdeveniments amb DOM:

<source lang="java">
function muestraMensaje() {
console.log("Has pulsado el ratón");
elDiv.removeEventListener("click", muestraMensaje, false); // borra el evento asociado de tipo click a ese elemento.
}

var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, false);

</source>

----------------------------------------------------

En el caso que no queramos que se aplique el evento de tipo de Submit o Hipervínculo "<a></a>" al ser botón usaremos "e.preventDefault()" y realizará las acciones que tengamos establecidas

<source lang="javascript">

window.addEventListener("load",ejemplo); // window.onload= ejemplo;

function ejemplo(){
function muestraMensaje(e) {
console.log("Has pulsado el ratón");
e.preventDefault(); //evita que se ejecute el submit y recargue la página
}
document.getElementById("boton").addEventListener("click", muestraMensaje, false);
}

</script>

<form action="./index.html" method="post">
<input type="submit" id="boton" name="boton" value="boton">
</form>
</source>

--------------------------------------------------

En el següent exemple, s'afegeixen esdeveniments als elements de tipus ''input=text'' d'un formulari complex:

<source lang="html">
<form id="formulario" action="">
<input type="text" placeholder="hola">
<input type="text" placeholder="holaa">
</form>
</source>
<source lang="java">
<script type="text/javascript">
function resalta() {
console.log("holaa")
}

window.onload = function() {
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");

for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}

</script>
</source>

== Exercicis ==

=== Mostrar / Ocultar text ===
Donada la següent pàgina
<source lang="java">
<script type="text/javascript">
function muestraOculta() {
}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>
</source>
Realitza els següents apartats:
*Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
*Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
*Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
*Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

:[[Exercici 4 Events]]

== Obtenint informació de l'esdeveniment (objecte event)==
Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat ''event''. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:
<source lang="java">
var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}
</source>
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:
<source lang="java">
function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}
</source>
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

=== Informació sobre l'esdeveniment ===
La propietat '''type''' indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:
<source lang="java">
var tipus = esdeveniment.type;
</source>
La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix '''on'''.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:
<source lang="java">
function ressalta(elEvento) {
var esdeveniment = elEvento || window.event;
switch(esdeveniment.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}

window.onload = function() {
document.getElementById("seccion").onmouseover = ressalta;
document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...
</div>
</source>

=== Informació sobre els esdeveniments de teclat ===
De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles ('''onkeyup''', '''onkeypress''' i '''onkeydown'''). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:
*'''onkeydown''',
*'''onkeypress''' i
*'''onkeyup'''.
L'esdeveniment '''onkeydown''' es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment '''onkeypress''' és la pròpia pulsació de la tecla i l'esdeveniment '''onkeyup''' fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment '''onkeypress'''. La informació que proporcionen els esdeveniments '''onkeydown''' i '''onkeyup''' es pot considerar com més tècnica, ja que retornen el ''codi intern'' de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

*Esdeveniment keydown:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
*Esdeveniment keypress:
**Internet Explorer:
***Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
***Propietat charCode: no definit
**Resta de navegadors:
**Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
**Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
*Esdeveniment keyup:
**Mateix comportament en tots els navegadors:
***Propietat keyCode: codi intern de la tecla
***Propietat charCode: no definit
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció ''String.fromCharCode().''
<source lang="java">
<script type="text/javascript">

window.onkeydown = teclado;
window.onkeypress = teclado;
window.onkeyup = teclado;

function teclado(magica) {
var e = magica || window.event; // para salvar las deficiencias de IE=window.event
mostrar(e.type, e.keyCode, e.which, e.charCode, e.key);

}

function mostrar(evento, keyCode, which, charCode, key) {

let cadena = "<b> Evento: </b>" + evento
+ " ==> <b> keyCode: </b>" + keyCode
+ "<b> which: </b>" + which
+ "<b> charCode: </b>"+ charCode
+ "<b> key: </b>"+ key
+ "<b> FromCharCode: </b>"+String.fromCharCode(charCode)+"<br>"

let info = document.getElementById("info"); //display
info.innerHTML += cadena
}

</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

</source>

https://sospedia.net/pinchar-el-teclado-en-javascript/

https://www.w3.org/2002/09/tests/keys-cancel2.html

==== Exercici Teclat ====
Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:
* Caràcter permut (amb key i StringCharCode)
* Tipus event (keydown, keypress, keyup)
* Propietat keycode
* Propietat charcode


=== informació sobre els esdeveniments de ratolí ===
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:
<source lang="java">
function muestraInformacion(elEvento) {
var esdeveniment = elEvento || window.event;
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;
//document.addeventlistener(click,"muestraInformacion",false);

</source>
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats '''screenX''' i '''screenY''':
<source lang="java">
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
</source>
En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:
<source lang="java">
// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
coordenadaX = esdeveniment.pageX;
coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");
</source>
La variable '''ie''' val '''true''' si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val '''false''' en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats '''pageX''' i '''pageY'''. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

[[Fitxer:Client_page_screen.jpg|300px|center]]

=== Gràfics senzills amb canvas ===
Amb els esdeveniments de teclat i ratolí podrem programar jocs senzills. Només ens caldrà saber com situar i moure gràfics per la pantalla. Amb aquesta finalitat ens serà d'ajuda l'ús de l'element '''canvas''' de HTML.

Al següent exemple definim un canvas (llenç) de 800x600 píxels i hi situem la imatge d'un cotxe a la coordenada (400,300).
<source lang="HTML">
<canvas id="myCanvas" width="800" height="600" style="background-color: lightskyblue;"></canvas>

<img id="cotxe" src="cotxe.jpg" style="display: none;" >

<script type="text/javascript">

var canvas;
var ctx;
var imatge;

window.onload = function() {
canvas= document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imatge=document.getElementById("cotxe");

ctx.drawImage(imatge,400,300);
}
</script>

</source>
Si volem simular el moviment de la imatge haurem l'haurem d'esborrar de la posició antiga i tornar-la a dibuixar a la nova posició. Per borrar la imatge podem dibuixar un rectangle del color de fons del canvas sobre la imatge amb les instruccions:

<source lang="javascript">
ctx.fillStyle = "lightskyblue"
ctx.fillRect(0,300,100,66);
</source>

A l'exemple dibuixem al canvas un triangle de color lightskyblue a la coordenada (0,300) i de dimensions 100x66.

== Exercicis ==

=== Coordenades del punter ===
Crea una pàgina on es mostri constantment les coordenades del punter dins de la pàgina (propietats clientX, clientY).

=== event MOUSEOVER ===
Crea una pàgina de contingut lliure que tingui els següents elements:
*Títol (capçalera H1)
*Tres paràgrafs que continguin una imatge alineada a la dreta o a l'esquerra del text. La longitud del text de cada paràgraf serà prou extensa per a superar l'alçada de la imatge respectiva.
*Tres títols (capçalera H2) que precediran cadascun dels paràgrafs.
Programa les respostes als events MOUSEOVER de cada element de forma que:
*tots els elements de text (quatre capçaleres i tres paràgrafs) canviin de format quan tenen el punter del ratolí al damunt. Cada element de text tornarà al seu format original quan el punter ja no sigui al damunt
*les imatges giraran en sentit horari quan tinguin el punter al damunt i deixaran de fer-ho quan el punter ja no sigui al damunt.



= Expressions Regulars =
Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles.
Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

== Creació d'expresions regulars ==
A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:
*mitjançant un literal
*creant una instància d'un objecte de tipus '''RegExp'''

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":
<source type=java>
var pattern = /test/;
</source >
Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:
<source type=java>
var pattern = new RegExp("test");
</source >

== Modificadors ha utilitzar a l'hora de crear expressions regulars ==
A més a més de la propia expressió regular, podem introduïr els següents modificadors:
*''i'': Fa que no distingeixi de majúscules i minúscules. ex: /test/i
*''g'': Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
*''m'': Realitza una comparació multilínia (més detalls a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline )
Exemple d'ús:
<source type=java>
var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));
</source>

== Termes i Operadors ==

*''Coincidència exacta'': Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula '''test'' ha d'aparèixer exactament.
*''Combinacions de caràcters'': Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
*''Combinacions de caràcters excloents'': Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ''^'' seguit dels caràcters que no volem en la expresió. Ex: [^abc].
*''Rang de valors'': També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre '''a''' i '''m''' minmúscula --> [a-m] (ambdós incloses).

=== Caràcters especials ===
Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: '''[''', ''']''', '''-''' i '''^'''.
Però encara hi ha uns quants més com serien el '''$''', '''{''', '''}''', '''?''', ''',''', '''+''' i el '''.'''
Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los.
Però com? Utilitzant un caràcter especial: ''\''. Ex: La expressió regular '''/\[/''' significa el caràcter '''[''' i no l'inici d'un grup de caràcters.
Així mateix, per poder utilitzar el caràcter '''\''' dintre de la expressió regular l'haurem d'escapar. Ex: '''\\''' correspon al literal '''\'''.

=== Principis i finals ===
A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.
*Principi: Utilitzarem el caràcter ''^''. Ex: /^test/ : només coincideix si la cadena '''test''' coincideix amb el principi.
*Final: Utilitzarem el caràcter ''$''. Ex: /test$/ : només coincideix si la cadena '''test''' coincideix amb el final.
*Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

=== Repetició de caràcters ===

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb ''/aaa/'' però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter?
Tenim diferents opcions:
*Podem especificar que un caràcter és opcional, es a dir, <b>pot aparèixer alguna vegada o cap (0 ó 1)</b>, Es fa afegint el caràcter '''''?''''' al final. Exemple: /t?est/. Aquest patró combina dues opcions: '''test i est'''.
*Si volem que un caràcter '''apareixi moltes vegades (1 o més)''' utilitzarem '''''+'''''. Ex: /t+est/. Aquest patró combina '''test''', '''ttest''' i '''tttest''' però no '''est'''.
*Si volem que un '''caràcter apareixi zero o més vegades (0 o més)''' utilitzem el caràcter '''*'''. Ex: /t*est/. Aquest patró combina '''test''', '''ttest''', '''tttest''' i també '''est'''.
*Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors '''''{}'''''Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
*També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
*Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la '''coma''' després del 4.

=== Caràcters predefinits ===
La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència.
Taula:

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="100 px" style="background:Lavender; color:Black"|Terme Predefinit
! align="left" width="450 px" style="background:Lavender; color:Black"|Equivalència
|-
| \t ||Tabulació horitzontal
|-
| \b ||Retrocés
|-
| \v ||Tabulació Vertical
|-
| \f||Salt de página
|-
| \r||Retorn de carro.
|-
| \n||Nova linia
|-
| \cA : \cZ||Caràcters de control
|-
| \x0000 : \xFFFF||Unicode Hexadecimal
|-
| \x00 : \xFF||ASCII Hexadecimal
|-
| .||Qualsevol caràcter, excepte nova linia
|-
| \d||Qualsevol dígit decimal. Equivalent a [0-9]
|-
| \D||Qualsevol caràcter menys un dígit decimal. Equivalent a [^0-9]
|-
| \w||Qualsevol caràcter alfanuméric incloent el subratllat. [A-Za-z0-9_]
|-
| \W||Qualsevol caràcter menys els alfanumèric i el subratllat. [^A-Za-z0-9_]
|-
| \s||Qualsevol espai en blanc (espai, tabulador, salt de pàgina,etc.)
|-
| \S||Qualsevol caràcter menys un espai en blanc.
|}

Per veure el llistat complert fes click [http://www.visibone.com/regular-expressions/ aquí].

=== Agrupació de caràcters ===
De moment, hem observat que els operadors + i * només afecten al terme que els '''precedeix'''. Si volem aplicar-los a un grup de termes, podem utilitzar ''parèntesis'', igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena '''ab'''.

=== Alternància de caràcters ===
La alternància pot expressar-se utilitzant el caràcter '''|'''. Per exemple: /a|b/ combina el caràcter '''a''' o '''b''', i /(ab)+|(cd)+/ combina només una o més repeticions de '''ab''' o '''cd'''.

== Mètodes de les Expressions Regulars ==
*''pattern.test(cadena)'' : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
*''pattern.exec(cadena)'' : Executa la expressió regular i retorna la primera coincidència.
== Resum Expressions Regulars ==

[[Fitxer:Expresiones.jpg]]
[http://rua.ua.es/dspace/bitstream/10045/13363/6/07c-JavaScriptExpReg.pdf Resum Expressions Regulars]

== Exercicis ==

[http://www.regexr.com/ Comprovar expressions regulars]

[https://regex101.com/ Comprovar expressions regulars II]

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

*Codi postal. Ex: 46700
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
*Numero de telèfon internacional. Ex: (+34)952356817
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
*Numero IP d'un ordinador de la versió 4.
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
*Data: Ex: DD/MM/AAAA
*Hora: 23:55:55
*Email
*Comprobar un nombre propio
*Targeta de crèdit

*Codi postal. Ex: 46700
**sol: ^\d{5}$
*Numero de telèfon amb prefix i guións, el primer nombre pot ser un 8 ó 9. Ex: 93-123-11-33
**sol: ^[89](\d-\d{3})-\d{2}-\d{2}$
*Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
**sol: ^[89](\d-\d.)\d{3}\.\d{3}$
*Numero de telèfon internacional. Ex: (+34)952356817
**sol: ^$\+\d{2,3}$\d{9}$
*Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
**sol: ^[a-z\d_]{4,15}$
*Nombre Real. Ex: -122.33 ó 7,3 ó 8
**sol: ^[+-]?\d+([,.]\d+)?$
*Numero ISBN de 13 dígits: 978-3-16-148410-0
*Numero de la seguretat social: 01-123456789
**sol: ^\d{2}-\d{9}$
**sol: ^[0-1]{2}-\d{9}$
*Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.
Ex: C\ Mare de Deu de montserrat. 233 - 2
**sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
((C\\)|(Pz\.)|(Av\.))[a-zA-Z ]+\.[0-9 ]+\-[0-9 ]+
*Numero IP d'un ordinador de la versió 4.
** sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$
^(?:\d{1,3}\.){3}\d{1,3}$
*Numero Mac d'un ordinador separats per ':'
*URL (amb http, https, www, etc)
**sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
*Data: Ex: DD/MM/AAAA
**sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
^([3][0-1]|[0-2][0-9])\/[0-1]?[0-2]\/[1-2]\d{3}$ coge hasta el día 31 y el mes 12
*Hora: 23:55:55
**sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
*Email
**sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
**sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
*Comprobar un nombre propio
**sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
*Targeta de crèdit
**sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

= Formularis =
JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:
<source lang="java">
document. forms [0];
</source>
A més de l'array de formularis, el navegador crea automàticament una matriu anomenat ''elements'' per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [0];
</source>
La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:
<source lang="java">
document. forms [0]. elements [document. forms [0]. elements. length - 1];
</source>
Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array ''document.forms''.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut '''name''') o a través del seu atribut '''id''' . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var formularioSecundario = document. otro_formulario;

<Form name = "formulari">
...
</ Form>

<Form name = "otro_formulario">
...
</ Form>
</source>
Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut '''name''':
<source lang="java">
var formularioPrincipal = document. formulari;
var primerElemento = document. formulari. element;

<Form name = "formulari">
<Input type = "text" name = "element" />
</ Form>
</source>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció '''document.getElementById()''' per accedir de forma directa a un formulari i un dels seus elements:
<source lang="java">
var formularioPrincipal = document. getElementById ("formulari");
var primerElemento = document. getElementById ("element");

<Form name = "formulari" id = "formulari">
<Input type = "text" name = "element" id = "element" />
</ Form>
</source>
Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:
*''type'' : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut '''type''' . Per a les llistes desplegables normals (element <select> ) el seu valor és '''select-one''' , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és '''select-multiple'''. Finalment, en els elements de tipus <textarea> , el valor de type és '''textarea''' .
*''form'' : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
*''name'' : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
*''value'' : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

== Validació ==

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<source lang="java">
<form name="formulario" onSubmit="return ValidaCampos()">
Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
<input type="submit" value="Enviar" name="enviar">
</form>

</source>
I l'esquema de la funció validacio() és el següent:
<source lang="java">
function ValidaCampos() {
var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
alert('Campo TELEFONO no válido.');
return false; // sale de la función y NO envía el formulario
}

alert('Gracias por rellenar nuestro formulario correctamente.');
return true; // sale de la función y SÍ envía el formulario
}
</source>

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment '''onsubmit''' de JavaScript. Igual que altres esdeveniments com '''onclick''' i '''onkeypress''' , l'esdeveniment '''onsubmit''' varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment '''onsubmit''' torna el valor '''true''' , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor '''false''' , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor '''false''' . Si no es troba cap error, es torna el valor '''true'''.

Per tant, en primer lloc es defineix l'esdeveniment '''onsubmit''' del formulari com:
<source lang="java">
onsubmit = "return validacio()"
</source>
Com el codi JavaScript retorna el valor resultant de la funció '''validacio()''' , el formulari només s'enviarà al servidor si aquesta funció retorna '''true''' . En el cas que la funció '''validacio()''' retorni '''false''' , el formulari romandrà sense enviar.

Dins de la funció '''validacio()''' es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna '''false''' i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna '''true''' i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció '''alert()''' indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció '''validacio()''' , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

== Validació formularis HTML5==

[http://cybmeta.com/validacion-de-formularios-con-html5/ Validació formularis HTML5 I]

[http://mytutorials85.blogspot.com.es/2012/04/formularios-en-html5.html?email=fdfds%40fds Validació formularis HTML5 II]

[https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation Client-side form validation]

== Exercicis de Validació ==

=== Formulari de validació 1 ===

Crea un formulari que demani 4 camps en un textbox: nom, cognoms, email i telèfon. El formulari tindrà un botó "Enviar" que validarà el contingut dels textbox i en cas de passar les validacions s'obrirà una nova pàgina (que no cal que existeixi) amb els valors introduïts passats amb el mètode GET:
*tots els camps seran obligatoris
*el format serà el típic de cada camp
*mostra els missatges d'error d'un en un, per ordre i posant el focus al camp que produeix cada error
*usa els elements que coneixes de HTML, CSS, etc per a marcar l'error. Sigues creatiu

=== Formulari de validació 2 ===

Al formulari anterior afegeix els camps data de naixement, adreça, codi postal i municipi (per aquest ordre) tenint en compte:
*la data de naixement ha de ser vàlida, en format dd/mm/aaaa i anterior a la data actual.
*l'adreça estarà formada per caràcters alfanumèrics i també admetrà espais,comes i guions.
*el codi postal i municipi tindran el format típic d'aquests camps.

=== solució ===

<source lang="html">

<html>

<style>
.input_ok {background-color: lightcyan}
.input_error {background-color: rgb(255, 255, 119)}
.label_error {color: darkred}
</style>

<body >
<h1>Exercici 1 de Validacions</h1>

<form name="formulari" onSubmit="return valida()" action="ex_validacions.html" method="get">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" class="input_ok">
<label id="er_nom" class="label_error"></label><br>

<label for="cognoms">Cognoms:</label><br>
<input type="text" id="cognoms" name="cognoms" class="input_ok">
<label id="er_cognoms" class="label_error"></label><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" class="input_ok">
<label id="er_email" class="label_error"></label><br>

<label for="telefon">Telefon:</label><br>
<input type="text" id="telefon" name="telefon" class="input_ok">
<label id="er_telefon" class="label_error"></label><br>

<label for="data">Data de naixement:</label><br>
<input type="text" id="data" name="data" class="input_ok">
<label id="er_data" class="label_error"></label><br>

<label for="adreca">Adreça:</label><br>
<input type="text" id="adreca" name="adreca" class="input_ok">
<label id="er_adreca" class="label_error"></label><br>

<label for="cp">Codi postal:</label><br>
<input type="text" id="cp" name="cp" class="input_ok">
<label id="er_cp" class="label_error"></label><br>

<label for="municipi">Municipi:</label><br>
<input type="text" id="municipi" name="municipi" class="input_ok">
<label id="er_municipi" class="label_error"></label><br><br>

<input type="submit" value="Submit">

</form>
</body >
<script type="text/javascript">

function valida(){

var nom=document.getElementById("nom").value;
var cognoms=document.getElementById("cognoms").value;
var email=document.getElementById("email").value;
var telefon=document.getElementById("telefon").value;
var data=document.getElementById("data").value;
var adreca=document.getElementById("adreca").value;
var cp=document.getElementById("cp").value;
var municipi=document.getElementById("municipi").value;
var patt_alfanumeric = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ]+)*$/;
var patt_email = /^\w+@\w+\.\w+$/;
var patt_telefon =/^\d{9}$/;
var patt_data = /^\d{2}\/\d{2}\/\d{4}$/;
var patt_adreca = /^[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+(\s[\wñÑçÇàáèéíòóúÀÁÈÉÍÒÓÚ\,\.\-]+)*$/;
var patt_cp=/^\d{5}$/;

// reset format dels textbox i missatges d'error
document.getElementById("nom").className="input_ok";
document.getElementById("er_nom").innerHTML="";
document.getElementById("cognoms").className="input_ok";
document.getElementById("er_cognoms").innerHTML="";
document.getElementById("email").className="input_ok";
document.getElementById("er_email").innerHTML="";
document.getElementById("telefon").className="input_ok";
document.getElementById("er_telefon").innerHTML="";
document.getElementById("data").className="input_ok";
document.getElementById("er_data").innerHTML="";
document.getElementById("adreca").className="input_ok";
document.getElementById("er_adreca").innerHTML="";
document.getElementById("cp").className="input_ok";
document.getElementById("er_cp").innerHTML="";
document.getElementById("municipi").className="input_ok";
document.getElementById("er_municipi").innerHTML="";

//validació del nom
if(nom=="") {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(nom)) {
document.getElementById("nom").className="input_error";
document.getElementById("nom").focus();
document.getElementById("er_nom").innerHTML=" format incorrecte";
return false;
}

//validació dels cognoms
if(cognoms=="") {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" camp obligatori";
return false;
}

if(!patt_alfanumeric.test(cognoms)) {
document.getElementById("cognoms").className="input_error";
document.getElementById("cognoms").focus();
document.getElementById("er_cognoms").innerHTML=" format incorrecte";
return false;
}

//validació del email
if(email=="") {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" camp obligatori";
return false;
}

if(!patt_email.test(email)) {
document.getElementById("email").className="input_error";
document.getElementById("email").focus();
document.getElementById("er_email").innerHTML=" format incorrecte (ex. usuari@servidor.xx)";
return false;
}

//validació del telefon
if(telefon=="") {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" camp obligatori";
return false;
}

if(!patt_telefon.test(telefon)) {
document.getElementById("telefon").className="input_error";
document.getElementById("telefon").focus();
document.getElementById("er_telefon").innerHTML=" format incorrecte (6 digits)";
return false;
}

//validació de la data
if(data=="") {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" camp obligatori";
return false;
}

if(!patt_data.test(data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" format incorrecte (dd/mm/aaaa)";
return false;
}

var components_data = data.split("/");
var val_data=Date.parse(components_data[2]+"/"+components_data[1]+"/"+components_data[0]);

if(isNaN(val_data)) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" data no vàlida";
return false;
}

var today=new Date();
if(val_data>=today) {
document.getElementById("data").className="input_error";
document.getElementById("data").focus();
document.getElementById("er_data").innerHTML=" la data ha de ser anterior a la data acutal";
return false;
}

//validació de l'adreça
if(adreca=="") {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(adreca)) {
document.getElementById("adreca").className="input_error";
document.getElementById("adreca").focus();
document.getElementById("er_adreca").innerHTML=" format incorrecte";
return false;
}

//validació del codi postal
if(cp=="") {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" camp obligatori";
return false;
}

if(!patt_cp.test(cp)) {
document.getElementById("cp").className="input_error";
document.getElementById("cp").focus();
document.getElementById("er_cp").innerHTML=" format incorrecte (5 digits)";
return false;
}

//validació del municipi
if(municipi=="") {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" camp obligatori";
return false;
}

if(!patt_adreca.test(municipi)) {
document.getElementById("municipi").className="input_error";
document.getElementById("municipi").focus();
document.getElementById("er_municipi").innerHTML=" format incorrecte";
return false;
}

return true;

}
</script>

</html>
</source>



= Bibliografia =
<p>JavaScript RegExp Reference: https://www.w3schools.com/jsref/jsref_obj_regexp.asp</p>
<p>Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html </p>
<p>John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X</p>
<p>[http://librosweb.es/javascript/capitulo_7.html Introducció a Javascript] </p> <p> [https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions Expressions Regulars a Mozilla]</p>