Ajax. Introducció - Historial de revisió

Joan: /* Utiltizar funcions de callback per reunificar codi */

2022-01-18T13:57:42Z

Utiltizar funcions de callback per reunificar codi

Joan: /* Referències */

2021-01-28T17:48:47Z

Referències

Joan: /* POST Requests */

2020-01-30T18:11:08Z

POST Requests

Pàgina nova

=Introducció=
'''AJAX = Asynchronous JavaScript and XML'''

AJAX no és un llenguatge de programació, sinó una manera diferent d'utilitzar estàndars existents. AJAX és l'art d'intercanviar dades amb el servidor (el servidor web), i actualitzar parts d'una pàgina web sense haver de carregar de nou tota la pàgina web.

'''Asynchronous JavaScript + XML''', no és una tecnologia en ella mateixa, sinó que és una ''nova'' apoximació per utilitzar de forma conjunta una sèrie de tecnologies que existien prèviament, com ara HTML o XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, i el més important, l'objecte XMLHttpRequest.

Quan aquestes tecnologies es combinen en el model AJAX, les pàgines web poden fer actualitzacions incrementals i ràpides en el navegador sense haver de carregar de nou la pàgina. Això fa que l'aplicació sigui més ràpida a les accions dels usuaris i més usable.

Encara que la '''X''' de ''AJAX'' ve de ''XML'', avui en dia s'utilitza més '''JSON''' en comptes de '''XML''' degut als seus múltiples avantatges com ara tenir un pes inferior i estar integrat dins de Javascript. Tant JSON com XML s'utilitzen per empaquetar informació en el model AJAX.

=Referències=
*http://www.w3schools.com/js/ajax_intro.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
===AJAX Basic===
*http://www.w3schools.com/xml/ajax_intro.asp

=Aclaracions=
==Utiltizar funcions de ''callback'' per reunificar codi==
*https://www.w3schools.com/js/js_ajax_http_response.asp
Si volem fer vàries crides AJAX, no cal construir l'objecte XMLHttpRequest per cada crida. Podem unificar l'estructura de la crida AJAX reunificant el codi i utilitzant funcions de ''callback''.

Una funció de ''callback'' és una funció que la passem com a paràmetre dins d'una altra funció. Anem a veure-ho amb un exemple pràctic.

''index.html'':
<pre>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Abril Fatface' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Aladin' rel='stylesheet'>

<title>AJAX amb funcions de callback</title>
<script>
function loadTXT(obra,cFunction) {
console.log(cFunction);
alert(cFunction);

var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", obra+'.txt', true);
xhttp.send();
}

function quijote(xhttp) {
document.getElementById("literatura").style.backgroundColor = "#bbbbbb"
document.getElementById("literatura").style.fontFamily = "ABeeZee";
document.getElementById("literatura").innerHTML = "<h3>Quijote de la Mancha</h3>" + xhttp.responseText;
}

function tirant(xhttp) {
document.getElementById("literatura").style.backgroundColor = "#cccccc"
document.getElementById("literatura").style.fontFamily = "Abril Fatface";
document.getElementById("literatura").innerHTML = "<h3>Tirant lo Blanc</h3>" + xhttp.responseText;
}

function roldan(xhttp) {
document.getElementById("literatura").style.backgroundColor = "#dddddd"
document.getElementById("literatura").style.fontFamily = "Aclonica";
document.getElementById("literatura").innerHTML = "<h3>Chanson de Roldan</h3>" + xhttp.responseText;
}

function hamlet(xhttp) {
document.getElementById("literatura").style.backgroundColor = "#eeeeee"
document.getElementById("literatura").style.fontFamily = "Aladin";
document.getElementById("literatura").innerHTML = "<h3>Hamlet (Shakespeare)</h3>" + xhttp.responseText;
}

</script>
</head>
<body>
<h1>Obres més importants de la literatura universal:</h1>
<div id="formulari">
<button value="quijote" onclick="loadTXT(this.value, quijote)">Quijote</button>
<button value="tirant" onclick="loadTXT(this.value, tirant)">Tirant lo Blanc</button>
<button value="roldan" onclick="loadTXT(this.value, roldan)">Chanson de Roldan</button>
<button value="hamlet" onclick="loadTXT(this.value, hamlet)">Hamlet</button>
</div>
<div id="literatura"></div>

</body>
</html>
</pre>
Per fer funcionar el codi necessites 4 fitxers de text: ''quijote.txt'', ''tirant.txt'', ''roldan.txt'' i ''hamlet.txt''

Fixem-nos en la instrucció:
<pre>
onclick="loadTXT(this.value, quijote)"
</pre>
No podem posar:
<pre>
onclick="loadTXT(this.value, this.value)"
</pre>
doncs distingeix entre una cadena de text i un objecte tipus ''funció''.

==GET Request==
'''formulari_get.html''':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function processar(frm) {
console.log(frm.nom.value);
console.log(frm.cognom.value);
console.log(frm.edat.value);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
document.getElementById("info").innerHTML = this.responseText;

};
};

xhttp.open("GET", "processar_formulari_get.php?nom=" + frm.nom.value + "&cognom=" + frm.cognom.value + "&edat=" + frm.edat.value, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();
}
</script>

</head>
<body>

<h1>Formulari bàsic</h1>
<form name="frm">
Nom: <input type="text" name="nom"><br />
Cognom: <input type="text" name="cognom"><br />
Edat: <input type="text" name="edat"><br />
<input onclick="processar(frm)" type="button" value="Submit">
</form>

<p id="info">info</p>

</body>
</html>
</pre>
'''processar_formulari_get.php''':
<pre>
<?php
$nom = $_GET["nom"];
$cognom = $_GET["cognom"];
$edat = $_GET["edat"];

/* Processar la informació:
inserir la informació a una base de dades, per exemple
Retornar al client la informació de com ha anat l'operació
*/
echo "GET - $nom $cognom ($edat anys): Valors inserits a la base de dades";
?>
</pre>
==POST Requests==
En la majoria de les ocasions hem utilitzat GET Request en comptes de POST Request.

GET és més senzill i ràpid que POST, i es pot utilitzar en la majoria dels casos. Tanmateix, hem d'utilitzar el request POST sempre que
*No ens podem permetre que el servidor respongui amb un fitxer ''cached''.
*Quan hem d'enviar una gran quantitat d'informació al servidor (POST no té limitacions de tamany)
*Quan hem d'enviar dades d'usuari (per exemple a través d'un formulari), que poden contenir codificacions diverses.

En el cas de GET, per evitar resultats de cache podem fer la tècnica que s'ha vist a classe:
<pre>
xhttp.open("GET", "demo_get.php?t=" + Math.random(), true);
xhttp.send();
</pre>

Anem a veure el codi mínim que envia les dades d'un formulari al servidor mitjançant una crida AJAX:

'''formulari_post.html''':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function processar(frm) {
console.log(frm.nom.value);
console.log(frm.cognom.value);
console.log(frm.edat.value);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
document.getElementById("info").innerHTML = this.responseText;

};
}

xhttp.open("POST", "processar_formulari_post.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("nom=" + frm.nom.value + "&cognom=" + frm.cognom.value + "&edat=" + frm.edat.value);
}
</script>

</head>
<body>

<h1>Formulari bàsic</h1>
<form name="frm">
Nom: <input type="text" name="nom"><br />
Cognom: <input type="text" name="cognom"><br />
Edat: <input type="text" name="edat"><br />
<input onclick="processar(frm)" type="button" value="Submit">
</form>

<p id="info">info</p>

</body>
</html>
</pre>
'''processar_formulari_post.php''':
<pre>
<?php
$nom = $_POST["nom"];
$cognom = $_POST["cognom"];
$edat = $_POST["edat"];

/* Processar la informació:
inserir la informació a una base de dades, per exemple
Retornar al client la informació de com ha anat l'operació
*/
echo "$nom $cognom ($edat anys): Valors inserits a la base de dades";
?>
</pre>

==Crida AJAX amb funció que unifica GET i POST==
A proposta d'un alumne, anem a veure l'exemple mínim del formulari anterior amb una funció que encapsula i amaga l'objecte ''XMLHttpRequest'', dins del fitxer-llibreria ''AJAX.js'':

script ''AJAX.js'':
<pre>
window.onResponseReady = null;
window.eAJAX = function(){
if(! this.hasOwnProperty('f') ) this.f = onResponseReady;
if(this.readyState == 4 && this.status == 200) this.f();
};

function AJAX(method, filename, myFunction, params) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = myFunction;
xhttp.open(method, filename, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(params);
}

function AJAX_GET( path, params, myFunction ){
if(params.length > 0) path = path+"?"+formatParams(params);
AJAX("GET", path, myFunction);
}

function AJAX_POST( path, params, myFunction ){
var p = '';
if(params.length > 0) p = formatParams(params);
AJAX("POST", path, myFunction, p);
}

function formatParams(params){
var r = "callback=JSONPHandler&";
for (var i = 0; i < params.length; i+=2) {
r+= params[i]+"="+params[i+1];
if(i < params.length -2) r+= "&";
}
return r;

}
</pre>
script ''index.html'':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../AJAX.js"></script>

</head>
<body>

<h1>Formulari bàsic</h1>
<form name="frm">
Nom: <input type="text" name="nom" value="pol"><br />
Cognom: <input type="text" name="cognom" value="surriel"><br />
Edat: <input type="text" name="edat" value="19"><br />
<input onclick="processar(frm)" type="button" value="Submit">
</form>

<p id="info">info</p>

<script>
function processar(frm) {
console.log(frm.nom.value);
console.log(frm.cognom.value);
console.log(frm.edat.value);

onResponseReady = function () {
console.log(this.responseText);
document.getElementById("info").innerHTML = this.responseText;
};
AJAX_POST("processar_formulari.php", ["nom", frm.nom.value, "cognom", frm.cognom.value, "edat", frm.edat.value], eAJAX);
//En get:
//AJAX_GET("processar_formulari.php", ["nom", frm.nom.value, "cognom", frm.cognom.value, "edat", frm.edat.value], eAJAX);

}
</script>

</body>
</html>
</pre>
script ''processar_formulari.php'':
<pre>
<?php
$nom = $_REQUEST["nom"];
$cognom = $_REQUEST["cognom"];
$edat = $_REQUEST["edat"];

/* Processar la informació:
inserir la informació a una base de dades, per exemple
Retornar al client la informació de com ha anat l'operació
*/
echo "$nom $cognom ($edat anys): Valors inserits a la base de dades";
?>
</pre>
crèdits: Pol Surriel.

L'avantatge de fer-ho d'aquesta manera és que unifica la crida AJAX ja sigui amb el mètode GET o POST, i amaga la creació de l'objecte ''XMLHttpRequest''. El desavantatge, com en l'ús de qualsevol llibreria, és que l'usuari es situa en una capa d'aplicació superior, i perd la noció del que està passant per sota. És a dir, el programador pot fer un desenvolupament de l'aplicació més ràpid, a costa de no entretenir-se en entendre el que passa per sota.

{{Autor}}, abril 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

@@ Línia 37: / Línia 37: @@
 <title>AJAX amb funcions de callback</title>
 <script>
-function loadTXT(obra,cFunction) {
+let div;
-   console.log(cFunction);
-   alert(cFunction);
+function init() {
    var xhttp;
@@ Línia 53: / Línia 66: @@
 function quijote(xhttp) {
-   document.getElementById("literatura").style.backgroundColor = "#bbbbbb"
+   div.style.backgroundColor = "#bbbbbb"
-   document.getElementById("literatura").style.fontFamily = "ABeeZee";
+   div.style.fontFamily = "ABeeZee";
-   document.getElementById("literatura").innerHTML = "<h3>Quijote de la Mancha</h3>" + xhttp.responseText;
+   div.innerHTML = "<h3>Quijote de la Mancha</h3>" + xhttp.responseText;
+}
 function tirant(xhttp) {
-   document.getElementById("literatura").style.backgroundColor = "#cccccc"
+   div.style.backgroundColor = "#cccccc"
-   document.getElementById("literatura").style.fontFamily = "Abril Fatface";
+   div.style.fontFamily = "Abril Fatface";
-   document.getElementById("literatura").innerHTML = "<h3>Tirant lo Blanc</h3>" + xhttp.responseText;
+   div.innerHTML = "<h3>Tirant lo Blanc</h3>" + xhttp.responseText;
+}
 function roldan(xhttp) {
-   document.getElementById("literatura").style.backgroundColor = "#dddddd"
+   div.style.backgroundColor = "#dddddd"
-   document.getElementById("literatura").style.fontFamily = "Aclonica";
+   div.style.fontFamily = "Aclonica";
-   document.getElementById("literatura").innerHTML = "<h3>Chanson de Roldan</h3>" + xhttp.responseText;
+   div.innerHTML = "<h3>Chanson de Roldan</h3>" + xhttp.responseText;
+}
 function hamlet(xhttp) {
-   document.getElementById("literatura").style.backgroundColor = "#eeeeee"
+   div.style.backgroundColor = "#eeeeee"
-   document.getElementById("literatura").style.fontFamily = "Aladin";
+   div.style.fontFamily = "Aladin";
-   document.getElementById("literatura").innerHTML = "<h3>Hamlet (Shakespeare)</h3>" + xhttp.responseText;
+   div.innerHTML = "<h3>Hamlet (Shakespeare)</h3>" + xhttp.responseText;
+}
 </script>
 </head>
-<body>
+<body onload=init()>
 <h1>Obres més importants de la literatura universal:</h1>
 <div id="formulari">
-<button value="quijote" onclick="loadTXT(this.value, quijote)">Quijote</button>
-<button value="tirant" onclick="loadTXT(this.value, tirant)">Tirant lo Blanc</button>
+<button value="quijote">Quijote</button>
-<button value="roldan" onclick="loadTXT(this.value, roldan)">Chanson de Roldan</button>
+<button value="tirant">Tirant lo Blanc</button>
-<button value="hamlet" onclick="loadTXT(this.value, hamlet)">Hamlet</button>
+<button value="roldan">Chanson de Roldan</button>
 </div>
 <div id="literatura"></div>
@@ Línia 94: / Línia 108: @@
 Per fer funcionar el codi necessites 4 fitxers de text: ''quijote.txt'', ''tirant.txt'', ''roldan.txt'' i ''hamlet.txt''
-Fixem-nos en la instrucció:
+Utilitzem la funció '''eval()''' per convertir la cadena de text ''quixot'' a la funció ''quixot()''.
 ==GET Request==

@@ Línia 11: / Línia 11: @@
 =Referències=
-*http://www.w3schools.com/js/ajax_intro.asp
+*http://www.w3schools.com/xml/ajax_intro.asp
 *https://developer.mozilla.org/en-US/docs/AJAX
 *https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started