Come creare una richiesta AJAX con jQuery per la programmazione HTML5 e CSS3 - manichini

Lo scopo principale di una libreria AJAX come jQuery è di semplificare le richieste AJAX per i programmatori HTML5 e CSS3. È difficile credere a quanto possa essere facile con jQuery.

Come includere un file di testo con AJAX

Dai un'occhiata a questo codice:

ajax. html $ (documento). ready (getAJAX); function getAJAX () {$ ("# output"). load ("ciao. txt");}

L'HTML è molto pulito. Crea semplicemente un div vuoto chiamato output.

Questo esempio usa AJAX, quindi se non funziona, potrebbe essere necessario ricordare alcuni dettagli su come funziona AJAX. Un programma che utilizza AJAX dovrebbe essere eseguito attraverso un server web, non solo da un file locale. Inoltre, il file letto deve trovarsi sullo stesso server del programma che effettua la richiesta AJAX.

Il meccanismo load () qui descritto è adatto per una situazione di base in cui si desidera caricare un frammento di codice HTML o di testo normale nelle proprie pagine.

Costruire un CMS di un uomo povero con AJAX

AJAX e jQuery possono essere un modo molto utile per creare siti Web efficienti, anche senza la programmazione lato server. Spesso un sito web si basa su una serie di elementi più piccoli che possono essere scambiati e riutilizzati. È possibile utilizzare AJAX per creare un framework che consenta un facile riutilizzo e modifica dei contenuti web.

Sebbene non vi sia nulla di così sconvolgente per la pagina dal punto di vista dell'utente, uno sguardo al codice può mostrare alcune sorprese:

CMS utilizzando AJAX $ (init); function init () {$ ("# heading"). caricare ("head. html"); $ ("# Menu"). caricare ("menu. html"); $ ("# Content1"). caricare ("story1. html"); $ ("# Content2"). caricare ("story2. html"); $ ("# Piè di pagina"). load ("footer. html");}; 
Controlla il codice e puoi visualizzare queste interessanti funzionalità:


La pagina non ha contenuto! Tutti i div sono vuoti. Nessuno del testo mostrato nella schermata è presente in questo documento, ma tutto viene estratto dinamicamente da file più piccoli.


La pagina è composta da div vuote con nome. Piuttosto che qualsiasi contenuto particolare, la pagina è composta da segnaposto con ID.


Usa jQuery. La libreria jQuery viene utilizzata per semplificare enormemente il caricamento dei dati tramite le chiamate AJAX.


Tutti i contenuti sono in file separati. Controlla la directory e puoi vedere file HTML molto semplici che contengono piccole parti della pagina. Ad esempio, story1. html ha il seguente aspetto:
Libro I - Creazione di HTML Foundation

Sound HTML Foundations
È tutto a convalida
Scelta degli strumenti
Gestione delle informazioni con elenchi e tabelle
Creazione di collegamenti con collegamenti
Aggiunta di immagini
Creazione di moduli




Il metodo init () viene eseguito sul documento .pronto . Quando il documento è pronto, la pagina esegue il metodo init ().


Il metodo init () utilizza le chiamate AJAX per caricare in modo dinamico il contenuto. Non è altro che una serie di metodi jQuery load ().


Questo approccio può sembrare molto impegnativo, ma presenta alcune caratteristiche molto interessanti:


Se stai costruendo un sito grande con più pagine, di solito vuoi progettare l'aspetto visivo una volta e riutilizzare lo stesso modello ripetutamente.


Inoltre, probabilmente avrai alcuni elementi che saranno coerenti su più pagine. Potresti semplicemente creare un documento predefinito e copiarlo e incollarlo per ogni pagina, ma questo approccio diventa disordinato. Cosa succede se hai creato 100 pagine in base a un modello e poi hai bisogno di cambiare l'intestazione? È necessario apportare la modifica su 100 pagine diverse.


Il vantaggio dell'approccio stile modello è il riutilizzo del codice. Proprio come l'uso di uno stile esterno consente di moltiplicare un foglio di stile su centinaia di documenti, la progettazione di un modello senza contenuto consente di memorizzare frammenti di codice in file più piccoli e riutilizzarli. Tutte le 100 pagine puntano allo stesso file di menu, quindi se vuoi cambiare il menu, cambia un file e tutto cambia con esso.
Ecco come usi questo tipo di approccio:


Crea un singolo modello per l'intero sito.
Crea HTML e CSS di base per gestire l'aspetto generale del tuo sito. Non preoccuparti ancora del contenuto. Basta creare segnaposto per tutti i componenti della tua pagina. Assicurati di assegnare ad ogni elemento un ID e scrivi il CSS per ottenere le posizioni che desideri.


Aggiungi supporto jQuery.
Crea un collegamento alla libreria jQuery e crea un metodo init () predefinito. Inserisci il codice per gestire la compilazione di quelle parti della pagina che saranno sempre coerenti.


Duplica il modello.
Dopo aver compreso come funzionerà il modello, creane una copia per ogni pagina del tuo sito.


Personalizza ogni pagina cambiando la funzione init () .
L'unica parte del modello che cambia è la funzione init (). Tutte le tue pagine saranno identiche, tranne che hanno funzioni init () personalizzate che caricano contenuti diversi.


Carica contenuto personalizzato in div con AJAX.
Usa la funzione init () per caricare il contenuto in ogni div.


Questo è un ottimo modo per gestire i contenuti, ma non è un vero e proprio sistema di gestione dei contenuti. Anche AJAX non ti può permettere di memorizzare contenuti sul web. Sistemi di gestione dei contenuti più complessi utilizzano anche i database anziché i file per gestire i contenuti. Avrai bisogno di una sorta di programmazione lato server (come PHP) e di solito un database (come mySQL) per gestire questo tipo di lavoro.