IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

aka Asynchronous JavaScript And XML

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales.

NOTA: En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML. De fet s'utilitza molt com alternativa JSON i fins i tot és fa servir l'acrònim AJAJ [1]

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

Història

Google made a wide deployment of standards-compliant, cross browser Ajax with Gmail (2004) and Google Maps (2005).[8] In October 2004 Kayak.com's public beta release was among the first large-scale e-commerce uses of what their developers at that time called "the xml http thing".[9]

The term "Ajax" was publicly stated on 18 February 2005 by Jesse James Garrett in an article titled "Ajax: A New Approach to Web Applications", based on techniques used on Google pages.[3]

On 5 April 2006, the World Wide Web Consortium (W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official Web standard.[8]

Asíncron

Observeu la gràfica:

http://www.adaptivepath.com/uploads/archive/images/publications/essays/ajax-fig2_small.png?timestamp=1418307970094

On es veu clarament les implicacions de ser asíncron.

IMPORTANT: El que s'ha de tenir clar és que mai una crida ajax aturà l'execució de l'aplicació, per això cal tenir en compte que al continuar l'execució de l'aplicació els resultats de la crida Ajax no es podran utilitzar fins que no acabi la crida

Javascript

Jquery i AJAX

Consulteu Jquery i AJAX

XMLHttpRequest

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script.[1] Development versions of all major browsers support URI schemes beyond http and https, in particular, blob URLs are supported.[2]

Data from the response can be used to alter the current document in the browser window without loading a new web page, and despite the name of the API, this data can be in the form of not only XML,[3] but also JSON,[4] HTML or plain text.[5] The response data can also be evaluated by client-side scripting. For example, if it was formatted as JSON by the web server, it can be converted into a client-side data object for further use.

The Ajax web development technique used by many websites to implement responsive and dynamic web applications depends on XMLHttpRequest.

For security reasons, XMLHttpRequest requests follow the browser's same-origin policy, and will therfore only succeed if they are made to the same domain that served the original web page.

Recursos:

GET example

Exemple síncron:

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if (req.status == 200)
  dump(req.responseText);

Exemple asíncron (cal determinar Listenerts i callbacks)

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null);

POST

Es pot utilitzar l'objecte FormData per formatar els camps d'un formulari:

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456);
formData.append("afile", fileInputElement.files[0]);

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.com/submitform.php");
xhr.send(formData);

O podem recollir la info d'un formulari:

var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));

PUT, DELETE o altres

El funcionament és igual que POST i GET canviant el primer paràmetre de la funció open:

xhr.open("DELETE", "http://foo.com/submitform.php");
xhr.open("PUT", "http://foo.com/submitform.php");

same-origin policy

Vegeu same-origin policy

Eines

Firebug

Vegeu firebug i http://getfirebug.com/network

Angular

Vegeu Angular Ajax

Navegadors i nombre màxim de peticions concurrents

NOTA: Compte que el servidor també pot limitar connexions concurrents per múltiples raons, per exemple utilitzar Xdebug

Browser concurrent connections

Taula amb els valors:

http://www.browserscope.org/?category=network

Les connexions estan limitades per hostname. Es pot augmentar el rendiment separant en diferents dominis assets i codi o inclús les peticions Ajax.

Frameworks

Vue

Vegeu vue-resource

Angular

Vegeu Angular resource i l'objecte http d'angular.

Vegeu també

Enllaços externs