AJAX og jQuery. Dynamisk innholdsoppdatering. Det grunnleggende (endringer fra 03.01.2012)
Denne artikkelen vil lede deg gjennom hva AJAX og jQuery er og viser deg eksempler på hvordan du bruker dem.
AJAX er et verktøy for å bygge webapplikasjoner som kommuniserer med en server i bakgrunnen. I dette tilfellet mottar brukeren en applikasjon med dynamisk innholdsoppdatering, uten å laste hele siden på nytt.
jQuery er et JavaScript-rammeverk, et bibliotek som lar deg mer praktisk bruke noen av funksjonene i Javascript, for eksempel: lage visuelle effekter, håndtere hendelser, jobbe med DOM- og AJAX-støtte.
Du kan laste ned den nyeste versjonen av jQuery og lære mer om alle funksjonene på utviklerens nettsted: http://www.jquery.com/
For denne artikkelen skal vi se på bare én funksjon i jQuery-biblioteket, funksjonen $ .ajax (). Denne funksjonen lar oss både overføre data til serveren og motta svar fra serveren, alt i bakgrunnen, uten å laste inn siden på nytt. Konfigurering av mottak eller overføring av data avhenger av parameterne som funksjonen $ .ajax () kalles med. De viktigste vil bli diskutert nedenfor. Du kan lese mer om parametere i jQuery-opplæringen.
La oss gå videre til å undersøke eksempler.
Viktig!
For at eksemplene skal fungere riktig, må du:
1. Alle filer må skrives i UTF-8-koding.
2. Skript må kjøres på en webserver, ikke kjøres i en nettleser som en fil.
Eksempel 1. Dynamisk oppdatering av innhold etter tidtaker
La oss lage et enkelt program som viser gjeldende tid, oppdatert en gang i sekundet av en tidtaker. En funksjon i dette programmet vil være å få informasjon om gjeldende tid fra en annen ekstern fil.
Innholdet i index.html-filen.
Det er flere funksjoner i koden, la oss forklare dem.
1. jQuery-biblioteket er koblet til i overskriften til HTML-filen, denne linjen er skrevet for dette.
Selve filen jquery.js ligger i samme mappe som eksempelfilene.
2. Det opprettes en beholder i hoveddelen av dokumentet, som vi laster innholdet inn i.
3. Den tilsynelatende merkelige $ (document) .ready () funksjonen kreves for at jQuery skal fungere riktig, dessuten kan vi gjøre alle forberedelsene for programmets arbeid. I vårt tilfelle kaller vi funksjonen show (), som inneholder en mekanisme for å hente innhold fra en annen fil, og setter opp en timer slik at funksjonen show () kalles opp en gang i sekundet.
$ (dokument) .ready (funksjon () (vis (); setInterval ("vis ()", 1000);));
4. Vis ()-funksjonen består i å kalle $ .ajax ()-funksjonen med et visst antall parametere, som lar oss hente informasjon fra en ekstern fil på serveren i bakgrunnen.
$ .ajax ((url: "time.php", cache: falsk, suksess: funksjon (html) ($ ("# innhold"). html (html);)));
La oss vurdere de brukte parameterne til $ .ajax () funksjonen.
Url: "time.php" Kaller time.php-filen for å få innhold. cache: usant Søkeresultater bufres ikke. suksess: funksjon (html) ($ ("# innhold"). html (html);) Hvis forespørselen er vellykket, går kontrollen videre til funksjonen som mottar innholdet som en parameter og skriver beholderen. Skriving til beholderen skjer på denne linjen:
$ ("# innhold"). html (html);
Innholdet i time.php-filen.
Meningen med time.php-filen er å vise gjeldende tid på skjermen.
Last ned kildefilene til eksemplet (16,6 kb):
Eksempel 2. Dynamisk oppdatering av innhold etter brukerens valg
Et program som dynamisk laster inn innhold etter brukerens valg.
Innholdet i index.html-filen.
Hvilken side vil du åpne?
I hoveddelen av dokumentet er det laget et skjema som har to knapper der brukeren velger ønsket innhold. Og en beholder for lasting av innhold.
Klikkhendelsen på "Side 1"-knappen håndteres av $ ("# btn1"). Klikk ()-funksjonen, og klikkhendelsen på "Side 2"-knappen håndteres av $ ("# btn2"). Klikk () funksjon.
Innholdet i side1.html- og side2.html-filene, som lastes dynamisk inn i innholdsområdet, er enkle HTML-sider eller tekstinnholdsfiler.
Last ned kildefilene til eksemplet (18,4 kb):
Eksempel 3. Sende data til serveren i bakgrunnen og motta innhold
Tenk på et eksempel som sender et oppgitt brukernavn til serveren. Når den mottar et navn, sender serveren en hilsen og teller antall tegn i det angitte navnet.
Innholdet i index.html-filen.
I hoveddelen av dokumentet er det laget et skjema for inntasting av brukerens navn. Og en beholder for lasting av dynamisk innhold.
Merk at selve skjemaet ikke har de vanlige handlings- og metodefeltene. Funksjonen $ ("# myForm").Send () fungerer som en behandler for tilfellet av trykk på "Send"-knappen. La oss ta en titt på denne funksjonen.
$ ("# myForm"). submit (function () ($ .ajax ((type: "POST", url: "greetings.php", data: "username =" + $ ("# brukernavn"). val ( ), suksess: funksjon (html) ($ ("# innhold"). html (html);))); return false;));
Som vi kan se, er hovedarbeidet igjen knyttet til funksjonen $ .ajax (). Denne gangen dukker det opp flere parametere som ikke er vurdert i eksempel 1 og 2. Nemlig:
Type: "POST" Dataoverføringstype. data: "brukernavn =" + $ ("# brukernavn"). val () Parametre sendt til serveren. I dette tilfellet sender vi innholdet i brukernavnfeltet - brukerens navn. Generelt skrives parametere på samme måte som i GET-metoden, på én linje, for eksempel:
data: "brukernavn = Vasya & alder = 18 & kjønn = mann"
Merk at linjen på slutten er skrevet:
Returner falsk; Dette gjøres for at skjemaet ikke skal prøve å overføre data til filen det er lansert fra og siden ikke lastes inn på nytt.
Innholdet i greetings.php-filen.
". $ _ FORESPØRSEL [" brukernavn "]."!
"; echo" Det er bokstaver i navnet ditt: ".strlen ($ _ REQUEST [" brukernavn "]).". ";?>
Vi viser en hilsen på skjermen og teller antall tegn i navnet.
Last ned kildefilene til eksemplet (16,8 kb):
Det skal sies avslutningsvis at i tillegg til de åpenbare fordelene ved å lage sider ved hjelp av dynamisk oppdateringsinnhold, er det en rekke ulemper som bør tas i betraktning når man utvikler et nettsted, nemlig:
1. På sider med dynamisk innholdsoppdatering fungerer ikke "Tilbake"-knappen i nettleseren som den skal.
2. Sider med dynamisk innholdsoppdatering endrer ikke URL basert på innholdet, så de kan ikke bokmerkes.
3. Sider med dynamisk innholdsoppdatering blir ikke indeksert av søkemotorer, fordi de utfører ikke JavaScript-kommandoer.
Du kan bli kvitt disse manglene programmatisk. Denne artikkelen dekker ikke slike metoder.
La oss si at jeg har en index.html-side med en nav-meny og jeg har 15 andre html-sider med samme meny.
Er det mulig hvis html / css / js oppdaterer EN fil (si index.html fil) og alle oppdateringer brukes på alle 15 dokumenter?
Jeg vet at du kan gjøre dette med PHP, men siden jeg kjører bruker ikke PHP-indeksfilen, så jeg ser etter en annen måte.
Kanskje det er en annen måte å oppnå dette på? Angular JS kanskje? Noen forslag eller linker du kan foreslå å lese / lære hvordan du gjør dette?
Prøv følgende:
Kan du bruke JQuery? :D
Eksempelside 1:
Ja - dette er mulig og et krav for enhver type ikke-triviell sidestørrelse.
Den generelle måten å gjøre denne typen ting uten å bli for komplisert er dette. I HTML-filene dine inkluderer du noen maler. Disse malene kontrollerer det generelle utseendet og følelsen til nettstedet ditt. Alle HTML-filene dine inneholder de samme malene. Hvis du vil ha noe annerledes på en bestemt side, overstyrer du malene dine i den spesifikke html-filen.
Som et resultat ser det slik ut:
I style.css og custom.js kan du gå til byinnstillinger. Du kan legge til flere stilark og flere javascript-skript etter behov. De fleste nettsteder har mer stil og javascript enn innhold.
Min favorittside for å lære om disse teknologiene er Mozilla Developer Network, men det er mange andre flotte ressurser.
Fanesynkronisering er tilgjengelig via localStorage og StorageEvent. Du finner mer informasjon på MDN
Etter å ha oppdatert nav, ringer du localStorage.setItem (someKey, someValue) og med window.addEventListener ("lagring", this.handleStorageEvent) håndtere localStorage endringen i andre faner. Fanen som hendelsen ble utløst på vil ikke forplante localStorage-endringen.
Håper svaret mitt hjalp: 3
du kan gjøre det med en XML http-forespørsel ... du trenger bare å definere hele nav-overskriften, menyen i en fil og referere til en div på tvers av alle sider ...