Comment faire une requête AJAX avec jQuery pour HTML5 et CSS3 Programmation - Nuls

L'objectif principal d'une bibliothèque AJAX comme jQuery est de simplifier les requêtes AJAX pour les programmeurs HTML5 et CSS3. Il est difficile de croire à quel point cela peut être facile avec jQuery.

Comment inclure un fichier texte avec AJAX

Vérifiez ce code propre:

ajax. html $ (document). prêt (getAJAX); function getAJAX () {$ ("# sortie"). load ("hello. txt");}

Le HTML est très propre. Il crée simplement une div appelée sortie.

Cet exemple utilise AJAX, donc s'il ne fonctionne pas, vous devrez peut-être vous souvenir de quelques détails sur le fonctionnement d'AJAX. Un programme utilisant AJAX doit être exécuté via un serveur Web, pas seulement à partir d'un fichier local. En outre, le fichier en cours de lecture doit être sur le même serveur que le programme qui effectue la requête AJAX.

Le mécanisme load () décrit ici est adapté à une situation de base où vous souhaitez charger un extrait de code HTML ou texte brut dans vos pages.

Construire le CMS d'un homme pauvre avec AJAX

AJAX et jQuery peuvent être un moyen très utile de construire des sites Web efficaces, même sans programmation côté serveur. Un site Web est souvent basé sur une série d'éléments plus petits qui peuvent être échangés et réutilisés. Vous pouvez utiliser AJAX pour créer un cadre permettant une réutilisation et une modification faciles du contenu Web.

Bien que rien ne choque autant la page du point de vue de l'utilisateur, un coup d'œil au code peut montrer quelques surprises:

CMS utilisant AJAX $ (init); Fonction init () {$ ("# heading"). charger ("head.html"); $ ("# menu"). load ("menu.html"); $ ("# content1"). load ("story1.html"); $ ("# content2"). load ("story2.html"); $ ("# footer"). load ("pied de page.html");}; 
Regardez par-dessus le code, et vous pouvez voir ces caractéristiques intéressantes:


La page n'a pas de contenu! Tous les divs sont vides. Aucun texte affiché dans la capture d'écran n'est présent dans ce document, mais tout est extrait dynamiquement de fichiers plus petits.


La page est composée de divs nommés vides. Plutôt qu'un contenu particulier, la page comprend des espaces réservés avec des ID.


Il utilise jQuery. La bibliothèque jQuery est utilisée pour simplifier considérablement le chargement des données via les appels AJAX.


Tous les contenus sont dans des fichiers séparés. Parcourez le répertoire et vous pouvez voir des fichiers HTML très simples qui contiennent de petites parties de la page. Par exemple, story1. html ressemble à ceci:
Livre I - Création de la fondation HTML

Fondations HTML sonores
Tout sur la validation
Choix de vos outils
Gestion des informations avec listes et tableaux
Établir des liens
Ajout d'images
Création de formulaires




La méthode init () s'exécute sur le document .prêt . Lorsque le document est prêt, la page exécute la méthode init ().


La méthode init () utilise les appels AJAX pour charger dynamiquement le contenu. Ce n'est rien de plus qu'une série de méthodes loadQ de jQuery.


Cette approche peut sembler beaucoup de travail, mais elle a quelques caractéristiques très intéressantes:


Si vous construisez un grand site avec plusieurs pages, vous voulez généralement concevoir l'apparence visuelle une fois et réutiliser le même général modèle à plusieurs reprises.


De plus, vous aurez probablement quelques éléments qui seront cohérents sur plusieurs pages. Vous pouvez simplement créer un document par défaut et le copier et le coller pour chaque page, mais cette approche devient compliquée. Que se passe-t-il si vous avez créé 100 pages en fonction d'un modèle et que vous devez ensuite modifier l'en-tête? Vous devez effectuer le changement sur 100 pages différentes.


L'avantage de l'approche de type template est la réutilisation du code. Tout comme l'utilisation d'un style externe vous permet de multiplier une feuille de style à travers des centaines de documents, la conception d'un modèle sans contenu vous permet de stocker des extraits de code dans des fichiers plus petits et de les réutiliser. Toutes les 100 pages pointent vers le même menu, donc si vous voulez changer le menu, changez un fichier et tout change avec.
Voici comment vous utilisez ce type d'approche:


Créez un modèle unique pour l'ensemble de votre site.
Créez du code HTML et CSS de base pour gérer l'aspect général de l'ensemble de votre site. Ne vous inquiétez pas pour le contenu pour le moment. Construisez simplement des espaces réservés pour tous les composants de votre page. Assurez-vous de donner un ID à chaque élément et écrivez le CSS pour que les choses soient positionnées comme vous le souhaitez.


Ajouter un support jQuery.
Faites un lien vers la bibliothèque jQuery et créez une méthode init () par défaut. Mettez du code pour manipuler les parties de la page qui seront toujours cohérentes.


Dupliquez le modèle.
Une fois que vous avez une idée du fonctionnement du modèle, faites une copie pour chaque page de votre site.


Personnalisez chaque page en modifiant la fonction init () .
La seule partie du modèle qui change est la fonction init (). Toutes vos pages seront identiques, sauf qu'elles ont des fonctions init () personnalisées qui chargent un contenu différent.


Charger du contenu personnalisé dans les divs avec AJAX.
Utilisez la fonction init () pour charger le contenu dans chaque div.


C'est une excellente façon de gérer le contenu, mais ce n'est pas vraiment un système de gestion de contenu à part entière. Même AJAX ne peut pas tout à fait vous permettre de stocker du contenu sur le Web. Les systèmes de gestion de contenu plus complexes utilisent également des bases de données plutôt que des fichiers pour gérer le contenu. Vous aurez besoin d'une sorte de programmation côté serveur (comme PHP) et généralement d'une base de données (comme MySQL) pour gérer ce genre de travail.