Chiamate AJAX in modalità GET

Effettuare delle chiamate AJAX in modalità GET non è mai stato così semplice grazie all’utilizzo della risorsa XMLHttpRequest.

XMLHttpRequest

Chiamata AJAX mediante la risorsa XMLHttpRequest


I PASSAGGIO: Creazione risorsa XMLHttpRequest

Per prima cosa nel file javascript (.js) che verrà incluso nell’header della web-application inserire la seguente funzione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
* Richiesta XMLHttpRequest per la chiamata AJAX.
*/function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

II PASSAGGIO: Definizione di un handler per invocare la risorsa XMLHttpRequest
Sempre nel javascript è necessario definire un handler il quale intercetterà le nostre chiamate in modalità GET, il suo funzionamento è simile a quello di un controllore che effettua un dispatch delle richieste AJAX, per chi ha un pò di confidenza anche con Java non sarà difficile comprendere il funzionamento.
Pertanto inseriremo le seguenti righe di codice nel file con estensione .js:

1
2
3
4
5
6
7
8
9
/*
* Handler e request generiche.
*/
var requestGenerica = null;
function handlerGenerico() {
    if (requestGenerica.readyState == 4 && requestGenerica.status == 200) {
		requestGenerica.responseText;
    }
}

Come vedete ho chiamato la funzione handlerGenerico, il motivo di ciò ci sarà più chiaro in seguito dove mostrerò un esempio di handler customizzato per modificare dinamicamente il contenuto della pagina HTML.

III PASSAGGIO: Concreto funzionamento della chiamata AJAX in modalità GET
Supponiamo che all’onClick di un bottone si vuole memorizzare in sessione un dato allora avremo che al button è associata una funzione ad esempio:

1
 onclick="selezioneApplicazione('$array_applicazione[id]','$array_applicazione[immagine]');"

dove già vi sono dei parametri reperiti mediante una query PHP. A questo punto la funzione JavaScript che effettua la chiamata AJAX nel modo più silenzioso e meccanico possibile sarà:

1
2
3
4
5
6
7
8
9
function selezioneApplicazione(idApplicazione,immagine){
	/* Chiamata AJAX per settare una variabile di sessione. */
	var link = "scegli_configurazione.php?";
	link += "action=" + escape("applicazione");
	link += "&id_applicazione=" + escape(idApplicazione);
	requestGenerica = CreateXmlHttpReq(handlerGenerico);
	requestGenerica.open("GET",link, true);
	requestGenerica.send(null);
}

In questo modo come vedete dal codice nel file scegli_configurazione.php setterò una variabile di sessione nella maniera più silenziosa possibile senza avere dei refresh della pagina ne visualizzazioni di altri file html, così come le buone norme del Web 2.0 impongono.

dove già vi sono dei parametri reperiti mediante una query PHP. A questo punto la funzione JavaScript che effettua la chiamata AJAX nel modo più silenzioso e meccanico possibile sarà:
file scegli_configurazione.php

1
2
3
4
5
6
7
8
9
10
11
12
13
.....
switch ($action) {
 
....
	// Operazioni modulo applicazione etichette.
	case 'applicazione' :
 
		$opzione_applicazione=addslashes($_REQUEST['id_applicazione']);
		$my_session->my_session_register('opzioni_applicazione_etichette', $opzione_applicazione_etichette);
 
	break;
.....
}

In precedenza parlavo anche di una possibile customizzazione a seconda delle esigenze di visualizzazione della pagina sul quale viene effettuata la chiamata in modalità GET.
Per fare ciò occorre definire un handler leggermente diverso dove si indica il “div”,”span”,… dove si vuol dinamicamente aggiungere codice html.

1
2
3
4
5
6
7
8
var requestCustom = null;
function handlerCustom() {
    if (requestCustom.readyState == 4 && requestCustom.status == 200) {
        e = document.getElementById("esempioDIV");
        e.innerHTML = requestCustom.responseText;
    }
}
}

Mentre la funzione che si occupa della chiamata AJAX è sempre della stessa forma, diverso può essere lo script php incluso, ossia scegli_configurazione.php (per interderci), in questo caso questo file può contenere codice html (e non solo codice php), ciò ci consente di aggiungere questo file .php al DOM in modo tale da avere una pagina i cui contenuti si aggiornano dinamicamente mediante le chiamate AJAX.

Chiamate AJAX in modalità GET ultima modidfica: 2014-01-20T15:02:47+01:00 da admin
Posted in: PHP

By on 20 Gennaio 2014

Tagged: , ,