Slik bruker du AJAX til å lage en initialiseringsfunksjon for HTML5 og CSS3 programmering - dummies

Mange HTML5 og CSS3 sider krever en initialiseringsfunksjon. Kroppsbelastningsmekanismen brukes ofte i DOM / JavaScript for å få sider til å lastes så snart dokumentet har begynt å lastes. Dette er en funksjon som løper tidlig for å sette opp resten av siden. Mens body onload gjør denne jobben, finnes det et par problemer med den tradisjonelle teknikken:

• Det krever endring i HTML-en. JavaScript-koden skal være helt skilt fra HTML. Du må ikke endre HTML-en din for å få det til å fungere med JavaScript.

• Tidspunktet er fortsatt ikke helt riktig. Koden spesifisert i body onload utføres ikke før hele siden vises. Det ville være bedre om koden var registrert etter DOM er lastet, men før siden vises.

Slik bruker du $ (dokument). klar ()

jQuery har et godt alternativ til kroppsbelastning som overvinter disse manglene. Ta en kikk på koden for å se hvordan det fungerer:

klar. html $ (dokument). klar (changeme); funksjon changeMe () {$ ("# output"). html ("Jeg endret");}

Bruke dokumentet. klar mekanisme
Endret dette?

Denne koden bruker jQuery-teknikken for kjøring av initialiseringskode:

• Kroppstegnet har ikke lenger et onload attributt. Dette er en vanlig funksjon i jQuery programmering. HTML-koden har ikke lenger direkte koblinger til JavaScript fordi jQuery lar JavaScript-koden feste seg til nettsiden.

• Initialiseringsfunksjonen er opprettet med $ (dokument). klar () funksjon. Denne teknikken forteller nettleseren å utføre en funksjon når DOM er ferdig med å laste inn (slik at den har tilgang til alle elementene i skjemaet), men før siden vises (slik at eventuelle effekter av skjemaet vises øyeblikkelig for brukeren).

• $ document lager et jQuery-objekt fra hele dokumentet. Hele dokumentet kan omdannes til et jQuery-objekt ved å spesifisere dokumentet inne i $ () -funksjonen. Merk at du ikke bruker anførselstegn i dette tilfellet.

• Funksjonen som er spesifisert, kjøres automatisk. I dette tilfellet vil du kjøre funksjonen changeMe (), slik at du plasserer den i parameteren for klar () -metoden. Merk at dette refererer til changeMe som en variabel, så det har ingen anførselstegn eller parenteser.

Du ser flere andre steder (spesielt i hendelseshåndtering) der jQuery forventer en funksjon som parameter. En slik funksjon kalles ofte en funksjon for tilbakeringing fordi den kalles etter at en type hendelse har skjedd.Du ser også tilbakeringingsfunksjoner som svarer på tastaturhendelser, musebevegelser og fullføring av en AJAX-forespørsel.

Alternativer til dokument. klar

Du ser noen ganger et par snarveier fordi det er så vanlig å kjøre initialiseringskoden. Du kan forkorte

$ (dokument). klar (changeme);

til følgende kode:

$ (changeMe);

Hvis denne koden ikke er definert inne i en funksjon, og changeMe er en funksjon definert på siden, kjører jQuery automatisk funksjonen direkte, akkurat som dokumentet. klar tilnærming.

Du kan også opprette en anonym funksjon direkte:

$ (dokument). klar (funksjon () {$ ("# output"). html ("Jeg endret");});

Denne metoden (anonym funksjon) er tungvint, men du ser jQuery-kode ofte ved hjelp av denne teknikken. Du kan opprette en funksjon som heter init () og kalle den med en linje som dette:

$ (init);

Denne teknikken er enkel og lett å forstå, men du kan støte på de andre variantene når du undersøker kode på nettet.