Web Application Engineering

Ajax & JSF

Cristian Lucchesi

Istituto di Informatica e Telematica - CNR

Desktop Application vs Web Application

Ajax

Modello classico

Modello classico interazioni Modello classico interazioni

Modello Ajax

Modello Ajax interazioni Modello Ajax interazioni

Vecchie tecnologie nuovi trucchi

Interazioni AJAX

Interazioni AJAX

XMLHttpRequest object

var httpRequest;

// per IE
if (window.ActiveXObject) {
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
      // per gli altri browser
          httpRequest = new XMLHttpRequest();
}
function callServer() {
  httpRequest.open("GET", url, true);
  ...
}

XMLHttpRequest object(cont)

function callServer() {
  ...
  httpRequest.onreadystatechange = processRequest;
  ...
}
function callServer() {
   ...
   httpRequest.send(null);    
}
  

Gestire la risposta del server

function processRequest() {
  if (httpRequest.readyState == 4) {
    if(httpRequest.status == 200) {
      //process the response
    } 
    else {
        alert("Error loading page\n" + 
	  httpRequest.status + ":" + httpRequest.statusText);
    }
  }
}

Processare la risposta del server

//The method getElementsByTagName, gets the element defined by the given tag
var profileXML = httpRequest.responseXML.getElementsByTagName("Profile")[0];

//The node value will give you actual data
var profileText = profileXML.childNodes[0].nodeValue;

Aggiornare l'HTML della pagina

//Create the Text Node with the data received
var profileBody = document.createTextNode(profileText);
                      
//Get the reference of the DIV in the HTML DOM by passing the ID
var profileSection = document.getElementById("profileSection");
           
//Check if the TextNode already exist
if(profileSection.childNodes[0]) {
    //If yes then replace the existing node with the new one
    profileSection.replaceChild(profileBody, profileSection.childNodes[0]);
} else {
    //If not then append the new Text node
    profileSection.appendChild(profileBody);
}

legare Ajax ad un evento

Ajax Framework

Un framework aiuta il lavoro del programmatore sia per la scrittura del codice lato client (per spedire le richieste e ricevere le risposte) che lato server per processare le richieste e fornire le risposte al browser

Ajax4Jsf

Esempio di aggiunta del supporto AJAX con Ajax4jsf

Ajax4jsf e JSF life-cycle

How Ajax4jsf Fits into the JSF Page Lifecycle

Riferimenti

The end

Grazie
per
l'attenzione