Questo piccolo esempio si riferisce ovviamente ad AJAX, la tecnologia che consente di aggiornare il contenuto delle pagine Web senza doverle ricaricare, che ha preso piede tanto da essere la tecnologia base dei social network!
\nNello scrivere partir\u00f2 dal presupposto che chi legge abbia gi\u00e0 un’idea di come funzioni AJAX e di cosa sia JQuery.
\nSe cos\u00ec non \u00e8, probabilmente l’argomento risulter\u00e0 un po’ difficile da comprendere, ma anche il principiante si render\u00e0 conto dei vantaggi. In ogni caso, anch’io uso JQuery da poco, quindi questo articolo \u00e8 frutto del mio percorso di apprendimento \ud83d\ude42<\/p>\n
Ecco qualche guida per iniziare: Per introdurre il problema, pensiamo al normale uso di AJAX. Quando vogliamo aggiornare una pagina dobbiamo obbligatoriamente chiedere dei dati al server e possiamo farlo normalmente in due modi: testo<\/strong> puro o XML<\/strong>. Nel primo caso potremmo pensare anche di trasferire uno spezzone di pagina HTML che ci serve e “incollarlo” dove ci serve, come suggerisce anche questa pagina del w3c<\/a>. Si pu\u00f2 discutere per ore su quanto “pulito” sia questo metodo, in relazione alla separazione fra veste grafica e dati, ma il metodo in effetti si usa. Per quanto riguarda l’XML, la sua utilit\u00e0 e versatilit\u00e0 non si discutono nemmeno. Potremmo vedere questo esempio<\/a>, ma \u00e8 bene sapere che non \u00e8 il solo caso d’uso. Moltissimi Web Service, per esempio, trasferiscono i dati in XML e con AJAX potremmo leggere i dati provenienti da uno di essi. Naturalmente, se abbiamo un classico database, prima di inviare i dati alla pagina dovremmo convertirli in XML.<\/p>\n Questi metodi, usati per grandi quantit\u00e0 di dati, hanno i loro vantaggi, ma anche degli inconvenienti: per entrambi lo spreco di banda e per il testo puro, quasi tutto il carico del lavoro sul server. Un ottimo compromesso \u00e8 quello dell’utilizzo di JSON<\/strong>. Ed ecco finalmente l’esempio vero e proprio. Poi ho creato la pagina php che avr\u00e0 il compito di leggere il database e codificare i dati in JSON:<\/p>\n Ed infine la pagina che visualizzer\u00e0 i dati:<\/p>\n
\nhttp:\/\/javascript.html.it\/guide\/leggi\/95\/guida-ajax\/<\/a>
\nhttp:\/\/javascript.html.it\/guide\/leggi\/168\/guida-jquery\/<\/a><\/p>\n
\nIl primo \u00e8 dovuto al fatto che utilizziamo linguaggi di markup, quindi fra client e server dovr\u00e0 per forza esserci il trasferimento di tutti i tag XML o HTML che alla lunga appesantiscono. Il secondo \u00e8 dovuto al fatto che il server prepara gi\u00e0 l’HTML e lo spedisce al client che si occupa solo di incollarlo al posto giusto, mentre potrebbe ricevere i dati e occuparsi di impostarli come serve.<\/p>\n
\nJSON \u00e8 un formato alternativo a XML, basato su JavaScript. Guardate questo esempio<\/a> per avere un assaggio della sua sintassi.
\nIl suo vantaggio principale \u00e8 la sua leggerezza: al posto dei tag si devono trasferire solo alcuni simboli, il che \u00e8 un vantaggio sull’XML e i dati ricevuti, che si prestano meglio anche a essere contenuti in cache, si possono inserire nella pagina attraverso JavaScript, alleggerendo il carico sul server.
\nGrazie alla funzione json_encode<\/a> di PHP e a JQuery, possiamo usare JSON senza alcuna fatica per il trasferimento dei dati.<\/p>\n
\nHo innanzitutto creato un piccolo database con alcuni dati fittizi:<\/p>\n\r\n-- Database: `test_json`\r\n\r\nCREATE TABLE IF NOT EXISTS `tab` (\r\n `ID` int(11) NOT NULL,\r\n `field` varchar(255) NOT NULL,\r\n `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,\r\n PRIMARY KEY (`ID`)\r\n);\r\n\r\nINSERT INTO `tab` (`ID`, `field`, `date`) VALUES\r\n(1, 'Una frase a caso', '2011-11-18 17:50:00'),\r\n(2, 'Un''altra frase a caso', '2011-11-19 15:28:03');\r\n<\/pre>\n
\r\n\r\n<\/pre>\n
\r\n\r\n\r\n \r\n