Ajax-sider. Ajax - hva er det? Asynkron JavaScript og XML: fordeler og ulemper

AJAX - Hva er det?

Når eksisterende muligheter blir liten, og det ikke er rom for å forbedre den eksisterende, så skjer et teknologisk gjennombrudd. Et slikt gjennombrudd er AJAX (Asynchronous JavaScript and XML) – en tilnærming til bygging brukergrensesnitt nettapplikasjoner, der selve nettsiden lastes inn uten å lastes på nytt behov for brukeren data. AJAX er en av komponentene i DHTML-konseptet.

Hva gir denne teknologien oss? For tiden har utviklingen av WEB-applikasjoner en tendens til å skille mellom klientdelen og serverdelen, og dette bestemmer den utbredte bruken av maler som Smarty og XSLT. Nå blir prosjektene mer komplekse og flettet sammen ulike teknologier blir for dyrt for en utviklers tid. Så for eksempel legges alle formateringsstiler inn i CSS- eller XSL-filer, HTML eller XML-data lagres i andre seksjoner, serverprosessorer i tredje seksjoner, databaser i fjerde seksjoner. Og hvis du for 5-6 år siden nesten overalt kunne se sammenvevingen av alt dette i én fil, blir dette i økende grad en sjeldenhet.

Ved utvikling av mer komplekse prosjekter er det behov for strukturert og lesbar kode. Du bør ikke rote programmererens kode med layoutdesignerens kode, og layoutdesignerens kode med designerens redigeringer, og så videre.

Det er behov for å differensiere arbeid. Så for eksempel vil en designer gjøre jobben sin, en layoutdesigner vil gjøre jobben sin, en programmerer vil gjøre jobben sin, og ingen vil forstyrre hverandre. Som et resultat vil hver prosjektdeltaker bare trenge å vite dataene han må jobbe med. I dette tilfellet øker produktiviteten til gruppen og kvaliteten på prosjektet betydelig. For øyeblikket løses dette problemet vellykket ved å bruke maler, men dette skaper også visse vanskeligheter, siden for å for eksempel koble til Smarty, må du koble til programvaremodul malbehandling, og tydelig knyttet til prosjektstrukturen. Men dette er ikke alltid mulig og krever visse kostnader. Det er litt enklere å bruke XML + XSL ettersom de gir mer funksjonalitet, men det er et alternativ, ikke noe mer. Hva om vi ser mot noe radikalt nytt som vil tillate oss å kombinere alt bedre, ved å bruke evnene til det vi har? Prøv å forestille deg JavaScript, som har alle funksjonene til PHP eller Perl, inkludert grafikk og databaser, som har mye mer praktisk utvidbarhet og praktisk, og er også på tvers av plattformer.

Så hva er AJAX? Folk begynte først å snakke om Ajax etter artikkelen fra februar 2005 av Jesse James Garrett, "A New Approach to Web Applications." Ajax er ikke en frittstående teknologi. Dette er en idé som bygger på to hovedprinsipper.

Bruke DHTML til å endre sideinnhold dynamisk.

Bruke XMLHttpRequest for å kontakte serveren på farten.

Ved å bruke disse to tilnærmingene kan du lage mye mer praktiske WEB-brukergrensesnitt på de nettsidene der aktiv brukerinteraksjon er nødvendig. Bruken av Ajax ble mest populær etter selskapet Google startet bruke den aktivt når du oppretter nettsteder, for eksempel Gmail, Google maps og Google foreslår. Opprettelsen av disse nettstedene bekreftet effektiviteten til denne tilnærmingen.

Så mer detaljert: hvis vi tar den klassiske WEB-applikasjonsmodellen:

Klienten skriver inn adressen til ressursen han er interessert i i søkefeltet, kommer til serveren og sender en forespørsel til den. Serveren utfører beregninger i samsvar med forespørselen, får tilgang til databasen og så videre, hvoretter de mottatte dataene går til klienten og om nødvendig erstattes med maler og behandles av nettleseren. Resultatet er siden vi ser, og som 80 % av landets befolkning lokalisert på WEB kaller Internett. Dette klassisk modell, som har klart å bevise seg og gjøre seg fortjent til en hederlig plass i solen. Dette er den enkleste interaksjonsmodellen og som et resultat den vanligste. Det blir imidlertid stadig mer utilstrekkelig. Se for deg et onlinespill "Battleship", som spilles av to inkarnerte venner - bosatt i Sør-Afrika og bosatt i Japan. Hvordan kan du bruke denne modellen for å gjøre spillet deres så morsomt som mulig? Uansett vil dataene til senkede skip lagres på serveren, og for å sjekke om motstanderen har feilet, vil det være nødvendig å oppdatere siden hver gang og oppdatere utdaterte data. "Men folk fant opp caching," vil du si, og du vil ha helt rett, men det vil ikke gjøre det enklere. Bufring vil bare fremskynde tiden for interaksjon med serveren, men vil ikke eliminere behovet for å laste inn siden på nytt. Alternativt kan du sette Viss tid selvoppdaterer, men i dette tilfellet vil siden lastes helt inn på nytt.

La oss nå se på AJAX-interaksjonsmodellen:

Sekvensen av klientens handlinger er bevart, og han vil mest sannsynlig ikke forstå hva som vil skje, og ordet AJAX vil bare bli assosiert med navnet på fotballklubben. Men på serversiden ser alt annerledes ut.

Når du får tilgang til serveren, genereres en side som vises til brukeren og ber ham om å utføre en sekvens av handlinger som interesserer ham. Med et bevisst (men ikke nødvendigvis) valg av klienten, vil hans forespørsel kontakte AJAX-modulen, som vil utføre alle beregningene han er interessert i og jobbe med serveren som sådan. Men hva er nytt? Hovedforskjellen er at denne metoden gir oss muligheten til å dynamisk få tilgang til serveren og utføre handlinger som interesserer oss. For eksempel må vi få tilgang til databasen og få de dataene vi er interessert i, som vi deretter skal bruke. Vi vil lagre dataene i en XML-fil som vil bli generert dynamisk, slik:

Vi skaper nytt objekt JavaScript:

Var req = new ActiveXObject("Microsoft.XMLHTTP"); (for IE) var req = new XMLHttpRequest(); (For alt annet)

Så skriver vi en funksjon som bruker dette objektet

Var req; funksjon loadXMLDoc(url) ( // gren for native XMLHttpRequest-objekt if (window.XMLHttpRequest) (req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send( null); // gren for IE/Windows ActiveX-versjon ) else if (window.ActiveXObject) (req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) (req.onreadystatechange = processReqChange; req.open("GET ", url, true); req.send(); ) ) )

Tele HTML-fil vi skriver et manus som vil:

Funksjon checkName(input, response) ( if (respons != "")( // Response mode message = document.getElementById("nameCheckFailed"); if (respons == "1")( message.className = "error"; )else( message.className = "hidden"; ) )else( // Input mode url = "http://localhost/xml/checkUserName.php?q=" \\ + input; loadXMLDoc(url); ) )

I filen localhost/xml/checkUserName.php behandler vi dataene mottatt fra kommandolinje V i dette tilfellet i variabelen q. Og vi lagrer resultatet i en XML-struktur, som vi lagrer i samme fil. På denne måten kan vi motta og behandle data hentet fra databasen, eller noe annet vi trenger. I tillegg vil serveren kun behandle dataene vi trenger å oppdatere, og ikke hele siden hvis den lastes inn på nytt.

La oss nå gå tilbake til de to vennene - elskere sjøslag: Med tanke på utseendet til denne innovasjonen kan vi gjøre følgende: sjekke den hvert tredje sekund XML-fil denne sjekken innebærer å sjekke databasen for Ny inngang, det vil si trekket gjort av motstanderen. Hvis et trekk er gjort, synker siden skip uten å starte på nytt, og ødelegger dermed stemningen til deltakerne i vannkamper. Denne funksjonaliteten oppnås av elementær bruker Javascript og stilark. Dette eksemplet er ganske tydelig, men langt fra fullstendig; anvendelsen av denne teknologien er mye mer betydningsfull.

Imidlertid er ikke alt så enkelt. La oss nå se på de negative egenskapene.

For det første kan vi bare overføre data GET metoden, derfor vil store mengder data måtte stå i fred. Dette problemet har allerede blitt tatt opp mer enn en gang i forskjellige kilder, men mine herrer, det er informasjonskapsler, som er ganske akseptable i tilfeller av overføring av større data enn en GET-forespørsel kan ta imot, og Javascript har på sin side funksjoner for å jobbe med dem.

Det andre problemet er kompatibilitet på tvers av nettlesere. XMLHttpRequest-objektet er ennå ikke en del av noen standard (selv om noe lignende allerede er foreslått i W3C DOM Level 3 Load and Save-spesifikasjonen). Derfor er det to forskjellige metoder for å kalle dette objektet i skriptkode. I Internet Explorer kalles ActiveX-objektet slik:

Var req = new ActiveXObject("Microsoft.XMLHTTP");

I Mozilla og Safari er dette enklere (siden det er et objekt innebygd i JavaScript):

Var req = new XMLHttpRequest();

Alle moderne nettlesere støtter dette objektet og problemer vil kun oppstå for 1,8 % av brukerne (ifølge statistikk fra SpyLog) som bruker svært gamle versjoner av nettlesere som ikke støtter dette objektet.

Og til slutt, sikkerhet. La oss se nærmere på dette. Hovedproblemet er at alle data og originalen JavaScript-kode funksjoner kan sees ved å se kildekoden til siden; følgelig kan en angriper spore logikken til forespørselsutførelse og, under et bestemt sett av omstendigheter, utføre settet med kommandoer han trenger. Dette spiller ingen spesiell rolle når vi har det er enkelt datasammenligning, men hva du skal gjøre i mer vanskelige situasjoner, for eksempel under autorisasjon, og hvordan du overfører passord i dette tilfellet. Som nevnt ovenfor kommer informasjonskapsler til unnsetning. De nødvendige dataene kan sendes ved hjelp av dem, og de kan også behandles. La oss ta et eksempel der brukeren vil bli autentisert ved hjelp av teknologien som artikkelen er viet til.

Når vi genererer en side, genererer vi unike verdier, som vi deretter plasserer i servervariabler. Og i Nettleserinformasjonskapsler, så under autorisasjonen mottar vi brukernavnet og passordet, som vi må sende til behandlingsmodulen på serveren.

Etter at brukeren har lagt inn data og trykket på Send-knappen, legges passordet inn i informasjonskapsler, og brukernavnet overføres åpent - med en lenke for eksempel http://www.mubestajax.com/ajax.php?login=pupkin ved mottak av dataene, utfører serveren først av alt avstemming av de mottatte dataene. Siden verdiene som vi genererte fra starten av serveren og deretter sendte dem til de globale servervariablene og informasjonskapslene må samsvare, når vi sjekker integriteten til de overførte dataene, i tilfelle feil, slutter programmet å fungere. Hvis alt gikk bra, trekkes alle nødvendige data ut og nødvendige beregninger og arbeid utføres. Denne beskyttelsesmetoden er ganske enkel og effektiv. Men det egner seg ikke for store prosjekter.

Når sikkerhet kommer i forgrunnen, er det bedre å bruke mer komplekse og pålitelige løsninger. Men i de fleste tilfeller vil disse forholdsreglene være mer enn nok, siden bruk av mer komplekse moduler innebærer bruk av teknologier som ikke alltid er en del av standarden programvare moderne servere, hvor hovedtrekket er enkelhet. Dette er grunnen til at teknologier som MySQL og PHP har blitt veldig utbredt, fordi... de gir enkel betjening med lavt ressursforbruk og tilstrekkelig pålitelighet. Og innenfor rammen av denne programvaren er det umulig ville vært bedre egnet løsningen foreslått ovenfor.

Avslutningsvis vil jeg si at AJAX på den ene siden er et stort sprang innen WEB-teknologi, men på den andre siden er det et forlenget utviklingsstadium som har åpnet nye horisonter innen programvareutvikling. . Samtidig er denne teknologien fortsatt ganske "rå" siden bruken er begrenset til dette øyeblikket snarere et hyggelig unntak. Men jeg er sikker på at alle vil høre om det mer enn en gang.

AJAX er et akronym som står for Asynchronous Javascript og XML. Faktisk er ikke AJAX det ny teknologi siden både Javascript og XML har eksistert ganske lenge lang tid, og AJAX er en syntese av de angitte teknologiene. AJAX er oftest assosiert med begrepet Web 2.0 og er utpekt som den nyeste webapplikasjonen.

På bruker AJAX det er ikke nødvendig å oppdatere hele siden hver gang, siden bare en spesifikk del av den oppdateres. Dette er mye mer praktisk, siden du ikke trenger å vente lenge, og mer økonomisk, siden ikke alle har det ubegrenset internett. Riktignok må utvikleren i dette tilfellet sørge for at brukeren er klar over hva som skjer på siden. Dette kan implementeres ved hjelp av belastningsindikatorer, tekstmeldinger at data utveksles med serveren. Du må også forstå at ikke alle nettlesere støtter AJAX (eldre versjoner av nettlesere og tekstnettlesere). Pluss Javascript kan deaktiveres av brukeren. Derfor bør man ikke misbruke bruken av teknologi og ty til alternative metoder presentasjon av informasjon på nettsiden.

La oss oppsummere fordelene med AJAX:

Evne til å lage et praktisk webgrensesnitt
Aktiv brukerinteraksjon
Brukervennlighet

AJAX bruker to metoder for å jobbe med en nettside: endre nettsiden uten å laste den på nytt, og dynamisk kontakt med serveren. Den andre kan gjøres på flere måter, spesielt XMLHttpRequest, som vi skal snakke om, og ved hjelp av hidden frame-teknikken.

For å utveksle data må det opprettes et XMLHttpRequest-objekt på siden, som er en slags mellomledd mellom brukerens nettleser og serveren (fig. 1). Ved hjelp av XMLHttpRequest kan du sende en forespørsel til serveren og også motta svar i form av ulike typer data.

Det er to måter å utveksle data med serveren på. Den første metoden er en GET-forespørsel. I denne forespørselen får du tilgang til et dokument på serveren, og sender argumentene gjennom selve URL-en. I dette tilfellet vil det på klientsiden være logisk å bruke Javascript escape-funksjonen slik at noen data ikke avbryter forespørselen.

Klientdelen, skrevet i Javascript, må gi nødvendig funksjonalitet for sikker utveksling med serveren og gi metoder for utveksling av data på noen av de ovennevnte måtene. Serverdelen må behandle inndataene, og basert på den generere ny informasjon (for eksempel arbeide med en database), og sende den tilbake til klienten. For eksempel, for å be om informasjon fra serveren, kan du bruke en vanlig GET-forespørsel med overføring av flere små parametere, men for å oppdatere informasjon eller legge til ny informasjon, må du bruke en POST-forespørsel, siden den lar deg overføre store mengder data.

Som allerede nevnt, bruker AJAX asynkron dataoverføring. Dette betyr at mens dataene overføres, kan brukeren utføre andre nødvendige handlinger. På dette tidspunktet bør brukeren varsles om at en form for datautveksling finner sted, ellers vil brukeren tro at noe galt har skjedd og kan forlate nettstedet, eller kalle opp funksjonen som han tror er "frosset" på nytt. Indikasjon under datautveksling Webapplikasjon 2.0 spiller veldig bra viktig rolle: Besøkende er kanskje ikke vant til denne måten å oppdatere siden på ennå.

Svaret fra serveren kan ikke bare være XML, slik navnet på teknologien antyder. I tillegg til XML kan du motta svaret i ren tekst, eller JSON (Javascript Object Notation). Hvis det ble mottatt svar i ren tekst, så kan den umiddelbart vises i en beholder på siden. Når du mottar et svar i form av XML, blir det mottatte svaret vanligvis behandlet XML-dokument på klientsiden og konvertere data til (X)HTML. Ved mottak av svar i JSON-format trenger klienten kun å utføre den mottatte koden (Javascripts eval-funksjon) for å få et fullverdig Javascript-objekt. Men her må du være forsiktig og ta hensyn til det faktum at bruk av denne teknologien kan overføres ondsinnet kode, derfor, før du kjører koden mottatt fra serveren, bør den kontrolleres og behandles nøye. Det er en slik praksis som en "tomgangs"-forespørsel, der ingen svar mottas fra serveren, bare dataene på serversiden endres.

I forskjellige nettlesere Dette objektet har forskjellige egenskaper, men generelt er det det samme.

XMLHttpRequest-objektmetoder

Merk at metodenavnene er skrevet i samme stil (Camel-stil) som de andre Javascript-funksjoner. Vær forsiktig når du bruker dem.

avbryte()- avbryte gjeldende forespørsel til serveren.

getAllResponseHeaders()- få alle svarhoder fra serveren.

getResponseHeader("header_name")- få den angitte overskriften.

open("request_type", "URL", "asynkron", "brukernavn", "passord")- initialisere en forespørsel til serveren, spesifisere forespørselsmetoden. Forespørselstype og URL - nødvendige parametere. Det tredje argumentet er en boolsk verdi. Vanligvis er sant alltid spesifisert eller ikke spesifisert i det hele tatt (standard er sant). Det fjerde og femte argumentet brukes for autentisering (det er veldig usikkert å lagre autentiseringsdata i et skript, siden skriptet kan sees av enhver bruker).

send("innhold")- send HTTP-forespørsel til serveren og motta et svar.

setRequestHeader("header_name", "verdi")- angi forespørselshodeverdier.

Egenskaper for XMLHttpRequest-objektet

klar til å endres- en av de viktigste egenskapene til XMLHttpRequest-objektet. Ved å bruke denne egenskapen spesifiseres en behandler som kalles opp hver gang statusen til et objekt endres.

klarState- et tall som indikerer objektets status.

svartekst- representasjon av serverresponsen som ren tekst (streng).

responsXML- et DOM-kompatibelt dokumentobjekt mottatt fra serveren.

status- status for svaret fra serveren.

statustekst- tekstrepresentasjon av responsstatus fra serveren.

Du bør se nærmere på readyState-egenskapen:

0 - Objektet er ikke initialisert.
1 - Objektet laster inn data.
2 - Objektet har lastet inn data.
3 - Objektet er ikke fullt lastet, men kan samhandles med av brukeren.
4 - Objektet er fullstendig initialisert; et svar ble mottatt fra serveren.

Det er basert på beredskapstilstanden til objektet at du kan gi den besøkende informasjon om hvilket stadium prosessen med datautveksling med serveren er på og eventuelt varsle ham om dette visuelt Opprette et XMLHttpRequest-objekt

Som nevnt ovenfor er det en unik prosess å lage dette objektet for hver type nettleser.

For å lage et objekt i Gecko-kompatible nettlesere, Konqueror og Safari, må du for eksempel bruke følgende uttrykk:

Var Request = new XMLHttpRequest();

Og for Internet Explorer brukes følgende:

Var Request = new ActiveXObject("Microsoft.XMLHTTP");

Var Request = new ActiveXObject("Msxml2.XMLHTTP");

Nå, for å oppnå kompatibilitet på tvers av nettlesere, må du kombinere alle funksjonene til én:

Funksjon CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-kompatible nettlesere, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( // Internet Explorer try ( Request = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Kan ikke opprette XMLHttpRequest"); ) returforespørsel; )

Etter alt dette kan du lage dette objektet og ikke bekymre deg for ytelsen på populære nettlesere. Men du kan lage et objekt i forskjellige steder. Hvis du lager det globalt, så i bestemt øyeblikk Om gangen vil kun én forespørsel til serveren være mulig. Du kan opprette et objekt hver gang en forespørsel sendes til serveren (dette vil nesten løse problemet fullstendig).

Forespørsel til serveren

Serverforespørselsalgoritmen ser slik ut:

Kontrollerer eksistensen av XMLHttpRequest.
Initialiserer en tilkobling til serveren.
Sender en forespørsel til serveren.
Behandling av mottatte data.

For å opprette en forespørsel til serveren vil vi lage en liten funksjon som vil kombinere funksjonaliteten for GET- og POST-forespørsler.

/* Funksjon for å sende en forespørsel til en fil på serveren r_method - forespørselstype: GET eller POST r_path - bane til filen r_args - argumenter som a=1&b=2&c=3... r_handler - funksjon som håndterer svaret fra server */ function SendRequest(r_method, r_path, r_args, r_handler) ( //Create a request var Request = CreateRequest(); //Sjekk eksistensen av forespørselen på nytt hvis (!Request) ( return; ) //Tildel en tilpasset handler Request.onreadystatechange = function() ( // Hvis datautvekslingen er fullført if (Request.readyState == 4) ( //Pass kontroll til brukerbehandleren r_handler(Request); ) ) //Sjekk om det er nødvendig å lag en GET-forespørsel hvis (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Initialiser tilkoblingen Request.open(r_method, r_path, true); if ( r_method.toLowerCase() == "post") ( //Hvis dette er POST- request //Angi overskriften Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Send forespørselen Request.send(r_args); ) else ( //Hvis dette er en GET-forespørsel //Send en nullforespørsel Request.send(null); ) )

Det har blitt mye enklere å opprette en forespørsel. La oss for eksempel skrive en funksjon som vil motta innholdet i en fil på serveren og sende den til en container.

Funksjon ReadFile(filnavn, container) ( //Create a handler function var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Send forespørselen SendRequest("GET",filename," ", Behandler);)

Dette er hvordan interaksjon med serveren oppstår.

Behandler svaret

I forrige eksempel laget vi en forespørselsfunksjon til serveren. Men det er i hovedsak utrygt, siden vi ikke behandler tilstanden til objektet og tilstanden til svaret fra serveren.

La oss legge til koden vår slik at den kan vise en visuell melding om lasteprosessen.

Request.onreadystatechange = function() ( //Hvis datautvekslingen er fullført if (Request.readyState == 4) ( //Pass kontroll til brukerbehandleren r_handler(Request); ) else ( //Varsle brukeren om nedlastingen )) ...

Som du allerede vet, lar XMLHttpRequest-objektet deg vite statusen til svaret fra serveren. La oss benytte oss av denne muligheten.

Request.onreadystatechange = function() ( //Hvis datautveksling er fullført if (Request.readyState == 4) ( if (Request.status == 200) ( //Pass kontroll til brukerbehandleren r_handler(Request); ) else ( // Vi varsler brukeren om feilen som oppsto) ) else ( //Varsle brukeren om nedlastingen ) ) ...

Alternativer for serversvar

Du kan motta flere typer data fra serveren:

Ren tekst

Hvis du mottar ren tekst, kan du umiddelbart sende den til beholderen, det vil si til utgangen. Når du mottar data som XML, må du behandle dataene ved hjelp av DOM-funksjoner, og presentere resultatet ved hjelp av HTML.

JSON er Javascript-objektnotasjon. Med dens hjelp kan du representere et objekt som en streng (her kan du gi en analogi med serialiseringsfunksjonen). Når du mottar JSON-data, må du kjøre dem for å få en komplett Javascript-objekt og utføre de nødvendige operasjonene med den. Vær oppmerksom på at slik dataoverføring og utførelse ikke er sikker. Du må holde styr på hva som kommer inn for utførelse.

Eksempel på JSON-kode:
( "data": ( "misc": [ ( "name" : "JSON element one", "type" : "Subheading 1"), ( "name" : "JSON element to", "type" : " Undertittel 2 ") ] ))

Når du mottar en slik kode, utfør følgende handling:

Var responsedata = eval("(" + Request.responseText + ")")

Etter å ha utført denne koden, vil objektet være tilgjengelig for deg svardata.

Arbeide med programmeringsspråk på serversiden

Denne typen arbeid er ikke forskjellig fra vanlig arbeid. For eksempel tar jeg PHP som språk på serversiden. Ingenting har endret seg på klientsiden, men serversiden er nå representert av en PHP-fil.

Av tradisjon, la oss starte med hilsener til vår fantastiske verden:

Ekko "Hei, verden!";

Når du får tilgang til denne filen, vil strengen Hello, World bli returnert til klienten. Som du kan forestille deg, representerer dette de bredeste mulighetene for byggeapplikasjoner. Ved å sende argumenter når du kaller serveren ved hjelp av XMLHttpRequest, kan du parameterisere utdataene, og dermed gi omfattende funksjonalitet til webapplikasjonen.

I tillegg til PHP kan du bruke et hvilket som helst annet programmeringsspråk på serversiden.

I dag foregår det en veldig aktiv utvikling (og til og med bruk) av nye teknologier på Internett. En slik teknologi er AJAX.

Hva er AJAX?

AJAX er et akronym som står for Asynchronous Javascript og XML. Faktisk er AJAX ikke en ny teknologi, siden både Javascript og XML har eksistert i ganske lang tid, og AJAX er en syntese av de utpekte teknologiene. AJAX er oftest assosiert med begrepet Web 2.0 og er utpekt som den nyeste webapplikasjonen.

Når du bruker AJAX, er det ikke nødvendig å oppdatere hele siden hver gang, siden bare en spesifikk del av den oppdateres. Dette er mye mer praktisk, siden du ikke trenger å vente lenge, og mer økonomisk, siden ikke alle har ubegrenset Internett. Riktignok må utvikleren i dette tilfellet sørge for at brukeren er klar over hva som skjer på siden. Dette kan implementeres ved å bruke lasteindikatorer og tekstmeldinger som indikerer at data utveksles med serveren. Du må også forstå at ikke alle nettlesere støtter AJAX (eldre versjoner av nettlesere og tekstnettlesere). Pluss Javascript kan deaktiveres av brukeren. Derfor bør man ikke misbruke bruken av teknologi og ty til alternative metoder for å presentere informasjon på et nettsted.

La oss oppsummere fordelene med AJAX:

Evne til å lage et praktisk webgrensesnitt
Aktiv brukerinteraksjon
Brukervennlighet

Datautveksling

Som allerede nevnt, bruker AJAX asynkron dataoverføring. Dette betyr at mens dataene overføres, kan brukeren utføre andre nødvendige handlinger. På dette tidspunktet bør brukeren varsles om at en form for datautveksling finner sted, ellers vil brukeren tro at noe galt har skjedd og kan forlate nettstedet, eller kalle opp funksjonen som han tror er "frosset" på nytt. Indikasjon under kommunikasjon i en Web 2.0-applikasjon spiller en veldig viktig rolle: besøkende er kanskje ennå ikke vant til denne måten å oppdatere siden på.

Svaret fra serveren kan ikke bare være XML, slik navnet på teknologien antyder. I tillegg til XML kan du motta svaret i ren tekst, eller JSON (Javascript Object Notation). Hvis svaret ble mottatt i enkel tekst, kan det umiddelbart vises i en beholder på siden. Ved mottak av svar i form av XML blir det mottatte XML-dokumentet vanligvis behandlet på klientsiden og dataene konverteres til (X)HTML. Ved mottak av svar i JSON-format trenger klienten kun å utføre den mottatte koden (Javascripts eval-funksjon) for å få et fullverdig Javascript-objekt. Men her må du være forsiktig og ta hensyn til det faktum at ondsinnet kode kan overføres ved hjelp av denne teknologien, så før du utfører koden mottatt fra serveren, bør du sjekke og behandle den nøye. Det er en slik praksis som en "tomgangs"-forespørsel, der ingen svar mottas fra serveren, bare dataene på serversiden endres.

I forskjellige nettlesere har dette objektet forskjellige egenskaper, men generelt er det det samme.

XMLHttpRequest-objektmetoder

Merk at metodenavnene er skrevet i samme Camel-stil som andre Javascript-funksjoner. Vær forsiktig når du bruker dem.

abort() - avbryter gjeldende forespørsel til serveren.

getAllResponseHeaders() - få alle svarhoder fra serveren.

getResponseHeader("header_name") - hent den angitte overskriften.

open("request_type","URL","asynkron","brukernavn","passord") - initialiserer en forespørsel til serveren, spesifiserer forespørselsmetoden. Forespørselstype og URL er obligatoriske parametere. Det tredje argumentet er en boolsk verdi. Vanligvis er sant alltid spesifisert eller ikke spesifisert i det hele tatt (standard er sant). Det fjerde og femte argumentet brukes for autentisering (det er veldig usikkert å lagre autentiseringsdata i et skript, siden skriptet kan sees av enhver bruker).

send("innhold") - send en HTTP-forespørsel til serveren og motta et svar.

setRequestHeader("header_name","value") - angi forespørselshodeverdiene.

Egenskaper for XMLHttpRequest-objektet

onreadystatechange er en av de viktigste egenskapene til XMLHttpRequest-objektet. Ved å bruke denne egenskapen spesifiseres en behandler som kalles opp hver gang statusen til et objekt endres.

readyState er et tall som indikerer statusen til objektet.

responseText — representasjon av serversvaret som ren tekst (streng).

responseXML er et DOM-kompatibelt dokumentobjekt mottatt fra serveren.

status — status for svaret fra serveren.

statusText — tekstrepresentasjon av statusen til svaret fra serveren.

Du bør se nærmere på readyState-egenskapen:

0 — Objektet er ikke initialisert.
1 - Objektet laster inn data.
2 — Objektet har lastet inn data.
3 - Objektet er ikke fullt lastet, men kan samhandles med av brukeren.
4 — Objektet er fullstendig initialisert; et svar ble mottatt fra serveren.

Det er basert på beredskapstilstanden til objektet at du kan gi den besøkende informasjon om hvilket stadium prosessen med datautveksling med serveren er på, og muligens varsle ham om dette visuelt.

Opprette et XMLHttpRequest-objekt

Som nevnt ovenfor er det en unik prosess å lage dette objektet for hver nettlesertype.

For å lage et objekt i Gecko-kompatible nettlesere, Konqueror og Safari, må du for eksempel bruke følgende uttrykk:

var Request = new XMLHttpRequest();

Og for Internet Explorer brukes følgende:

var Request = new ActiveXObject("Microsoft.XMLHTTP");

var Request = new ActiveXObject("Msxml2.XMLHTTP");

Nå, for å oppnå kompatibilitet på tvers av nettlesere, må du kombinere alle funksjonene til én:

funksjon CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-kompatible nettlesere, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Cannot create XMLHttpRequest"); ) return Request; )

Etter alt dette kan du lage dette objektet og ikke bekymre deg for ytelsen på populære nettlesere. Men du kan lage et objekt på forskjellige steder. Hvis du oppretter det globalt, vil bare én forespørsel til serveren være mulig på et bestemt tidspunkt. Du kan opprette et objekt hver gang en forespørsel sendes til serveren (dette vil nesten løse problemet fullstendig).

Forespørsel til serveren

Serverforespørselsalgoritmen ser slik ut:

Kontrollerer eksistensen av XMLHttpRequest.
Initialiserer en tilkobling til serveren.
Sender en forespørsel til serveren.
Behandling av mottatte data.

For å opprette en forespørsel til serveren vil vi lage en liten funksjon som vil kombinere funksjonaliteten for GET- og POST-forespørsler.

Det har blitt mye enklere å opprette en forespørsel. La oss for eksempel skrive en funksjon som vil motta innholdet i en fil på serveren og sende den til en container.

function ReadFile(filename, container) ( //Create a handler function var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Send forespørselen SendRequest("GET",filename," ", Behandler);)

Dette er hvordan interaksjon med serveren oppstår.

Behandler svaret

I forrige eksempel laget vi en forespørselsfunksjon til serveren. Men det er i hovedsak utrygt, siden vi ikke behandler tilstanden til objektet og tilstanden til svaret fra serveren.

La oss legge til koden vår slik at den kan vise en visuell melding om lasteprosessen.

Som du allerede vet, lar XMLHttpRequest-objektet deg vite statusen til svaret fra serveren. La oss benytte oss av denne muligheten.

Serverresponsalternativer

Du kan motta flere typer data fra serveren:

Ren tekst

JSON er Javascript-objektnotasjon. Med dens hjelp kan du representere et objekt som en streng (her kan du gi en analogi med serialiseringsfunksjonen). Når du mottar JSON-data, må du kjøre dem for å få et fullstendig Javascript-objekt og utføre de nødvendige operasjonene på det. Vær oppmerksom på at slik dataoverføring og utførelse ikke er sikker. Du må holde styr på hva som kommer inn for utførelse.

Denne artikkelen beskriver AJAX på funksjons- og eksempelnivå. Funksjonene ved asynkron interaksjon og eksempler på bruk vurderes, men med et minimum av tekniske detaljer.

Jeg håper det vil være nyttig for å forstå hva AJAX er og hva det brukes til.

Hva er AJAX? Eksempelimplementering.

AJAX, eller lenger, EN synkron J avascript EN nd X ml er en teknologi for å samhandle med serveren uten å laste inn sider på nytt.

På grunn av dette reduseres responstiden og webapplikasjonen minner mer om en desktop når det gjelder interaktivitet.

AJAX-teknologi, som den første bokstaven A i navnet indikerer, er asynkron, det vil si at nettleseren, etter å ha sendt en forespørsel, kan gjøre hva som helst, for eksempel vise en melding
om å vente på svar, bla på siden osv.

Her er knappekoden i eksemplet ovenfor:

Når den klikkes, kaller den opp stemmefunksjonen, som sender en forespørsel til serveren, venter på svar og viser deretter en melding om det i div under knappen:

Serversvaret vil være her

For å utveksle data med serveren brukes et spesielt XmlHttpRequest-objekt, som kan sende en forespørsel og motta et svar fra serveren. Du kan lage et slikt objekt på tvers av nettlesere, for eksempel slik:

Funksjon getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) returner xmlhttp; )

Du kan lese mer om detaljene rundt implementering av AJAX ved bruk av XmlHttpRequest og andre transporter i avsnittet om kommunikasjon med serveren.

Vi vil ikke dvele ved dette her og gå rett til stemmefunksjonen:

// javascript stemmekode fra eksempelfunksjonen vote() ( // (1) opprette et objekt for en forespørsel til serveren var req = getXmlHttp() // (2) // span ved siden av knappen // den vil vise utførelsesfremdriften var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange aktiveres når serversvaret mottas if (req.readyState == 4) ( // hvis forespørselen er fullført utfører statusElem.innerHTML = req.statusText / / vis status (Ikke funnet, OK..) if(req.status == 200) ( // hvis statusen er 200 (OK) - gi et svar på brukervarselet(" Serversvar: "+req.responseText); ) // her kan du legge til annet med forespørselsfeilhåndtering ) ) // (3) angi tilkoblingsadressen req.open("GET", "/ajax_intro/vote.php", true); // forespørselsobjektet er forberedt: adressen er spesifisert og onreadystatechange-funksjonen opprettes / / for å behandle serversvaret // (4) req.send(null); // send forespørselen // (5) statusElem.innerHTML = "Venter på serversvar..." )

Gjennomføringsflyten som brukes ved avstemning er ganske typisk og ser slik ut:

Funksjonen lager et XmlHttpRequest-objekt

tilordner serverresponsbehandleren til onreadystatechange

åpner forbindelse åpen

sender en forespørsel ved å bruke sendeanropet (serversvaret mottas av onreadystatechange-funksjonen, som utløses asynkront)

viser den besøkende en prosessstatusindikator

Serverbehandleren som AJAX-forespørselen er adressert til (i eksemplet er dette vote.php) er i hovedsak ikke forskjellig fra en vanlig side. AJAX-forespørselen sendt av XmlHttpRequest er ikke forskjellig fra en vanlig forespørsel.

Det er bare at teksten som serveren returnerer ikke vises som HTML, men leses og behandles av onreadystatechange-funksjonen.

Meningen med AJAX er å integrere teknologier

AJAX-teknologien bruker en kombinasjon av:

(X)HTML, CSS for presentasjon og styling av informasjon
DOM-modell, operasjoner som utføres av javascript på klientsiden for å gi dynamisk visning og interaksjon med informasjon
XMLHttpRequest for asynkron kommunikasjon med en webserver. I noen AJAX-rammeverk og i noen situasjoner brukes en IFrame, SCRIPT-tag eller annen lignende transport i stedet for XMLHttpRequest.
JSON brukes ofte til datautveksling, men alle formater vil fungere, inkludert rik HTML, tekst, XML og til og med noen EBML

En typisk AJAX-applikasjon består av minst to deler.

Den første kjører i nettleseren og er vanligvis skrevet i JavaScript, og den andre er på serveren og er skrevet for eksempel i Ruby, Java eller PHP.

Data utveksles mellom disse to delene via XMLHttpRequest (eller annen transport).

Hva kan jeg gjøre med AJAX?

Poenget med AJAX er interaktivitet og rask responstid.

Små kontroller

Først av alt er AJAX nyttig for små elementer knyttet til grunnleggende handlinger: legg til i handlekurven, abonner, etc.

Dynamisk lasting av data fra serveren.

For eksempel et tre hvis noder lastes når de utvides.

På det tidspunktet det dukket opp, var det den eneste åpne postvesen bruker AJAX for følgende funksjoner.

Sjekker inndatafeil FØR innsending
Brukernavnet sendes til serveren, og resultatet av kontrollen returneres til siden.
"Øyeblikkelig" nedlasting
Nettleseren kontakter kun serveren for data, i stedet for å oppdatere hele det tungvinte grensesnittet
Automatisk "levering" av brev til åpen mappe
Fra tid til annen sendes en forespørsel til serveren og hvis det kommer nye brev, dukker de opp i nettleseren.
Autofullføring
Det er nok å skrive inn de første bokstavene i mottakerens navn, og resten fullføres automatisk, som i skrivebordsapplikasjoner.

Resultat: utbredt popularitet, stor etterspørsel etter kontoer siden åpning.

Synkron modell VS Asynkron modell

I konvensjonell programmering er alle operasjoner synkrone, det vil si at de utføres etter hverandre.

Relativt sett opptrer vi slik:

kaste en fiskestang

venter på at den skal bite

bit - slå på spinnestangstrammingen

Med den asynkrone tilnærmingen:

vi henger en spesiell bittdetektor på fiskestanga, ber den trekke i spinnestangen når den biter

kaste en fiskestang

vi gjør andre ting

bittdetektoren utløses, og utløser tilbaketrekkingen av spinnestangen

Det vil si at i det synkrone tilfellet tiltrekker fiskestanga hele tiden vår oppmerksomhet. Å fange fisk er en sekvensiell prosess.

I den asynkrone versjonen satte vi først programmet for hva vi skulle gjøre ved biting, og senket så fiskestanga for å fange og gikk til andre ting.
For eksempel installerte vi 5 slike fiskestenger til.

Asynkron programmering er vanskeligere enn synkron programmering, og til å begynne med er det uvanlig, fordi det på forhånd hva som vil fungere er gitt etter.
Det vil si at programmet «hva du skal gjøre når den biter» må stilles inn før bittet inntreffer, og det er generelt ukjent om det er fisk i reservoaret.

Det finnes teknikker som gjør asynkron programmering enklere, for eksempel Deferred-objektet (Twisted, Dojo, Mochikit), men dette vil bli diskutert i en egen artikkel.

Synkron og asynkron modell i AJAX

La oss gå tilbake til sauene våre: nettleseren, serveren og for eksempel databasen.

I den synkrone modellen sender nettleseren en forespørsel til serveren og henger og venter på at den skal fullføre alt. nødvendig arbeid. Serveren utfører spørringer til databasen, pakker svaret inn nødvendig format og tar ham ut. Nettleser. Etter å ha mottatt svaret, kaller den opp showfunksjonen.

Alle prosesser utføres sekvensielt, en etter en.

Nettverksforsinkelser er inkludert i ventetiden, angitt i grått i diagrammet.

Brukeren kan ikke gjøre noe annet på samme side mens synkrone data utveksles.

I den asynkrone modellen sendes forespørselen ("beten er satt"), og du kan gå videre til noe annet. Når forespørselen er fullført ("becked") - lanseres den på forhånd
en funksjon utarbeidet av programmereren ("trekk opp spinnestangen") for å vise en servermelding.

Her gir serveren umiddelbart beskjed til nettleseren om at forespørselen er akseptert for behandling og frigir den for behandling. videre arbeid. Når svaret er klart, vil serveren videresende det, og den tilsvarende visningsfunksjonen kalles opp på nettleseren, men mens dette svaret blir generert og sendt, er nettleseren gratis.

Brukeren kan skrive kommentarer, fylle ut og sende inn skjema osv.: Nye asynkrone forespørsler kan gjøres.

Den asynkrone modellen er preget av en nesten øyeblikkelig respons på brukerhandlinger, slik at applikasjonen føles praktisk og rask.

På grunn av dette gapet mellom handlingen og det faktiske resultatet, blir applikasjonen mye mer utsatt for feil.

Spesielt i tilfelle av flere samtidige asynkrone forespørsler, må du ta vare på rekkefølgen for utførelse og respons (race-betingelser) og, i tilfelle feil, la programmet være i en konsistent tilstand.

Funksjoner av den asynkrone modellen

Vanskelig å gjennomføre
- Utilstrekkelige nettleserfunksjoner (javascript)
- Den asynkrone modellen er vanskeligere å feilsøke
Løpsforhold
- Udefinert utførelsessekvens
- Du kan gjøre mange samtidige oppgaver ("fiskestenger"), men oppgaven som ble startet først, kan ende sist.
Reaksjonen er umiddelbar, men det er ukjent hva resultatet blir. Feilhåndtering er mer komplisert
- Kommunikasjonsfeil - frakobling osv.
- Brukerfeil - for eksempel var det ikke nok privilegier
Integritetskontroll (feilsikker)
- For eksempel sendte redaktøren en asynkron forespørsel om å slette en tregren. Legging til det må være deaktivert til serversvaret kommer. Hvis det plutselig ikke var nok privilegier, mislyktes operasjonen.
Interaktivitet
Rask grensesnitt

Det er bare to fordeler, men hvilke fordeler! Spillet er verdt lyset.

Asynkron drag"n"drop.

Noen ganger for asynkrone operasjoner det er nødvendig å gjøre forskjellige "finter med ørene." For eksempel vil du gjøre en drag"n"drop i et tre, det vil si å dra artikler fra en seksjon til en annen med musen, og slik at de endrer overordnet på serveren i databasen.

Dra "n" slipp - dette er "tok museobjektet - legg det der det skal - ferdig." Men i den asynkrone modellen kan ikke alt være "klart" med en gang.
Du må sjekke privilegiene på serveren, sjekke om objektet fortsatt eksisterer, i tilfelle en annen bruker slettet det.

Vi må på en eller annen måte vise at prosessen har startet, men resultatet blir "hva som vil skje...". Men som? I den asynkrone modellen kan ikke musepekeren bare sveve over et objekt og bli til en klokke.

I dette tilfellet bruker de enten synkrone forespørsler til serveren – og da fryser virkelig alt, eller den opprinnelige løsningen er å sette objektet som om det var overført og informere med et animert ikon om at et svar venter.
Hvis svaret er negativt, overfører responsbehandleren objektet tilbake.

Foreldet kontekst, utdatert kontekst

Eksemplet med drag"n"drop berører også problemet med "stale kontekst" - utdatert kontekst.

Web er et flerbrukermiljø. Hvis det brukes til navigasjon,
La oss si et tre med artikler, så jobber mange med det. En av dem kan slette en tregren som den andre jobber med: konflikt.

Som regel brukes følgende midler for å overvinne slike hendelser:

Redigeringspolicy

Dette er når alle vet hvem som gjør hva, og på nivået for maktfordeling og personlig kommunikasjon avtales slike slettinger. Dette alternativet er åpenbart utrygt, men fungerer vanligvis.

Låsing og/eller versjonskontroll

Låsing - blokkering av redigerte dokumenter.

Versjonskontroll – alle nytt dokument blir en versjon slik at endringer aldri går tapt. Versjonsbehandling medfører konflikter da Petya begynte å redigere dokumentet før Vasya, og lagret det senere. Samtidig, i siste versjon Vasyas endringer gikk tapt, selv om den nest siste (Vasyas) versjon definitivt er i systemet.

Du kan lese mer om låsing og versjonskontroll for eksempel i dokumentasjonen til Subversion versjonskontrollsystem.

Automatisk kontekstoppdatering

Problemet med utdatert innhold kan løses 99 % med umiddelbar automatisk oppdatering.

Nettleseren holder permanent tilkobling med serveren (eller kommer med korrigerende forespørsler fra tid til annen) - og de nødvendige endringene sendes gjennom denne kanalen.

Noen ganger lastes for eksempel nye artikler inn i en åpen gren av et tre, og noen ganger lastes nye brev inn i et åpent e-postgrensesnitt.

Generelt er problemet med utdatert kontekst direkte knyttet til problemet med dataintegritet. Uansett er serveren ansvarlig for den endelige integritetskontrollen, som med skjemavalidering.

Sist oppdatert: 1.11.2015

AJAX-teknologi er en teknologi for asynkron interaksjon med serveren. Takket være denne teknologien kan vi sende forespørsler til serveren og motta svar fra den uten å laste inn siden på nytt bakgrunn, lag rike interaktive nettapplikasjoner, for eksempel nettprat.

Opprinnelig ble muligheten til å samhandle asynkront med serveren brukt i form av et ActiveX-objekt i Microsoft. Deretter ble ideen om asynkron interaksjon plukket opp av andre selskaper. Og for tiden er funksjonaliteten til asynkrone forespørsler i nettlesere tilgjengelig for webutviklere gjennom XMLHttpRequest-objektet.

Siden denne artikkelen handler om jQuery, vil jeg ikke gå i detalj om XMLHttpRequest-objektet. Men jeg vil kort vise essensen av bruken.

Så, for det første, for å jobbe med AJAX trenger vi en webserver. Dette kan være Node.js, IIS, Apache, nginx. I fremtiden vil jeg bruke Apache-webserveren.

La oss lage en nettside der XMLHttpRequest vil bli brukt:

Last inn Ingen nyhetsfunksjon ajaxload())( var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function())( if(this.readyState==4)( if(this.status >=200 && xhr.status< 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }

Når det gjelder markering, har vi to elementer: en knapp, når den klikkes, utføres ajaxload-funksjonen, og div blokk, hvor data vil bli lastet inn når du blir bedt om det.

All hovedhandlingen vår skjer i ajaxload-funksjonen. Først lager vi et XMLHttpRequest-objekt: var xhr=new XMLHttpRequest(); .

Vi vil sende forespørsler via dette objektet. Når et svar mottas, utløses onreadystatechange-hendelsen. Og for å behandle denne hendelsen tildeler vi egenskapen xhr.onreadystatechange en responsbehandlingsfunksjon.

I prosesseringsfunksjonen ser vi først på beredskapen til svaret gjennom readyState-egenskapen (tilstanden this.readyState==4 betyr at forespørselen er fullført). Deretter sjekker vi statuskoden til svaret: hvis serveren returnerte en statuskode fra 200 til 300, var forespørselen vellykket.

Og så sender vi svarteksten til div-en vi har på siden via responseText-egenskapen.

I linjen xhr.open("GET", "ajax.php"); vi angir forespørselsmetoden og ressursen som forespørselen skal gå til.

Vel, med den siste linjen xhr.send() sender vi forespørselen. Vi endte opp med å skrive mye kode for å utføre en enkel spørring.

La oss ha en forespørselsbehandler på serveren vår for php språk. Jeg skal gjøre det ekstremt enkelt. Det vil ganske enkelt svare med html-markering:

Nå, når du klikker på knappen, vil en Ajax-forespørsel oppstå, hvis resultater vil bli lastet inn på siden:

La oss nå omskrive sidekoden ved å bruke jQuery:

Last inn Ingen nyheter $(function())( $("button").click(function())( $("#news").load("ajax.php"); )); ));

Dermed blir koden renere og enklere ved å bruke jQuery-biblioteker. Vi trenger bare å bruke innlastingsmetoden og sende ressursadressen som en parameter. Og det endelige resultatet blir det samme.