Með notkun þráðlausra nota eclipsing skrifborð-undirstaða vefur beit, það er mikilvægara en nokkru sinni fyrr fyrir vefsíður að byggja með áherslu á skjótur síðu álag og vökva viðbrögð við notandi inntak.

Ein mikilvæg tækni sem við notum til að ná þessu er AJAX, stutt fyrir "ósamstilltur JavaScript og XML." AJAX gerir þér kleift að uppfæra hluta af einni vefsíðu án þess að henda út DOM (HTML arkitektúr síðunnar) - útrýma þörfinni fyrir öllu blaðsíða hleðst og skapa hraðari svörun við innslátt notenda. Að byggja upp vefsíður á 100% AJAX ramma er tækni sem sýnir nýja möguleika um hvað er hægt að ná í þróun á vefnum.

Við byrjuðum að byggja upp síður sem 100% AJAX fyrir næstum tíu árum síðan og höfum síðan lært mikið um hvernig á að nota það í raun þannig að það bætir notendaupplifun. Í þessari grein munum við kanna fjölda sérstakra kosta og takmarkana af þessari tækni.

Fljótur notendaviðbrögð

Lykill þáttur í árangursríkri UX er skjót viðbrögð við notendaviðmót, en með staðlaðri vefsíðu er notandi vinstri að bíða eftir samskiptum að fara fram þar sem beiðnir eru settar yfir HTTP (eða HTTPS) á netþjóninn, sem leiðir til heill síðu hleðslu fyrir hverja breytingu. Þetta ferli gerist með hverjum mús smellur til að biðja um nýja síðu, stærri mynd eða fleiri upplýsingar; DOM er algjörlega kastað út og endurhlaðin í vafrann þinn - þetta er oft sóunandi ferli þegar þú hleður niður síðum á sama síðu, þar sem þeir hafa venjulega svipað efni.

kajak

Leit Kajak er knúin af AJAX og veita tillögur um leið og þú byrjar að slá inn.

Einn helsti kosturinn við AJAX er stöðugt upplýsingaflæði þess, sem er óhindrað af hleðslu og affermingu DOM, sem leiðir til betri stjórnunar á reynslu og athygli gesta. Með AJAX geta vefforrit sent gögn til og frá þjóninum ósamstillt án þess að trufla birtingu á núverandi síðu.

Helstu munurinn á staðlaðri AJAX-framkvæmd og 100% AJAX-innbyggður vefsíða er sú að í síðara lagi er grunn DOM hlaðinn á fyrstu heimsókn á síðuna, venjulega á heimasíðunni; allt annað sem á sér stað er einfaldlega meðferð þessara aðalálags.

Áberandi dæmi um vökvastigið sem AJAX veitir er Google Maps. Þegar þú zoomar inn, út, flettir í gegnum borg í augnsýn fuglsins eða í götusýn, er upplýsinga óaðfinnanlegur og stöðugt afhent til að nota þig strax. Þegar AJAX skiptist á milli síður eða uppfærslu á efni í vefforriti gerir AJAX kleift að svara notanda á samhengisvænum hátt, svo sem myndvinnsla uppfærð í rauntíma án þess að endurhlaða síðuna, samhengis hreyfimyndir sem skipta á milli síða eða þegar þú hleður smáatriðum útsýni.

Google Maps

Við hönnun á síðum með miklu magni af efni, notum við A-AXA óendanlega hreyfimynstur, sem ekki aðeins sparar bandbreidd vafrans með því aðeins að sýna þær upplýsingar sem strax tengjast UX, en einnig dregur úr notandi núningi. Á eigin fyrirtæki okkar fréttir síðu Til dæmis, fleiri greinar hlaða eins og þú flettir niður, útilokar notkun á síðum og í staðinn hleðsla fleiri upplýsingar á skjánum eins og lesandinn krefst þess. Þetta núllalausa ferli við að hlaða og afferma meira efni eftirspurn gerir gestum okkar kleift að fá nákvæmlega eins mikið fréttir og þeir vilja án þess að kynna hindranir í þeim tilgangi.

Óaðfinnanlegur UX

Fá stjórn á því hvernig vefsíðan inniheldur mikið efni skapar einstakt tækifæri til að hanna síðufærslur, hleðsla hreyfimynda og sjónræna vísbendinga sem hjálpa notandanum að skilja stigveldi svæðisins. Þetta er einnig tækifæri til sköpunar með vörumerki fyrirtækisins.

Vefsvæði með 100% AJAX ramma (vegna þess að það er engin hleðsla á öllum síðum) veitir ekki endurgjöf um framfarir í hleðslu í vafraglugganum, sem leiðir til hugsanlegra rugl ef gestur fer eftir að bíða eftir lengri tíma án viðbragðs. Þetta er þar sem sérsniðnar hleðslustaða vísar til leiks og gefur til kynna að hægt sé að gera framfarir á biðtíma.

estesparkmedical

Estes Park Medical Center í Colorado notar persónulega AJAX hleðslutæki til að viðhalda litun og vörumerki stofnunarinnar og veita virkni hleðslustákns.

zillow

Á Zillow website, skráningarupplýsingar eru stöðugt uppfærðar án þess að hressa hnappinn á vafranum, sem gefur heima leigutaka aðgang að uppfærðri upplýsingum á öllum tímum.

Lítil viðbætur, svo sem þetta, eru duglegir til að skapa eftirminnilegt upplifun fyrir gesti þína og eru gerðar mögulegar með því að nota AJAX.

Taktu stjórn á slóðinni með HTML5 sögu

Án einstakra síðuhleðsla er síða skilgreind með því að hafa eina slóð sem veldur vandræðum á slæmum byggðum AJAX-vefsíðum eins og notendur reyna að setja bókamerki á eða fletta með því að nota hnappana áfram og aftur í vafranum. Þar að auki, vegna þess að Google leitarvélaskriðþjónn hafði ekki lesið JavaScript í sögulegum tilgangi, hafa áhyggjur af því hversu vel AJAX-máttur vefsvæði gætu sótt í lífrænum leitarniðurstöðum Google.

Báðum þessum skilyrðum er leyst með því að ná stjórn á slóðinni með því að nota HTML5 saga API .

Hver síða af 100% AJAX vefsvæðinu og tilbrigði hennar eru skoðaðar eigin beiðni þeirra; Eins og þú ferð um AJAX síðuna - þótt það sé tæknilega einn hleðsla á síðu - slóðin í vafranum er uppfærður til að gefa upp einstakt heimilisfang sem sýnir núverandi útsýni ástand. Þar að auki getum við hlustað á atburði um breytingar á sögu til að styðja við afturhnappinn vafrans og skila fyrri skoðunarstöðu. Hver af þessum einstaka vefslóðum er að fullu verðtryggður af Google, sem þýðir að þessi nálgun er fullkomlega samhæf og gagnleg fyrir SEO.

a9

Amazon er A9 leitarnetið fer eftir AJAX til að sækja umtalsvert magn af gögnum án þess að tapa leitarsögu notandans.

Að lokum

Eins og þú getur séð, AJAX er óaðskiljanlegur í framvindu nútíma vefur þróun og supplants a tala af óæðri tækni sem veitti lélega notanda reynslu. Án AJAX þurftu að endurhlaða allt innihald síðunnar fyrir nánast alla notendaviðskipti, jafnvel þótt aðeins sumar upplýsinganna hafi breyst. Þetta hindrað hraða, setti viðbótarálag á þjóninn og notaði of mikið bandbreidd.

Með því að byggja upp 100% AJAX ramma getum við búið til síður sem eru sérsniðnar að þörfum viðskiptavina, veita aðgengilegan sigling sem hægt er að bókamerki af heimsóknum og það virka á miklu hærra stigi.

Valin mynd, gögn straummynd um Shutterstock.