Hvordan lage en AJAX-forespørsel med jQuery for HTML5 og CSS3 Programmering - dummies

Hovedformålet med et AJAX-bibliotek som jQuery er å forenkle AJAX-forespørsler for HTML5- og CSS3-programmerere. Det er vanskelig å tro hvor lett dette kan være med jQuery.

Slik legger du inn en tekstfil med AJAX

Sjekk ut denne rene koden:

ajax. html $ (dokument). klar (getAJAX); funksjon getAJAX () {$ ("# output"). last ("hei. txt");}

HTML er veldig rent. Det oppretter bare en tom div-kalt utgang.

Dette eksempelet bruker AJAX, så hvis det ikke virker, må du kanskje huske noen detaljer om hvordan AJAX fungerer. Et program som bruker AJAX, skal kjøres via en webserver, ikke bare fra en lokal fil. Også filen som leses skal være på samme server som programmet gjør AJAX-forespørselen.

Lasten () -mekanismen som er beskrevet her, passer for en grunnleggende situasjon der du vil laste inn en vanlig tekst- eller HTML-kodebit i sidene dine.

Bygg en fattig manns CMS med AJAX

AJAX og jQuery kan være en svært nyttig måte å bygge effektive nettsteder på, selv uten server-side programmering. Ofte er et nettsted basert på en rekke mindre elementer som kan byttes og gjenbrukes. Du kan bruke AJAX til å bygge et rammeverk som tillater enkel gjenbruk og modifisering av webinnhold.

Selv om ingenting er alt som er sjokkerende for siden fra brukerperspektivet, kan en titt på koden vise noen overraskelser:

CMS Bruke AJAX $ (init); funksjon init () {$ ("# overskrift"). last ("html"); $ ("# Meny"). last ("meny. html"); $ ("# Innhold1"). last ("story1. html"); $ ("# Content2"). last ("story2. html"); $ ("# Bunntekst"). last ("footer. html");}; 
Se over koden, og du kan se disse interessante funksjonene:


Siden har ingen innhold! Alle divene er tomme. Ingen av teksten som vises i skjermbildet er tilstede i dette dokumentet, men alt er trukket fra mindre filer dynamisk.


Siden består av tomme navngitte div. I stedet for noe bestemt innhold består siden av plassholdere med ID-er.


Den bruker jQuery. JQuery-biblioteket brukes til å forenkle lasting av data gjennom AJAX-samtaler.


Alt innhold er i separate filer. Se gjennom katalogen, og du kan se veldig enkle HTML-filer som inneholder små deler av siden. For eksempel, historie1. html ser slik ut:
Bok I - Opprett HTML-stiftelsen

Lyd HTML-grunnlag
Alt om validering
Velge verktøyene dine
Administrere informasjon med lister og tabeller
Gjør tilkoblinger med koblinger
Legge til bilder
Opprette skjemaer




Metoden init () kjører på dokument.klar . Når dokumentet er klart, kjører siden init () -metoden.


Metoden init () bruker AJAX-samtaler for å laste innholdet dynamisk. Det er ikke noe mer enn en serie jQuery load () metoder.


Denne tilnærmingen kan virke som mye arbeid, men det har noen svært interessante egenskaper:


Hvis du bygger et stort nettsted med flere sider, vil du vanligvis utforme det visuelle utseendet en gang og bruke samme generelle mal gjentatte ganger.


Du vil også ha noen elementer som vil være konsistente over flere sider. Du kan bare lage et standarddokument og kopiere og lime det inn for hver side, men denne tilnærmingen blir rotete. Hva skjer hvis du har opprettet 100 sider i henhold til en mal, og deretter må du endre toppteksten? Du må gjøre endringen på 100 forskjellige sider.


Fordelen med mallstilstilgangsmåten er kodegenbruk. På samme måte som bruk av en ekstern stil kan du formere et stilark over hundrevis av dokumenter. Ved å designe en mal uten innhold kan du lagre kodestykker i mindre filer og gjenbruk dem. Alle 100 sider peker på samme menyfil, så hvis du vil endre menyen, endrer du en fil og alt endres med det.
Slik bruker du denne typen tilnærming:


Opprett en enkelt mal for hele nettstedet ditt.
Bygg grunnleggende HTML og CSS for å administrere det generelle utseendet på hele nettstedet ditt. Ikke bekymre deg om innhold ennå. Bare bygg plassholdere for alle komponentene på siden din. Pass på å gi hvert element en ID og skriv CSS for å få ting plassert som du vil.


Legg til jQuery-støtte.
Lag en lenke til jQuery-biblioteket, og gjør en standard init () -metode. Sett inn kode for å håndtere å fylle de delene av siden som alltid vil være konsistente.


Kopier malen.
Når du har en følelse av hvordan malen vil fungere, må du lage en kopi for hver side på nettstedet ditt.


Tilpass hver side ved å endre funksjonen init () .
Den eneste delen av malen som endres, er init () -funksjonen. Alle sidene dine vil være identiske, bortsett fra at de har tilpasset init () funksjoner som laster inn annet innhold.


Last inn tilpasset innhold i divisjonene med AJAX.
Bruk init () -funksjonen til å laste innhold i hver div.


Dette er en fin måte å administrere innhold på, men det er ikke helt et fullstendig innholdsstyringssystem. Selv AJAX kan ikke helt tillate deg å lagre innhold på nettet. Mer komplekse innholdshåndteringssystemer bruker også databaser i stedet for filer for å håndtere innhold. Du trenger en slags server-side programmering (som PHP) og vanligvis en database (som mySQL) for å håndtere denne typen arbeid.