Ajax. Introducció

De Wikijoan
Dreceres ràpides: navegació, cerca

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


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