Hvordan man laver en AJAX-anmodning med jQuery til HTML5 og CSS3-programmering - dummier

Det primære formål med et AJAX bibliotek som jQuery er at forenkle AJAX anmodninger til HTML5 og CSS3 programmører. Det er svært at tro, hvor nemt det kan være med jQuery.

Sådan indgår en tekstfil med AJAX

Tjek denne rene kode:

ajax. html $ (dokument). klar (getAJAX); funktion getAJAX () {$ ("# output"). load ("hej. txt");}

HTML er meget ren. Det skaber simpelthen en tom div kaldet output.

Dette eksempel bruger AJAX, så hvis det ikke virker, skal du muligvis huske nogle detaljer om, hvordan AJAX fungerer. Et program, der bruger AJAX, skal køres via en webserver, ikke kun fra en lokal fil. Desuden skal filen, der læses, være på samme server som programmet gør AJAX-anmodningen.

Den her beskrevne belastning () -mekanisme er egnet til en grundlæggende situation, hvor du vil indlæse en tekst med en almindelig tekst eller en HTML-kode i dine sider.

Opbygning af en fattig manns CMS med AJAX

AJAX og jQuery kan være en meget nyttig måde at opbygge effektive websites på, selv uden server-side programmering. Ofte er et websted baseret på en række mindre elementer, som kan byttes og genbruges. Du kan bruge AJAX til at opbygge en ramme, der gør det let at genbruge og ændre webindhold.

Selv om intet er alt, der er chokerende over siden fra brugerens perspektiv, kan et kig på koden vise nogle overraskelser:

CMS ved hjælp af AJAX $ (init); funktion init () {$ ("# overskrift"). load ("head. html"); $ ("# Menuen"). load ("menu. html"); $ ("# Content1"). load ("story1. html"); $ ("# Indhold2"). load ("story2. html"); $ ("# Footer"). load ("footer. html");};

Se over koden, og du kan se disse interessante funktioner:

Siden har intet indhold! Alle divs er tomme. Ingen af de tekst, der vises i skærmbilledet, er til stede i dette dokument, men alt trækkes dynamisk fra mindre filer.
Siden består af tomme navngivne divs. I stedet for noget bestemt indhold består siden af stedsejere med ID'er.
Det bruger jQuery. Biblioteket jQuery bruges til at gøre det lettere at indlæse data via AJAX-opkald.

Alt indhold er i separate filer. Kig igennem mappen, og du kan se meget enkle HTML-filer, der indeholder små dele af siden. For eksempel historie1. html ser sådan ud:

Bog I - Oprettelse af HTML-fonden

Sound HTML Foundations
Det handler om validering
Valg af dine værktøjer
Administration af informationer med lister og tabeller
Forbindelser med links
Tilføjelse af billeder
Oprettelse af formularer

Metoden init () kører på dokument.klar . Når dokumentet er klar, kører siden init () -metoden.
Metoden init () bruger AJAX-opkald til dynamisk at indlæse indhold. Det er ikke mere end en række jQuery load () metoder.

Denne tilgang kan virke som en masse arbejde, men det har nogle meget interessante egenskaber:

Hvis du bygger et stort websted med flere sider, vil du normalt designe det visuelle udseende én gang og genbruge den samme generelle skabelon gentagne gange.
Du vil også have nogle elementer, der vil være konsistente over flere sider. Du kan simpelthen oprette et standarddokument og kopiere og indsætte det for hver side, men denne tilgang bliver rodet. Hvad sker der, hvis du har oprettet 100 sider i henhold til en skabelon, og skal derefter ændre overskriften? Du skal foretage ændringen på 100 forskellige sider.

Fordelen ved skabelonstilstrækkelig tilgang er kodegenbrug. Ligesom brugen af en ekstern stil giver dig mulighed for at formere et stylesheet på tværs af hundredvis af dokumenter, kan design af en skabelon uden indhold gøre det muligt at gemme kodestykker i mindre filer og genbruge dem. Alle 100 sider peger på den samme menufil, så hvis du vil ændre menuen, skal du ændre en fil, og alt ændres med det.

Sådan bruger du denne form for tilgang:

Opret en enkelt skabelon til hele dit websted.

Byg grundlæggende HTML og CSS til at styre det overordnede udseende og følelse for hele dit websted. Du skal ikke bekymre dig om indhold endnu. Bare bygg pladsholdere for alle komponenter på din side. Sørg for at give hvert element et ID og skriv CSS'en for at få tingene placeret som du vil.
Tilføj jQuery-support.

Lav et link til jQuery-biblioteket, og lav en standard init () -metode. Indsæt kode for at håndtere at fylde de dele af siden, som altid vil være konsistente.
Kopiér skabelonen.

Når du har en følelse af, hvordan skabelonen vil fungere, skal du lave en kopi for hver side på dit websted.
Tilpas hver side ved at ændre funktionen init () .

Den eneste del af skabelonen, der ændres, er init () -funktionen. Alle dine sider vil være identiske, medmindre de har tilpasset init () funktioner, der indlæser andet indhold.
Indlæse brugerdefineret indhold i divs med AJAX.

Brug init () -funktionen til at indlæse indhold i hver div.

Dette er en fantastisk måde at styre indhold på, men det er ikke helt et fuldt blæst indholdshåndteringssystem. Selv AJAX kan ikke helt tillade dig at gemme indhold på internettet. Mere komplekse content management systemer bruger også databaser i stedet for filer til håndtering af indhold. Du skal bruge en slags server-side programmering (som PHP) og som regel en database (som mySQL) til at håndtere denne form for arbejde.