Modtagelse af data fra serveren uden at genindlæse siden. Modtagelse af data fra serveren uden at genindlæse siden Skjult ramme

Beskrivelse

Den enkleste og mest udbredte måde er at bruge en skjult ramme, som dataene indlæses i. Typisk implementeres en sådan ramme ved hjælp af et IFRAME-element.

< iframe name = "buffer" src = "about:blank" style = " width : 0px ; height : 0px ; overflow : hidden ; border : none ; " >

Du kan ikke bruge display:none til at skjule en ramme – Opera tillader dig ikke at få adgang til en sådan ramme. (En alternativ løsning, der virker, er position:absolut; synlighed:skjult; bredde:0px; højde:0px; .)
Anmodning og modtagelse af data sker asynkront, oftest ved hjælp af en tilbagekaldsfunktion defineret i konteksten af hovedsiden:

// funktionen vil blive kaldt, når der modtages data fra serverfunktionen frameCallback ( data) ( // nogle handlinger med de modtagne data)

Når scriptet skal hente nogle data fra serveren, giver det kommandoen til at indlæse siden i denne iframe:

Vindue. frames[ "buffer" ] . placering = url; // url - GET anmodning til serveren

Du kan også bruge en usynlig formular indsend med target="buffer" . Dette giver dig mulighed for at overføre data til serveren ved hjælp af POST-metoden.

Som svar skal serveren generere og returnere en side med JavaScript-kode, der kalder tilbagekaldsfunktionen:

forælder. frameCallback( "modtagne data" ); Fordele

Indlysende implementering: IFRAME er simpelthen det første, der kommer til at tænke på.
Evnen til at sende data af enhver form (inklusive dynamisk oprettet) til IFRAME, som løser problemer med datakodning (al omkodning udføres af browseren).

Fejl

Browserhistorik er tilstoppet.
Problemer på tværs af browsere: Hver browser har sine egne og ekstremt ustabile funktioner, når de arbejder med IFRAMEs.
Stort hukommelsesforbrug (faktisk er hver IFRAME en separat lille browser).
Vanskeligheder i Opera: du kan kun få adgang til indholdet af IFRAME, når du oprettede som du specificerede src-attributten, der matcher navnet på det aktuelle websted.

XMLHttpRequest og ActiveX Microsoft.XMLHTTP-fordele

Komponenterne bruges til deres tilsigtede formål.
Større hukommelsesbesparelser sammenlignet med IFRAME.

Fejl

Løsningerne er specifikke for IE og Mozilla/Firefox (i IE virker det slet ikke med ActiveX deaktiveret), i Opera er der kun support fra version 8.

SCRIPT: Indlæsning af data via et dynamisk genereret SCRIPT-tag Fordele

God cross-browser kompatibilitet. Identisk kode og metode i forskellige browsere (inklusive værker i Opera).
Hukommelsesbesparelser sammenlignet med IFRAME.
- Historien bliver ikke ødelagt.
- Metoden er ikke afhængig af browserfunktioner og fungerer i IE5.0+, Mozilla 1.7+, Firefox 1.0+ og Opera 7.3+ (her betyder "+" "i denne og nyere versioner"). Derudover bruger den hverken ActiveX eller IFRAME.

Fejl

Det er ikke muligt at sende særlig mange data til serveren (begrænsning på QUERY_STRING længde).
Det er nødvendigt at arbejde med Unicode i serverscriptet (der er en iconv-udvidelse til dette i PHP).
Browsere håndterer dynamisk genererede SCRIPT-tags forskelligt, så cross-browser-løsningen indeholder en række hacks.

Navn: document.f.h.value=window.navigator.appName; 8.5. Afsendelse af data fra skjulte formularfelter

Når du har klikket på knappen i adresselinjen, vil du se, at der udover bruger=navn også er h=din_browser_navn. H-feltet var ikke synligt i den formular, du udfyldte. Således sendte formularen yderligere oplysninger til serveren ud over dit ønske. Dette er allerede ubehageligt, selvom selve informationen i dette tilfælde (browsernavn) ikke repræsenterer noget kriminelt. Hvis POST ikke blev brugt som dataoverførselsmetode (som i vores eksempel, som standard), så ville brugeren ikke engang bemærke denne skjulte dataoverførsel.

Eksempel 8.3. Eksemplet består af to rammer (placeret i venstre. htm og højre. htm-filer), der indeholder den samme form. Ud over dette er følgende script også placeret i højre ramme:

funktion copyFields() (her = document.forms.elements; there = window.top.frames.document.forms.elements; here.value = there.value; here.value = there.value; here.value = there.value ; here.value = there.value; setTimeout("copyFields()",100); ) window.onload=copyFields;

Funktionen copyFields() kører hvert 0,1 sekund. Når brugeren indtaster data i venstre ramme, går de samme data ind i de tilsvarende felter i højre ramme. Data fra et vindue kan således læses af et program fra et andet vindue (eller ramme). Spørgsmålet er bare, om du ønsker, at dette skal ske. Hvordan disse problemer løses, er beskrevet nedenfor i afsnittet "Sikkerhedsmodel".

Et andet eksempel er at sende data om en begivenhed uden at have en synlig formular på websiden:

document.f.h.value = window.navigator.appName; Klik på linket

Når du klikker på et hypertekstlink, vil ikke kun den meddelelse, der er angivet i dette link, blive vist, men også formulardataene vil blive sendt. Du vil ende med to advarselsvinduer. Men du bestilte ikke det andet vindue!

Selvfølgelig kan ukontrolleret dataoverførsel til serveren undgås ved at gå ind i send bekræftelsestilstand (i browserindstillingerne). Men for det første deaktiverer mange brugere det, og for det andet kan du ikke bruge formularer, men for eksempel grafik. Og vi vil nu overveje denne mulighed i næste afsnit.

Usynlig kode

Spørgsmålet om tilgængelighed af JavaScript-kode betragtes ud fra to synsvinkler: identifikation, som resulterer i behovet for at skjule koden, og brugersikkerhed, hvilket betyder kodetilgængelighed.

Skjult kode programmeringsteknikker giver dig mulighed for at løse flere andre problemer, der ikke er relateret til sikkerhed.

Vi vil overveje mulighederne for at bruge skjult kode uden at afgive en dom om overlegenheden af den ene eller anden tilgang. Lad os overveje flere muligheder:

usynlig ramme;
kode i ekstern fil;
dataudveksling via integreret grafik.

Strengt taget skjuler de to første muligheder ikke koden helt. De er designet enten til uerfarne brugere eller til de nysgerrige. På den ene eller anden måde, ikke hver gang du vil se på sidens kildetekst.

Usynlig ramme

Teknologien til programmering i en usynlig ramme er baseret på det faktum, at når du beskriver en rammestruktur, kan du indstille en konfiguration som:

8.6. Den højre ramme har nul bredde (kanten er synlig)

I dette tilfælde vil den venstre ramme optage hele vinduets arbejdsområde, og indholdet af den højre vil blive skjult. Det er i denne usynlige ramme, vi vil placere programkoden (for eksempel ovenstående script til at læse felter fra formularen i venstre ramme). Grafikbyttefunktioner placeres nogle gange i en usynlig ramme, hvilket gør det muligt for brugeren allerede at arbejde med hovedrammen, mens resten af grafikken indlæses.

I dette eksempel har vi dog givet brugeren mulighed for at afsløre os: en lodret stribe er synlig langs vinduets højre kant - dette er grænsen mellem rammer. Brugeren kan flytte den til venstre og se den højre ramme. Det er ikke svært at beskytte dig selv mod dette - bare indstil tykkelsen af rammernes grænser, samt angiv umuligheden af at ændre dimensionerne af hver ramme:

8.7. Den højre ramme har nul bredde (kanten er usynlig)

Kode i ekstern fil

Hvordan man forbinder JavaScript-kode placeret i en ekstern fil blev diskuteret i det indledende foredrag:

Denne metode giver dig mulighed for kun at skjule koden for en doven bruger. Men selve JavaScript-koden er let tilgængelig, fordi... du kan blot downloade den angivne fil separat, eller gemme hele HTML-siden (med alle scripts forbundet til den) ved hjælp af browsermenuen.

Kommunikation via integreret grafik

Denne teknik er baseret på to ideer: muligheden for at bytte et grafisk billede uden at genindlæse siden og muligheden for at bytte dette grafiske billede ikke ved at angive URL'en på den grafiske fil, men gennem et CGI-script, der returnerer Content-type: image/ ... eller udfører omdirigering. Bemærk venligst, at du kun kan bruge en anden metode end GET i formularer. I det følgende eksempel oprettede vi en funktion change_image(), som teknisk ændrer værdien af src-egenskaben for et billede. Men som en bivirkning giver det serveren mulighed for at vide, om brugeren har indstillet cookies (hvis serversiden CGI-script image.cgi er programmeret i overensstemmelse hermed):

funktion change_image(x) ( document[x].src = "http://abc.ru/image.cgi?" + document.cookie; )

Denne uskadelige sekvens af JavaScript-erklæringer vil fortælle os, om klienten har modtaget en cookie. Cookies understøttes muligvis ikke af forskellige årsager. I dette tilfælde overfører programmet de cookies, det indstillede, til serveren som en scriptparameter under dække af at ændre billedet.

Sikkerhedsmodel

Ved programmering i JavaScript er det potentielt muligt at tilgå brugerens personlige oplysninger fra programmet. Dette problem opstår altid, når noget, der kører på en computer, har evnen til selvstændigt at organisere dataudveksling over netværket med en ekstern server. Fra version til version bliver styringen af beskyttelsen af sådanne data konstant forbedret, men du skal altid huske på, at mange "stifindere" undersøger dette problem og konstant opdager flere og flere nye måder at omgå beskyttelsesmekanismer på. Vi vil kun forklare hovedpunkterne i principperne for informationssikkerhed i JavaScript og lade søgen efter potentielle svagheder være hjemmearbejde for de mest nysgerrige læsere.

Som standard inkluderer JavaScript-beskyttede data:

Tabel 8.1. Egenskaber og metoder, der er beskyttet Objekt- eller klasseegenskaber

dokument	cookie, domæne, lastModified, placering, henvisning, titel, URL, links, formularer
Form

Rammer er HTML-elementer, der giver dig mulighed for at opdele et webbrowservindue i flere uafhængige vinduer, som hver kan indlæse et separat HTML-dokument. Hvert sådant vindue (ramme) kan have sine egne rullebjælker og fungere uafhængigt af andre uafhængige vinduer eller tværtimod styre deres indhold. De kan bruges til at organisere en menu, der konstant er placeret i et vindue, mens selve informationen er placeret i et andet vindue. Brugere kan til enhver tid få adgang til menuen og behøver ikke at gå tilbage til den forrige side for at vælge et andet menupunkt. Brug af rammer giver dig mulighed for at "fastgøre" billeder eller andre statiske grænsefladeelementer til browservinduet, mens resten af siden ruller inden for rammen.
Det er dog værd at bemærke, at frames i disse dage betragtes som et forældet værktøj, og sider med frames betragtes nu som uværdige, da professionelle webmastere aldrig bruger frames i deres projekter. Rammer har en række berygtede problemer. De forvirrer for eksempel søgemaskinerne, fordi de sider, der indeholder indholdet, ikke linker til andre dokumenter. Hvis du ønsker at få besøgende fra søgemaskiner, så glem alt om rammer. Det er umuligt for en bruger at placere en side, han kan lide, i bogmærkesektionen i browseren, da rammer skjuler adressen på den side, hvor han er placeret, og altid kun viser webstedsadressen. Af denne grund skaber de problemer for browsere, når de sporer historik, og de er heller ikke særlig tilpasselige til forskellige skærmstørrelser og mobile enheder.
På trods af at projekter med rammer bliver mere og mere sjældne på World Wide Web, ville det at lære HTML være ufuldstændigt uden at overveje emnet frames. Rammer har sammen med deres ulemper også nogle fordele, der ikke tillader os at afvise denne teknologi som ulovende.

Oprettelse af rammer

Strukturen af et HTML-dokument med rammer ligner meget i udseendet formatet af et almindeligt HTML-dokument. Som i et almindeligt HTML-dokument placeres al koden mellem parret og tags, og overskrifterne er placeret i containeren. Den største forskel mellem et dokument med rammer og et almindeligt HTML-dokument er, at et dokument med rammer bruger et parret tag i stedet for et tag (fra det engelske frame set - et sæt rammer).
Følgende eksempel viser strukturen af et HTML-dokument med rammer:

Eksempel: HTML-dokumentstruktur med rammer

Prøv det selv"

frame_top
frame_left	frame_right

Dokument med rammer

I eksemplet ovenfor indeholder siden tre områder, som hver i starten er indlæst med HTML-dokumenter frame_top.html, frame_left.html og frame_right.html. Ud over HTML-dokumenter kan en ramme også indeholde grafik. For at gøre dette skal du angive adressen på det tilsvarende billede i src-attributten, f.eks. src="image.gif". Bemærk at elementet bruges uden et afsluttende tag.
En container kan kun indeholde tags eller et andet sæt rammer, der er dækket af og tags.
Tagget har følgende attributter:

rækker - beskriver, hvordan en side er opdelt i rækker:
cols - beskriver, hvordan man opdeler en side i kolonner:

Områderne, der kommer fra denne sideopdeling, vil være rammer. Fraværet af disse attributter definerer en enkelt ramme, der vil optage hele browservinduet.

Værdien af attributterne rækker og kolonner skal ikke angive antallet af rækker eller kolonner, men bredden og højden af rammerne. Alle værdier på listen er adskilt med kommaer. Dimensioner kan angives i absolutte enheder (pixels) eller procenter:

cols="20%, 80%" - browservinduet er opdelt i to kolonner ved hjælp af attributten cols, venstre kolonne optager 20% og højre 80% af browservinduet.
rows="100, *" Browservinduet er opdelt i to vandrette vinduer ved hjælp af rows-attributten, hvor det øverste vindue optager 100 pixels og det nederste vindue optager den resterende plads angivet med stjernesymbolet.

Som det kan ses af dette eksempel, opretter en beholder med rows-attributten først to vandrette rammer, og i stedet for den anden ramme, erstattes en anden, som opdeler den nederste vandrette ramme i to kolonner ved hjælp af cols-attributten, den venstre kolonne optager. 20 % og de højre 80 % af browservinduet .
Hvis browseren ikke understøtter rammer, vil vinduet vise tekst placeret mellem tags og. Alt mellem taggene og ignoreres af browsere, der understøtter frames. Udvikleren skal således skrive kode, der duplikerer indholdet af rammerne på andre måder, og placere denne kode i en container, så vil alle brugere kunne se hans webside.
Som allerede nævnt bruges et uparret tag til at indsætte en separat ramme i et dokument. src-attributten angiver det dokument, der skal vises inden for denne ramme, for eksempel: . Hvis src-attributten mangler, vises en tom ramme.

Kanter eller mellemrum mellem rammer

Som standard viser browseren en grå, normalt 3D-linjekant mellem rammer, som besøgende kan bruge til at justere størrelsen på rammen.
Rammekanten kan manipuleres som ethvert andet rammeelement. For at opnå dette er der flere elementattributter, der giver dig mulighed for at tilpasse rammerne for rammer. Tykkelsen af kantlinjen bestemmes af kantattributten. Standardværdien for kanttykkelse er fem.
For at skjule en rammes kant skal du enten sætte grænsebreddeværdien til nul eller sætte frameborder-attributten til "nej" eller "0". Frameborder-attributten kan kun have to modsatte værdier. Hvis værdien af frameborder-attributten er "ja" eller "1", vil rammekanten blive vist, og hvis "0" eller "nej", så vil den ikke. Bemærk venligst, at frameborder-attributværdier varierer mellem browsere. For at løse dette problem skal du bruge frameborder-attributten to gange, og for nogle browsere skal du også tilføje framespacing-attributten med en værdi på "0":

I det følgende eksempel fjerner vi grænsen mellem rammer:

Eksempel: Fjernelse af rammen mellem rammer

Prøv det selv"

frame_left

frame_right

Rammer uden rammer

Hvis du fjerner grænsen mellem rammer, vil besøgende ikke kunne ændre størrelsen på rammen i browseren. Du kan også forhindre rammen i at ændre størrelse ved at bevare kanterne ved at bruge noresize-attributten:

Bordercolor-attributten kan bruges til at ændre farven på en rammes kant; alt du skal gøre er at angive en kode eller et passende reserveret farvenavn.
Nedenfor er et eksempel på en HTML-side, der indeholder rammegrænsekontrolattributterne beskrevet ovenfor: kantfarven er rød, størrelsen på den øverste ramme kan ikke ændres:

Eksempel: Frame Border Control

Prøv det selv"

frame_top
frame_left	frame_right

Rammegrænsestyring

Hvis du vil placere siden, der vises inde i rammen, tættere på dens kanter, eller omvendt flytte den længere væk, skal du ændre attributterne marginheight og marginwidth for tagget. Marginheight-attributten angiver margenen mellem rammens indhold og dens øverste og nederste kanter. Syntaks:

Marginwidth-attributten angiver margenen mellem rammens indhold og dens højre og venstre kant. Syntaks:

Denne html-linje placerer for eksempel den viste side tæt på rammens kant:

Hvis siden viser en rullepanel, som du ikke ønsker, kan du løse dette problem ved at angive den rullende ="no"-attribut i . Men husk på, at hvis rammen ikke er stor nok til at vise hele indholdet på siden, så har den besøgende ingen mulighed for at rulle den viste side.

Links inde i rammer

At følge et link i et almindeligt HTML-dokument gøres på følgende måde: klik på linket og det aktuelle dokument erstattes med et nyt i det nuværende eller i et nyt browservindue. Når du bruger rammer, adskiller indlæsningsskemaet for HTML-dokumenter sig fra det sædvanlige, og hovedforskellen er muligheden for at indlæse et HTML-dokument i en ramme fra en anden ramme.
For at indlæse et dokument i en bestemt ramme skal du bruge taggets target-attribut . Værdien af target-attributten er navnet på den ramme, hvori dokumentet, der er angivet af taggens name-attribut, vil blive indlæst. Det er også værd at bemærke, at rammenavnet skal begynde med enten et tal eller et latinsk bogstav. Følgende navne bruges som reserverede navne:

For eksterne links skal du indstille target-attributten til enten _top eller _blank for at sikre, at tredjepartsprojekter ikke vises i dine rammer, men i stedet fylder hele browservinduet.

Følgende eksempel viser et HTML-dokument, hvor den højre ramme indlæser en side fra et link placeret i den øverste ramme. Link til dokumentet, der åbnes i højre ramme:

Google

Den rigtige ramme får et navn frame_right:

For at indlæse et dokument i en specificeret ramme skal du bruge konstruktionen target="frame_right", som vist i eksemplet:

Eksempel: Link til en anden ramme

Prøv det selv"

Link til en anden ramme

Din browser viser ikke rammer

Flydende rammer

Et element (en forkortelse af det engelske udtryk "floating frame") giver dig mulighed for at indlejre et separat HTML-dokument eller en anden ressource hvor som helst på en webside. Indholdet af en flydende (indlejret) ramme kan være en hvilken som helst HTML-side, enten fra din ressource eller fra et andet websted. Som du allerede har forstået, skabes flydende rammer ved hjælp af et element, som i modsætning til et tag ikke indsættes mellem tags og, men mellem tags og.
Elementet kan bruge de samme attributter som en frame, med undtagelse af noresize-attributten - i modsætning til almindelige rammer kan inline-rammer ikke ændres størrelse på skærmen:

Attributbeskrivelse

src	bruges til at angive URL'en på siden, der skal vises i rammen
højde	indstiller højden af det flydende rammevindue i pixels eller %
bredde	indstiller bredden af det flydende rammevindue i pixels eller %
navn	navnet på den ramme, hvormed den kan tilgås i links
rammekant	sætter grænsen for rammer, kan tage værdierne 1 (der er en kant) eller 0 (ingen kant) (ikke understøttet i HTML5)
marginbredde	udfyldning til venstre og højre fra indholdet til rammens kant (ikke understøttet i HTML5)
marginhøjde	udfyldning i toppen og bunden fra indholdet til rammekanten (ikke understøttet i HTML5)
rulle	bestemmer typen af rullebjælker på rammen og tager værdierne ja (der er bjælker), nej (ingen bjælker) og auto (bjælker vises hvis nødvendigt) (Ikke understøttet i HTML5)
tillad fuldskærm	Tillader rammen at gå i fuldskærmstilstand
hspace	Vandret margen fra ramme til omgivende indhold
vspace	lodret rum fra ramme til omgivende indhold
justere	definerer rammejustering

I det følgende eksempel er dimensionerne af den flydende ramme angivet i pixels, men du kan også angive dem i %:

Rammer opdeler browservinduet i separate områder, der er placeret ved siden af hinanden. Hvert af disse områder indlæser en separat webside. Da der er meget snak om rammer om deres nødvendighed, vil vi nedenfor præsentere fordele og ulemper ved rammer, så du selv kan afgøre, om de er værd at bruge på din hjemmeside.

Fordele ved rammer Enkelhed

Rammer bruges til at afgrænse en webside i to områder, der indeholder webstedets navigation og indhold. Rammemekanismen giver dig mulighed for at åbne et dokument i én ramme fra et link, der er klikket i en helt anden ramme. Denne opdeling af en webside i komponenter er intuitiv og logisk.

Hurtighed

Layout uden rammer er kendetegnet ved at placere både navigation og indhold på én side. Dette øger størrelsen af hver side og kan i alt væsentligt påvirke mængden af information, der downloades fra siden. Og da rammer bruger opdelingen af information i dele, indlæses sider med dem hurtigere.

Indkvartering

Rammer giver en unik mulighed for at placere information præcis, hvor du har brug for dem i browservinduet. Så du kan placere en ramme i bunden af browseren, og uanset om du ruller i indholdet, vil dette område ikke ændre sin position.

Ændre størrelse på områder

Du kan ændre størrelsen på rammer med det samme, noget som traditionelt HTML-layout ikke tillader.

Indlæser

Websiden indlæses kun i det angivne vindue, resten forbliver uændret. Ved hjælp af JavaScript kan du samtidigt indlæse to eller flere sider i rammer.

Ulemper ved Frames Navigation

Brugeren ender ofte på en hjemmeside uden absolut nogen idé om, hvor han er endt, fordi han netop har klikket på et link modtaget i en søgemaskine. For at gøre det nemmere for en besøgende at finde ud af, hvor han er, placeres webstedets navn, sidetitel og navigation på hver side. Frames har en tendens til at overtræde dette princip ved at adskille webstedets titel fra indholdet og navigationen fra indholdet. Forestil dig, at du finder et passende link i en søgemaskine, klikker på det, og til sidst åbner et dokument uden titel eller navigation. For at forstå, hvor vi er eller se på andre materialer, bliver du nødt til at redigere stien i adresselinjen, hvilket under alle omstændigheder er ubelejligt.

Dårlig indeksering af søgemaskiner

Søgemaskiner fungerer ikke godt med rammestruktur, fordi de sider, der indeholder indholdet, ikke har links til andre dokumenter.

Interne sider kan ikke bogmærkes

Rammer skjuler adressen på den side, den besøgende er på, og viser altid kun webstedets adresse. Af denne grund er det svært at bogmærke en side, du kan lide, i din browser.

Inkompatibilitet med forskellige browsere

Rammeindstillinger har en tendens til at blive vist helt forskelligt i forskellige browsere. Desuden er modsætningen mellem dem så åbenlys, at de samme parametre fortolkes af browsere på helt forskellige måder.

Manglende respekt

En meget mærkelig mangel, der ikke har noget at gøre med de tekniske egenskaber ved at oprette siden, men er temmelig ideologisk af natur. Sites med rammer betragtes som uværdige, og deres forfattere falder straks uden for kategorien af fagfolk, der aldrig bruger rammer i deres arbejde. Undtagelsen er chats, hvor det er muligt at undvære rammer, men at bruge ret snedige metoder, og at bruge rammer til at lave chats er ret simpelt.

Det skal bemærkes, at nogle af de ovennævnte ulemper helt kan undgås. Så ved hjælp af scripts kan du sikre dig, at et separat dokument, der åbnes i browseren, dannes med hele rammestrukturen. Søgemaskiner er også bedre til at indeksere rammedokumenter, end de var for et par år siden.