Creazione di un sito dinamico con jQuery, senza caricamenti appunto, usando ajax.

In questa guida spiegherò come creare un semplice sito dinamico utilizzando jQuery.
I 3 passi principali saranno:

Impostazione dello stile del sito con il css style.css
Impostazione delle funzioni javascript con il file src.js
Impostazione dell'index.php

Come primo passo dobbiamo creare un file css per lo stile del sito.
Il codice del css d'esempio è il seguente:


	* { padding: 0; margin: 0; }
	body { font-family: monospace; font-weight: bold;}
	h1 { padding-left: 5px;}
	div#menu,div#content,div#footer { 
		width: 500px; padding: 2px; margin-left: auto; margin-right: auto; border: 4px solid black; 
	}
		div#menu { height:20px; margin-top: 100px;}
	div#content { height:100px; }
	div#footer { height:20px;}

Non c'è molto da spiegare, basta avere una minima conoscenza dei css.
Adesso impostiamo il file src.js con le relative funzioni per caricare dinamicamente le pagine con ajax e jQuery.
Il codice:

	
		function in_array(pagina,arraydipagine){
			for(n in arraydipagine){
				if(arraydipagine[n] === pagina){
					return true;
				}
			}
			return false;
		}

		function ShowPage(pagina,idcontent){
				var pagine = new Array("pagina1.php","pagina2.php");
					if(in_array(pagina,pagine)){
						var page;
						page =  $.ajax({
								 url: pagina,
								 async: false
								}).responseText;
						$("#"+idcontent).html(page);
					} else {
						alert('Non Puoi.');
					}
		}

Spiegazione delle 2 funzioni.
La funzione in_array(pagina,arraydipagine) è una reimplementazione della funzione in_array di PHP.
Riceve come primo parametro una stringa e come secondo un array.
Ritorna true se la stringa passatogli (pagina)è contenuta nell'array(arraydipagine).
Effettua semplicemente un ciclo all'interno dell'array, ed in caso di uguaglianza tra l'elemento n-esimo dell'arraydipagine e pagina ritorna true.
Altrimenti a ciclo terminato,ritorna false.
Questa funzione ci servirà per controllare le pagine passate alla funzione seguente:
ShowPage(pagina,idcontent)
Questa funzione invece riceve come primo parametro la pagina da caricare dinamicamente senza il ricaricamento della pagina,
mentre come secondo parametro l'id del div (idcontent)che conterrà il contenuto della pagina caricata.
Nell'array pagine presente nella funzione ShowPage andranno inserite tutte le pagine che potranno essere caricate dalla funzione,
in questo esempio, pagina1.php && pagina2.php.
Adesso entra in gioco jQuery con il metodo ajax a cui passo come url pagina e setto la richiesta asincrona a false.
Poi tramite il metodo responseText 'prelevo' il testo della pagina di cui ho fatto il GET e lo inserisco nel div tramite il metodo html .
Adesso impostiamo l'index.php con il seguente codice:

	
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
		<head>		
			<meta http-equiv="content-type" content="text/html;charset=UTF-8">
			<meta name="description" content="Sito dinamico con l'uso di jQuery.">
			<link rel="stylesheet" type="text/css" href="style.css">
			<script src="http://code.jQuery.com/jquery-latest.js"></script> 
			<script type="text/javascript" src="src.js"></script>
			<title>Realizzare un sito dinamico con jQuery & Ajax.</title>
		</head>
		<body>
			<h1>Sito dinamico con l'uso di jQuery</h1>
				<div id="menu">
					| <a OnClick="ShowPage('pagina1.php','content');">Pagina1</a> | 
					| <a OnClick="ShowPage('pagina2.php','content');">Pagina2</a> | 
				</div>
				<div id="content">
				</div>
				<div id="footer">
					Esempio prelevato da 
				<a href="http://sorgenti.big-bug.net" title="Download Sorgenti Gratuito">http://sorgenti.big-bug.net</a>
				</div>	
		</body>
	</html>

E come si vede nel div menu c'è il richiamo alla funzione ShowPage(pagina,idcontent) nell'evento OnClick degli a.
Naturalmente nelle pagine .php potrete inserirci ciò che vogliate anche codice PHP ovviamente.
Qua trovate un esempio completo.
Questo è tutto.
Per problemi,chiarimenti,bug commentate. ^^'

Stats

Voti	1
Voto medio	3
Visite	3518
Visite uniche	2953
Num.Download	115
Download	Disponibile.

Spazio Visitatori

Prima di inviare il tuo commento assicurati che: sia in tema con l'articolo e contribuisca alla discussione in corso non abbia contenuti offensivi nei confronti di chicchessia non abbia contenuti che violini le leggi italiane non contenga indirizzi e-mail Nome(Richiesto) : E-mail (richiesta, ma non sarà mostrata ai visitatori) : Sito Internet (opzionale) : Commento (richiesto) :
Vota

Visualizza Commenti. (1)

Commenti

Matteo [01 April 2009 - 11:04:57] Una funzione utilissima e geniale. GRAZIE!!!!!

Articoli,howto,guide di programmazione & Informatica generale.

Ultimi Howto

Creazione di un sito dinamico con jQuery, senza caricamenti appunto, usando ajax.

Navigazione

Link

Cerca