web design umbria

Restituire i dati come testo con Ajax? Risponde web developer Umbria

web design umbriaIn questo studio verrà descritto in dettaglio da parte di web design Umbria la proprietà responseText dell’ oggetto XMLHTTPRequest e si esaminerà come utilizzarla per dotare l’applicazione di una maggiore funzionalità. Come sanno tutti, compreso web design Umbria, l’oggetto XMLHTTPRequest ha due proprietà sacre con due santuari distinti: responseText e responseXML. La prima presenta l’applicazione chiamante con i dati del server sotto forma di stringa, mentre la seconda fornisce l’XML compatibile con il DOM, che può essere analizzato tramite i metodi JavaScript.Come abbiamo visto con responseXML possiamo eseguire operazioni di programmazione sofisticate, ma il profano non deve credere che una semplice stringa di testo restituita dal server non possa fare dei miracoli. Quindi analizziamo bene questa proprietà responseText che é leggermente fuoriviante, perché parliamo di una stringa di valori che può essere assegnata a una variabile JS attraverso una semplice dichiarazione di assegnazione:

var mytext = http.responseText;

Non esiste una regola che dice che il contenuto di questa variabile debba essere testo leggibile, posso anche inserire lettere senza una logica semantica, sempre che la stringa includa al suo interno dei caratteri legalmente riconosciuti ed accettati da JavaScript, fa notare web design Umbria. Questo dal punto di vista della flessibilità é un ottima condizione! Adesso vediamo come si può utilizzare il testo restituito all’ interno della pagina, magari in una parte contrassegnata da un DIV, rivediamo per l’ennesima volta quello che é uno script base per capire la logica del caricamento parziale asincrono di Ajax.

<html>
<head>
<title>prova Ajax asincrono</title>
</head>
<body>
Qui c’è il contenuto di ritorno del server con la stringa di testo<br>

ovviamente questa é una semplice pagina che così come é produce come risultato il niente, non vi é nulla di dinamico. Ora dobbhiamo generare una istanza dell’ oggetto principe XMLHTTPRequest poi apriremo una richiesta al server in modalità asincrona dopodiché andremo a gestire tutte quelle anomalie tipo cache per fuorviare Ajax dal refresh e gestiremo lo stato di completamento della richiesta con i famosi 4 e 200 che vedremo in dettaglio nel codice, poi dovremmo anche preoccuparci di caricare la funzione all’ interno del body con il gestore di eventi onLoad= nome della funzione. In dettaglio web design Umbria mostra quindi lo script composto da una serie di funzioni specifiche, ognuna delle quali coinvolta nelle dinamiche descritte precedentemnente.

applicazione Ajax

function getXMLHTTPRequest() {
try {
req = new XMLHTTPRequest();
} catch(err1) {
try {
req = new ActiveXObject(“Msxml12.XMLHTTP”);
} catch (err2) {
try {
req = new ActiveObject(“Microsoft.XMLHTTP”);
} catch(err3) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPrequest();
function getServerText() {
var myurl = ‘textserver.php’
myRand = parseInt(Math.random()*999999999);
var modurl = myurl+”?rand=”+myRand;
http.open(“GET”, modurl, true);
http.onreaadystatechange = useHttpResponse;
http.send(null);
}
function useHttpRequest() {
if (http.readyState==4) {
if (http.status==200) {
var mytext = http.responseText;
document.getElementById(‘mypageelement’).innerHTML =mytext;
}
}else {
document.getElementById(‘mypageelement’).innerHTML =””;
}
}

Qui il testo di ritorno dal server:

</body>
</html>

Web Design Umbria sa che la maggior parte di questo codice é assolutamente famigliare ma qui la parte interessante é quella legata alla funzione di callback useHttpRequest() che contiene queste righe:

var mytext = http.responseText;
document.getElementById(‘mypageelement’).innerHTML = mytext;

qui viene assegnato il valore ricevuto inresponseText perché diventasse il contenuto del contenitore <div> scelto. Lato server il codice PHP restituirà un semplice:

<? php
echo “questo é il testo che arriva dal server”;
>

e si otterrà una semplice schermata che parzialmente aggiorna la pagina sfruttanto il potenziale racchiuso nella proprietà responseText. Per questa sessione di allenamento é tutto sentenzia web design Umbria, see you later con Ajax!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...