Hur man använder AJAX för att skapa en initialiseringsfunktion för HTML5 och CSS3-programmering - dummies

Många HTML5 och CSS3-sidor kräver en initialiseringsfunktion. Kroppsbelastningsmekanismen används ofta i DOM / JavaScript för att få sidor att laddas så snart dokumentet har börjat ladda. Det här är en funktion som körs tidigt för att ställa in resten av sidan. Medan body onload gör det här jobbet, finns det ett par problem med den traditionella tekniken:

• Det krävs att man ändrar HTML. JavaScript-koden ska vara helt skild från HTML. Du behöver inte ändra din HTML för att få den att fungera med JavaScript.

• Tidningen är fortfarande inte helt rätt. Koden som anges i body onload körs inte förrän hela sidan visas. Det skulle vara bättre om koden var registrerad efter DOM är laddad men före sidan visas.

Hur man använder $ (dokument). redo ()

jQuery har ett bra alternativ till body onload som övervinner dessa brister. Ta en titt på koden för att se hur det fungerar:

redo. html $ (dokument). redo (changeMe); funktion changeMe () {$ ("# output"). html ("Jag ändrade");}

Använda dokumentet. färdig mekanism
Ändra detta?

Den här koden använder jQuery-tekniken för att köra initialiseringskoden:

• Kroppstaggen har inte längre attributet onload . Detta är ett vanligt inslag i jQuery programmering. HTML-filen har inte längre direktkopplingar till JavaScript eftersom jQuery låter JavaScript-koden fästa sig på webbsidan.

• Initialiseringsfunktionen skapas med $ (dokument). redo () funktion. Denna teknik berättar att webbläsaren ska utföra en funktion när DOM har laddats (så att den har tillgång till alla element i formuläret) men innan sidan visas (så att eventuella effekter av formuläret visas omedelbart för användaren).

• $ dokument gör ett jQuery-objekt från hela dokumentet. Hela dokumentet kan omvandlas till ett jQuery-objekt genom att ange dokument i funktionen $ (). Observera att du inte använder citattecken i det här fallet.

• Den angivna funktionen körs automatiskt. I det här fallet vill du köra funktionen changeMe (), så du placerar den i parametern för ready () -metoden. Observera att det här hänvisar till changeMe som en variabel, så det har inga citattecken eller parenteser.

Du ser flera andra ställen (särskilt vid händelsehantering) där jQuery förväntar sig en funktion som parameter. En sådan funktion kallas ofta en funktion som callback eftersom den kallas efter att någon händelse inträffat.Du kan också se återuppringningsfunktioner som svarar på tangentbordshändelser, musrörelse och slutförandet av en AJAX-förfrågan.

Alternativ för dokumentation. redo

Du ser ibland ett par genvägar eftersom det är så vanligt att köra initialiseringskoden. Du kan förkorta

$ (dokument). redo (changeMe);

till följande kod:

$ (changeMe);

Om denna kod inte definieras inuti en funktion och changeMe är en funktion som definieras på sidan, kör jQuery automatiskt funktionen direkt som dokumentet. redo tillvägagångssätt.

Du kan också skapa en anonym funktion direkt:

$ (dokument). redo (funktion () {$ ("# output"). html ("jag ändrade");});

Metoden (anonym funktion) är besvärlig, men du ser ofta jQuery-kod med hjälp av den här tekniken. Du kan skapa en funktion som heter init () och kalla den med en rad så här:

$ (init);

Denna teknik är enkel och lätt att förstå, men du kan stöta på andra variationer när du granskar kod på webben.