Ajax. Introducció

De Wikijoan
(Diferència entre revisions)
Dreceres ràpides: navegació, cerca
(Crida AJAX amb funció que unifica GET i POST)
(POST Requests)
 
Línia 96: Línia 96:
 
</pre>
 
</pre>
 
doncs distingeix entre una cadena de text i un objecte tipus ''funció''.
 
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==
 
==POST Requests==
 
En la majoria de les ocasions hem utilitzat GET Request en comptes de POST Request.
 
En la majoria de les ocasions hem utilitzat GET Request en comptes de POST Request.

Revisió de 15:11, 29 gen 2019

Contingut

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

AJAX Basic

Aclaracions

Utiltizar funcions de callback per reunificar codi

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:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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("quijote").style.backgroundColor = "#bbbbbb"
  document.getElementById("quijote").innerHTML = "<h3>Quijote de la Mancha</h3>" + xhttp.responseText;
}

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

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

function hamlet(xhttp) {
  document.getElementById("hamlet").style.backgroundColor = "#eeeeee"
  document.getElementById("hamlet").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="quijote"></div>
<div id="tirant"></div>
<div id="roldan"></div>
<div id="hamlet"></div>

</body>
</html>

Per fer funcionar el codi necessites 4 fitxers de text: quijote.txt, tirant.txt, roldan.txt i hamlet.txt

Fixem-nos en la instrucció:

onclick="loadTXT(this.value, quijote)"

No podem posar:

onclick="loadTXT(this.value, this.value)"

doncs distingeix entre una cadena de text i un objecte tipus funció.

GET Request

formulari_get.html:

<!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>

processar_formulari_get.php:

<?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";
?>

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

En el cas de GET, per evitar resultats de cache podem fer la tècnica que s'ha vist a classe:

xhttp.open("GET", "demo_get.php?t=" + Math.random(), true);
xhttp.send(); 

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

formulari.html:

<!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.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>

processar_formulari.php:

<?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";
?>

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:

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;

}

script index.html:

<!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>

script processar_formulari.php:

<?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";
?>

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.


creat per Joan Quintana Compte, abril 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines