Den moderne webudvikler, der ikke overvejer Ajax, når de planlægger eller bygger deres websites, mangler potentielt et kraftigt værktøj til at forbedre brugervenligheden.

Der er dog udfordringer i at implementere Ajax-funktionalitet på en webside.

I denne artikel diskuterer vi løsninger på fem af de mest almindelige udfordringer, som en udvikler står overfor, når du bruger Ajax til at forbedre indholdet på deres hjemmeside.

Selvom der er meget mere at diskutere og undersøge om alle fem emner, bør dette indlæg give begyndere og mellemliggende Ajax-udviklere nogle gode tips om implementering af Ajax-funktionaliteten på en mere brugervenlig og tilgængelig måde .

Problem nr. 1: Indhold er ikke bagudkompatibelt

Dette problem opstår, når en designer har inkorporeret JavaScript og Ajax-forbedringer i deres websites arkitektur uden at gøre bestemmelser for browsere, der har deaktiveret JavaScript.

Intet er galt med at planlægge et websted med JavaScript og Ajax; Faktisk, i dagens marked, bør JavaScript overvejelser være integreret i planlægningsprocessen. Men du skal stadig sørge for, at hjemmesiden er bagudkompatibel (eller at den nedbrydes yndefuldt) ved lanceringen.

Løsning: Implement Ajax som en forbedring til en allerede fungerende hjemmeside

Selvom Ajax kan være integreret i din planlægning af webstedets arkitektur, skal du sikre dig, at alt indhold er tilgængeligt via konventionelle server-side metoder.

Lad os sige, at du har en "Medarbejderinformation" -side, der har et særskilt link til hver medarbejder. Ved hjælp af server-side teknologi kan du vise indholdet for en bestemt medarbejder baseret på en værdi, der passeres gennem forespørgselsstrengen, som denne:

Alle de ovennævnte links peger på den samme side, siden "Medarbejdere" , som ændres i henhold til variablen i forespørgselsstrengen. Hver medarbejders oplysninger vil blive indlæst fra serveren, hvilket kunne gøres på en række måder: via server-side indgår; gennem en database eller endda bruge XML.

Uanset hvilket medarbejderlink der skal klikkes, skal hele siden indlæses for at de ønskede oplysninger skal kunne leveres.

Så indholdet er fuldt tilgængeligt, før eventuelle Ajax-forbedringer er lagdelt på toppen. Derefter kunne JavaScript-opdateringen blive afbrudt, og indholdet blev indlæst i stedet via Ajax. Det klikket link kunne identificeres med et ID eller ved at kontrollere værdien af ​​HREF-attributten i ankeret.

Selvom indholdet er fuldt tilgængeligt med JavaScript deaktiveret, vil de fleste brugere se den forbedrede Ajax-drevne version.

Princippet om progressiv forbedring for Ajax er velkendt, fordi den almindeligvis anvendes til diskret JavaScript-teknikker og er iboende af CSS, som illustreret i nedenstående grafik:

Ajax as an Enanchement Layer

Så bygg dit websted til at fungere uden JavaScript, og tilføj derefter JavaScript som en ekstraudstyr, ligesom du vil markere dit indhold i HTML og derefter "forbedre" det med CSS.

Problem nr. 2: Browserens indlæsningsindikator udløses ikke af Ajax-anmodninger

Næsten hver browser har en måde at visuelt indikere for brugeren, at indholdet indlæses. I de aktuelle browsere vises indikatoren på fanen, der indlæser indholdet.

Billederne nedenfor viser denne animerede indikator fra nogle få populære browsere.

IE Browser Loading
Internet Explorer's indlæsningsindikator er en solid cirkel med en gradient, der springer mens indholdet læses.


Firefox Browser Loading
Firefox viser et lignende ikon af små spindecirkler i forskellige gråtoner.


Chrome Browser Loading
Google Chrome spinder en halvcirkel.

Problemet er, at Ajax-anmodninger ikke udløser denne "loading" -indikator, der er indbygget i browsere.


Løsning: Indsæt en lignende indlæsningsindikator nær indhold, der indlæses

Den fælles løsning på dette er at indarbejde en tilpasset fremskridtsindikator i Ajax-anmodningen. En række hjemmesider tilbyder gratis "Ajax loading" grafik.

Preloader.net
Preloaders.net har en række fancy, brugerdefinerede animerede grafik at vælge imellem.

Implementering af denne brugerdefinerede læsningsgrafik eller fremdriftsindikator i dit websteds Ajax-funktionalitet er simpelthen et spørgsmål om at vise og gemme det på passende tidspunkter via JavaScript.

Din Ajax-kode vil indeholde kodeord, der fortæller dig, om anmodningen er i gang eller afsluttet. Ved hjælp af JavaScript kan du vise den animerede grafik, mens anmodningen behandles og derefter gemme den, når handlingen er færdig.

Problem nr. 3: Brugeren ved ikke, at en Ajax-anmodning er afsluttet

Dette er relateret til det foregående problem, men overses ofte, fordi udvikleren muligvis antager, at forsvinden af "loading" -indikatoren er tilstrækkelig til at informere brugeren om, at indholdet er fuldt indlæst. Men i de fleste tilfælde er det bedre at definere, at indholdet er opdateret eller opdateret.

Løsning: Brug en særskilt "Request Completed" Besked

Dette kan gøres ligner, hvordan formularindlæg er bekræftet. Efter et link er indsendt på Digg , siden kan du vide meget tydeligt, at din indsendelse er blevet modtaget:

Digg's Form Submitted Indicator

Selvom denne indikator ikke påpeger en udfyldt Ajax-anmodning, er princippet det samme: "Succes" boksen vises efter den side, der indsætter formularen er færdig med at indlæse, og boksen er farverig og tydelig.

En lignende grafik eller indikator kunne bruges i slutningen af ​​en Ajax-anmodning for at fortælle brugere, at indholdet er blevet opdateret. Dette ville blive gennemført ud over, ikke i stedet for den fremskridtsindikator, der blev foreslået for det foregående problem.

En lignende, men mere subtil måde at indikere, at et indholds område er blevet opdateret, er gul fade teknik . Denne metode er kendt for brugerne, diskret og fungerer godt med Ajax-indlæst indhold.

Problem nr. 4: Ajax-anmodninger kan ikke få adgang til tredjeparts webtjenester

Det XMLHttpRequest objekt, der er grundlaget for alle Ajax-anmodninger, er begrænset til at stille anmodninger på det samme domæne som den side, der foretager anmodningen. Men der er tilfælde, hvor du vil have adgang til tredjepartsdata via en Ajax-anmodning. Mange webtjenester gør deres data tilgængelige via en API.

Løsning: Brug din server som proxy

Løsningen på dette problem er at bruge din server som en proxy mellem tredjepartstjenesten og browseren. Selvom detaljerne i denne løsning er langt ud over denne artikels anvendelsesområde, går vi over det grundlæggende princip på arbejdspladsen.

Da en Ajax-anmodning stammer fra klientens browser, skal den referere til en fil på et andet sted, men på samme domæne som kilden til anmodningen.

Din server er imidlertid ikke, i modsætning til klientens browser, begrænset på denne måde. Så når siden på din server bliver kaldt, kører den i baggrunden som det normalt ville, men med adgang til et hvilket som helst domæne.

Dette indebærer ikke nogen sikkerhedsrisiko for brugeren, fordi anmodningerne til tredjepartstjenesten foretages på din server. Så når oplysningerne er blevet opnået på serverniveau, er det næste trin i Ajax-opkaldet at sende et svar tilbage til klienten, som i dette tilfælde vil indeholde dataene fra tredjeparts webtjenesten.

Using Your Server as a Proxy to Access Web Services

Hvis du vil have flere detaljer om denne kraftfulde metode til at kombinere webserviceadgang med brugerdefineret Ajax, skal du helt sikkert tjekke andre ressourcer, hvoraf nogle er angivet nedenfor.

Yderligere læsning:

Problem nr. 5: Deep Linking er ikke tilgængelig

Dette er et vanskeligere problem, men det kan ikke være nødvendigt, afhængigt af din type websted eller applikation. Problemet opstår, når indholdet er indlæst via Ajax, og derefter ændres "tilstanden" af hjemmesiden uden den webadresse, der peger på siden, der påvirkes.

Hvis brugeren vender tilbage til siden via et bogmærke eller deler linket med en ven, vises det opdaterede indhold ikke automatisk. Webstedet vil i stedet vende tilbage til sin oprindelige tilstand. Flash-websites plejede at have det samme problem: de tillod ikke brugere at linke til andet end den oprindelige skærm.

Løsning: Brug intern sideankre

For at sikre, at en bestemt "tilstand" på en Ajax-drevet webside kan forbindes og bogmærkes, kan du bruge interne sidelinks, som ændrer webadressen, men ikke opdaterer siden eller påvirker dens lodrette position.

Denne enkle kode viser, hvordan dette gøres:

var currentAnchor = document.location;currentAnchor = String(currentAnchor);currentAnchor = currentAnchor.split("#");if (currentAnchor.length > 1) {currentAnchor = currentAnchor[1];} else {currentAnchor = currentAnchor[0];}switch(currentAnchor) {case "section1":// load content for section 1break;case "section2":// load content for section 2break;case "section3":// load content for section 3break;default:// load content for section 1break;}

Ovenstående er ikke et fungerende stykke kode, men snarere et teoretisk eksempel for at demonstrere de vigtigste trin involveret.

De to første linjer med kode sætter den aktuelle sideplacering (URL) i en variabel. Derefter konverteres placeringen til en streng, så vi kan manipulere den.

Dernæst splittes strengen i to dele via ankersymbolet (#) og kontrolleres efterfølgende for at se om det array, der er oprettet fra splittet, er større end et element. Større end et element betyder, at URL'en har et anker.

Hvis URL'en kun har en del, betyder det, at der ikke findes et anker. Den efterfølgende "switch" -opgørelse indlæser indhold i henhold til ankerens værdi. Omskifter erklæringen har en "standard" mulighed, hvis der ikke findes anker, hvilket ville være det samme som at ilægge siden i sin oprindelige tilstand.

Desuden vil vi anvende kode til at håndtere links, der peger direkte på specifikt indhold gennem interne ankre. Et link, der peger på "content2", vil indlæse indholdet i "content2", og strengen "# content2" vil blive tilføjet til den aktuelle webadresse.

Dette ville ændre webadressen ved at tilføje et internanker uden at ændre visningen af ​​siden, men bevare en identifikator, der angiver den ønskede tilstand på siden.

Denne forklaring er kun teori. Konceptet virker, og det virker meget godt. Men jeg har ikke forklaret alle muligheder, ulemper og andre subtiliteter i at opbygge en hjemmeside eller side på denne måde.

Følg nedenstående links for en mere omfattende diskussion af emnet, eller eksperimenter med det selv. Bemærk også, at dette kan testes ved hjælp af indhold, der ændres med JavaScript alene, og behøver ikke at udnytte Ajax.

Yderligere læsning:


Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs , hvor han stiller artikler og vejledninger om webdesign. Du kan følge Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside .

Kender du til nogen løsninger på disse eller andre Ajax udfordringer? Venligst del dine kommentarer nedenfor ...