[ajax] Aggiornamento pagina

[tryhere]

Devo scrivere uno script AJAX che mi permetta di includere in un div della pagina corrente il contenuto presente in un file php...mi date qualche dritta?

[EuroSalute]

un esempio di script ajax , è anche possibile includere variabili di invio, in questo esempio variabili url e title. La variabile file_php è il file.php di invio.

<script type="text/javascript"> 

function chiama_ajax_html(file_php,url,title) {

var res = $.ajax({
   type: "POST",
   url: file_php,	   
   data: "url="+encodeURIComponent(url)+"&title="+encodeURIComponent(title),
	 async: false	  
 }).responseText;
 
 return res;
 
 } 

//x richiamare la funzione ajax:
var risposta=chiama_ajax_html('esempio.php','http://esempio.it','Esempio');



</script>

utilizzerai la variabile risposta per riempire il div....:

<script type="text/javascript"> 

$(document).ready(function(){

$('#id_del_div').html(risposta);

});

</script>

[dreadnaut]

Nota che gli script sopra dipendono da 35KB di libreria jQuery, o simile. Se vuoi farne a meno, esistono librerie più leggere, addirittura puoi farlo con una singola funzione.

[tryhere]

Si, grazie ma cercavo qualcosa di indipendente da altre librerie...una semplice funzione insomma

[dreadnaut]

Guarda questa ad esempio: XMLHttpRequest functions

[tryhere]

Non essendo esperto di Javascript non mi è chiarissimo come si utilizza, mi faresti un esempio? Grazie mille!

[dreadnaut]

C'è scritto nella pagina, dopo il codice.

[tryhere]

Ci sono tre aree di codice...dove includo ciascuna?

[dreadnaut]

Hai letto il testo fra le aree di codice, le istruzioni ?!

[tryhere]

Si, ma non c'è scritto dove inserirle...

[dreadnaut]

Uhm, in un tag <script type="text/javascript"> ... </script>, la dove vuoi che vengano eseguite.

<div id="contenitore"></div>

<script type="text/javascript">
/* la definizione della funzione qua */

/* chiamata della funzione */
sendRequest('pagina.php', handleRequest);

/* quando arriva il risultato... */
function handleRequest(req) {
	var writeroot = document.getElementById('contenitore');
	writeroot.innerHTML = req.responseText;
}
</script>

Se la funzione ti serve in più file, puoi metterla in un file .js a parte ed includerla nell'head delle pagine.

[tryhere]

Allora...ho incluso la definizione della funzione tramite un file .js esterno.
La chiamata della funzione la devo mettere ad esempio sulla proprietà onclick di un elemento html?

[dreadnaut]

Se vuoi che avvenga al click, si.

[tryhere]

ma cosa sono i due parametri della sendRequest?
Il primo è il file da includere? E il secondo?

[karl94]

No, il primo non è il file da includere, è solo l'indirizzo (URL) a cui effettuare la richiesta, la cui risposta verrà data in pasto alla funzione che hai specificato nel secondo parametro, che potrà eventualmente modificare l'albero del documento inserendo la porzione di documento appena ottenuta.

[tryhere]

Mi faresti dunque un esempio di come effettuare la chiamata?

[karl94]

Il codice che ha proposto Dreadnaut è praticamente già pronto, qual'è il problema?

[tryhere]

Il problema è intanto...posso anche lasciare pagina.php ma che contenuto deve avere questo file?

[karl94]

File? Che file? E cosa ci sarebbe in questa pagina.php? Scusa, ma non so come stai strutturando il tutto.

[tryhere]

pagina.php abbiamo detto che è il primo parametro della funzione, cioè l'indirizzo a cui effettuare la richiesta. Dentro a pagina.php però cosa deve esserci?

[karl94]

Il file puoi chiamarlo come vuoi, quello è solo un nome di esempio. Ci devi piazzare ciò che deve venire inserito nella pagina, non deve essere quindi un documento HTML completo, ma una sola porzione. È esattamente come hai scritto tu nel primo messaggio: viene incluso nel div ciò che genera come risposta lo script PHP.

[tryhere]

Ah ma io ho scritto "il primo è il file da includere?" e tu mi hai risposto "no"
Comunque...non devo specificare anche in che punto della pagina includermelo?

[karl94]

La funzione sendRequest non lo include, effettua solo la richiesta, è la funzione specificata nel secondo parametro che si occupa di questo. Di per sé sendRequest non modifica l'albero del documento.
La porzione di documento così ottenuta viene inserita come contenuto dell'elemento avente come id contenitore, sovrascrivendo qualsiasi altra cosa ci fosse in precedenza.

[tryhere]

Ok perfetto quindi devo avere un div nella pagina da cui effettuo la chiamata che abbia come id "contenitore"?

[karl94]

Esattamente.

[tryhere]

Tutto funzionante, grazie a entrambi! :)

----------------

Altro dubbio...se volessi trasformare l'id "contenitore" in un parametro da passare ogni volta che richiamo la funzione come dovrei modificare il codice?

[karl94]

Puoi usare una cosa come:

function load(URL, element){
	sendRequest(URL, handleRequest);
	function handleRequest(req){
		element.innerHTML = req.responseText;
	}
}

oppure

function load(URL, elementId){
	sendRequest(URL, handleRequest);
	function handleRequest(req){
		document.getElementById(elementId).innerHTML = req.responseText;
	}
}

A seconda dell'esigenza. Alla prima devi fornire URL e oggetto rappresentante l'elemento in cui inserire la risposta del server, nella seconda funzione invece il secondo parametro è una stringa rappresentante l'id dell'elemento.

[tryhere]

cioe' definisco una funzione dentro ad un'altra funzione?
Ci sarebbe un alternativa?

[karl94]

Perché? Qual'è il problema?

[tryhere]

Non mi piace l'idea di inserire la definizione di una funzione all'interno della definizione di un'altra funzione...