Ajax. Introducció

De Wikijoan
(Diferència entre revisions)
Dreceres ràpides: navegació, cerca
(Utiltizar funcions de callback per reunificar codi)
(Aclaracions)
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ó''.
 +
==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.html''':
 +
<pre>
 +
 +
</pre>
 +
'''processar_formulari.php''':
 +
<pre>
 +
 +
</pre>
 +
 
{{Autor}}, gener 2013, febrer 2017
 
{{Autor}}, gener 2013, febrer 2017
 
[[Categoria: IES Jaume Balmes]]
 
[[Categoria: IES Jaume Balmes]]
 
[[Categoria: Assignatura DAW-M06-WEC]]
 
[[Categoria: Assignatura DAW-M06-WEC]]

Revisió de 14:27, 3 abr 2018

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

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:


processar_formulari.php:



creat per Joan Quintana Compte, gener 2013, febrer 2017

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