Lausnir til 5 algengar vandamál með Ajax

Nútíma vefur verktaki sem telur ekki Ajax við skipulagningu eða uppbyggingu vefsíðna sinna, missir hugsanlega á öflugt tæki til að auka nothæfi.

Það eru hins vegar áskoranir í framkvæmd Ajax virkni á vefsíðu.

Í þessari grein munum við fjalla um lausnir við fimm af þeim algengustu áskorunum sem verktaki stendur frammi fyrir þegar Ajax er notað til að auka efni á vefsíðunni sinni.

Þó að það sé margt fleira að ræða og rannsaka um öll fimm málefni, ætti þessi færsla að gefa byrjendur og millistig Ajax verktaki nokkrar góðar ábendingar um framkvæmd Ajax virkni á notendavæntan og aðgengilegan hátt .

Vandamál # 1: Efni er ekki afturábak-Samhæft

Þetta vandamál á sér stað þegar hönnuður hefur tekið upp JavaScript og Ajax aukahluti í arkitektúr vefsvæðisins án þess að gera ákvæði fyrir vafra sem hafa slökkt á JavaScript.

Ekkert er athugavert við að skipuleggja vefsíðu með JavaScript og Ajax; Í staðreynd, í markaðnum í dag, ætti JavaScript í huga að vera óaðskiljanlegur við skipulagningu. En þú ættir samt að tryggja að vefsíðan sé afturábaksamhæf (eða að það niðurbrot tignarlega) við upphaf.

Lausn: Innfelldu Ajax sem aukning á vefsíðu sem er þegar virk

Þó Ajax gæti verið óaðskiljanlegur við skipulagningu vefsvæðis þíns, tryggja að allt efni sé aðgengilegt með hefðbundnum miðlaraaðferðum.

Segjum að þú hafir "Upplýsingar um starfsmenn" sem hafa sérstaka hlekk fyrir hvern starfsmann. Með því að nota miðlarahliðartækni geturðu sýnt efni fyrir tiltekinn starfsmann miðað við gildi sem fór fram í fyrirspurnarslóðinni, eins og þetta:

employees?view=VP">  Frank Smith - varaforsetiJim Williams - endurskoðandi

Allir tenglar hér að ofan vísa til sömu síðu, "Starfsmenn" síðu, sem breytist í samræmi við breytu í fyrirspurnarslóðinni. Upplýsingar um hver starfsmaður yrðu hlaðinn af netþjóninum, sem hægt væri að gera á ýmsa vegu: Með hliðsjón af miðlara er að finna; í gegnum gagnagrunn eða jafnvel með XML.

Hvort starfsmaður hlekkur er smellt, þá þarf að uppfæra alla síðuna til þess að hægt sé að afhenda þær upplýsingar sem óskað er eftir.

Svo er innihaldið að fullu aðgengilegt áður en Ajax aukahlutir eru lagskiptar ofan á. Síðan, með því að nota JavaScript, var hægt að hreinsa alla blaðsíðuna og efnið hlaðinn í staðinn með Ajax. Smellt á tengilinn gæti verið auðkennt með auðkenni eða með því að skoða gildi HREF eiginleiki í akkerinu.

Þó að innihaldið sé að fullu aðgengilegt með JavaScript óvirk, munu flestir notendur sjá auka Ajax-ekið útgáfu.

Meginreglan um framsækið aukahlutverk fyrir Ajax er vel þekkt, því það er almennt notað fyrir óþarfa JavaScript tækni og er felst í CSS, eins og sýnt er á myndinni hér fyrir neðan:

Þannig að byggja upp vefsvæðið þitt til að vinna án JavaScript, og þá bæta við JavaScript sem viðbót, eins og þú vilt merkja efni þitt í HTML og þá "bæta" það við CSS.

Vandamál # 2: Hleðsluvísir vafrans er ekki flutt af Ajax-beiðnum

Næstum hver vafra er með leið til að sýna notendum að þessi efni sé að hlaða inn. Í núverandi vafra birtist vísirinn á flipanum sem hleður inn efni.

Myndirnar hér fyrir neðan sýna þessa hreyfimyndarvísir frá nokkrum vinsælum vöfrum.


Hleðslavísir Internet Explorer er solid hringur með halli sem snýst um meðan á innihaldi stendur.


Eldur sýnir svipað tákn lítilla snúningshringa í mismunandi litum af gráum.


Google Chrome snýst hálfhring.

Vandamálið er að Ajax beiðnir kveikja ekki á þessari "hleðslu" vísir sem er innbyggður í vafra.

Lausn: Settu svipaða hleðsluvísir nálægt efni sem er að hlaða

Algengasta lausnin á þessu er að fella sérsniðna framfarir í Ajax-beiðnina. Nokkrar vefsíður bjóða upp á ókeypis "Ajax hleðslu" grafík.


Preloaders.net hefur fjölda ímynda, sérhannaðar hreyfimyndir til að velja úr.

Að framkvæma þessa sérsniðnu hleðslu grafík eða framfarir, í Ajax virkni vefsvæðis þíns, er einfaldlega spurning um að sýna og fela það á viðeigandi tímum með Javascript.

Ajax kóðinn þinn mun innihalda kóðalínur sem segja þér hvort beiðnin er í gangi eða lokið. Með því að nota JavaScript geturðu sýnt hreyfimyndina meðan beiðnin er í vinnslu og síðan falin þegar aðgerðin hefur lokið.

Vandamál # 3: Notandinn veit ekki að Ajax beiðni hefur verið lokið

Þetta tengist fyrri vandanum en er oft gleymt því að verktaki gæti gert ráð fyrir að hverfa "hleðsluskrá" nægir til að upplýsa notandann um að efnið sé alveg hlaðið. En í flestum tilfellum er það betra að endanlega gefa til kynna að efni hafi verið uppfært eða endurnýtt.

Lausn: Notaðu greinilega "Request Completed" skilaboð

Þetta er hægt að gera svipað og hvernig skjölin eru staðfest. Eftir að tengill hefur verið sendur á Digg , síðunni gerir þér kleift að vita mjög skýrt að afhendingu þín hefur borist:

Þrátt fyrir að þessi tiltekna vísir bendi ekki á lokið Ajax-beiðni, þá er meginreglan sú sama: "Velgengni" reitinn birtist eftir að blaðsíðan sem sendir formið er lokið, og kassinn er litrík og greinilegur.

Svipað grafík eða vísir gæti verið notaður í lok Ajax beiðni um að segja notendum að efnið hafi verið uppfært. Þetta yrði hrint í framkvæmd til viðbótar, en ekki í stað þess að framvinduvísirinn sem lagður var fyrir fyrri vandamálið.

Svipuð en lúmskur leið til að gefa til kynna að innihaldsefni hafi verið uppfært er gult hverfa tækni . Þessi aðferð er kunnugleg fyrir notendur, áberandi og virkar vel með Ajax-hlaðnu efni.

Vandamál # 4: Ajax beiðnir geta ekki nálgast þriðja aðila vefþjónustu

The XMLHttpRequest mótmæla, sem er á rót allra Ajax beiðna, er takmörkuð við að gera beiðnir á sama léni og síðan sem gerir beiðnina. En það eru dæmi þegar þú vilt fá aðgang að upplýsingum frá þriðja aðila með Ajax beiðni. Margir vefþjónusta gerir gögnin aðgengileg með API.

Lausn: Notaðu netþjóninn sem proxy

Lausnin við þessu vandamáli er að nota miðlara sem umboð milli þjónustu þriðja aðila og vafra. Þótt upplýsingar um þessa lausn séu langt umfram þessa grein, munum við fara yfir grunnregluna í vinnunni.

Vegna þess að Ajax-beiðni er upprunnin í vafra viðskiptavinarins, verður hún að vísa til skrár á öðrum stað en á sama léni og uppspretta beiðninnar.

Þjónninn þinn, þó ólíkt vafra viðskiptavinarins, er ekki takmörkuð á þennan hátt. Svo, þegar síðunni á þjóninum þínum er kallað, keyrir hún í bakgrunni eins og venjulega væri en með aðgang að hvaða léni.

Þetta veldur ekki neinum öryggisáhættu fyrir notandann vegna þess að beiðnir til þriðja aðila eru gerðar á netþjóninum þínum. Svo, þegar upplýsingarnar hafa verið fengnar á netþjónsstiginu, er næsta skref í Ajax símtalinu að senda svar til viðskiptavinarins, sem í þessu tilfelli myndi innihalda gögnin sem fengin eru frá þriðja aðila vefþjónustu.

Ef þú vilt fá nánari upplýsingar um þennan öfluga aðferð við að sameina vefþjónustu með sérsniðnum Ajax, skoðaðu örugglega aðrar auðlindir, þar af eru sumar hér að neðan.

Frekari lestur:

• Notaðu Web Proxy fyrir XMLHttpRequest símtöl í gegnum netið
• Cross Domain Ajax: Stutt yfirlit
• Lén AJAX fyrirspurn með jQuery

Vandamál # 5: Djúpur hlekkur er ekki í boði

Þetta er erfiður mál en kann ekki að vera krafist eftir því hvaða gerð vefsvæðis þíns eða forritið er. Vandamálið á sér stað þegar efni er hlaðið í gegnum Ajax og síðan er "ástandið" vefsins breytt án þess að slóðin sem bendir á síðuna sem hefur áhrif á.

Ef notandi fer aftur á blaðsíðu með bókamerki eða deilir tengilinum með vini birtist ekki uppfært efni sjálfkrafa. Vefsíðan myndi í staðinn snúa aftur til upprunalegu ástandsins. Flash-vefsíður höfðu sama vandamál: Þeir leyfðu ekki notendum að tengjast neinu nema upphafsskjánum.

Lausn: Notaðu innri hliðarankur

Til að tryggja að tiltekið "ríki" á Ajax-ekið vefsíðunni sé tengt og bókamerkið geturðu notað innri síðu tengla sem breyta vefslóðinni en ekki uppfæra síðuna eða hafa áhrif á lóðrétta stöðu sína.

Þessi einfalda kóða sýnir hvernig þetta er gert:

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;}

Ofangreind er ekki virkur kóðinn heldur frekar fræðilegt dæmi til að sýna fram á helstu skrefin sem taka þátt.

Fyrstu tvær línur af kóða setja núverandi síðu staðsetningar (URL) í breytu. Þá er staðsetningin breytt í streng þannig að við getum handleika það.

Næstum skiptum við strengnum í tvo hluta með akkerismerkinu (#) og síðan athugaðu hvort fylki sem er búið til úr skiptunni er stærra en eitt atriði. Stærri en eitt atriði þýðir að slóðin er með akkeri.

Ef slóðin hefur aðeins einn hluta þýðir það að ekkert akkeri er til staðar. Síðari "skipta" yfirlýsingin inniheldur mikið efni í samræmi við verðmæti akkerisins. Skipta yfirlýsingin er "sjálfgefin" valkostur ef ekkert akkeri er til staðar, sem myndi vera það sama og að hlaða síðunni í upphaflegu ástandi.

Ennfremur munum við sækja um kóða til að takast á við tengla sem benda beint á tiltekið efni með innri akkeri. Tengill sem vísar til "content2" myndi hlaða innihaldinu í "content2" og strengurinn "# content2" væri bætt við núverandi vefslóð.

Þetta myndi breyta vefslóðinni með því að bæta innri akkeri, án þess að breyta sýninni á síðunni en varðveita kennimerki sem gefur til kynna viðkomandi stöðu síðunnar.

Þessi skýring er aðeins kenning. Hugmyndin virkar og það virkar mjög vel. En ég hef ekki útskýrt alla möguleika, galla og önnur næmi við að byggja upp vefsíðu eða síðu með þessum hætti.

Fylgdu tenglunum hér að neðan til að fá meiri umfjöllun um efnið eða reyndu það sjálfur. Athugaðu einnig að hægt sé að prófa þetta með því að nota efni sem breytist með JavaScript einu og þarf ekki að nýta Ajax.

Frekari lestur:

• Deep hlekkur fyrir AJAX
• AJAX: Hvernig á að meðhöndla bókamerki og afturhnappa
• Festa afturhnappinn og virkja Bókamerki fyrir AJAX Apps

Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot eftir Louis Lazaris, sjálfstætt rithöfundur og vefur verktaki. Louis keyrir Áhrifamikill vefur , þar sem hann sendir greinar og námskeið um vefhönnun. Þú getur fylgst með Louis á Twitter eða hafðu samband við hann í gegnum heimasíðu hans .

Veistu hvaða lausnir á þessum eða öðrum Ajax viðfangsefnum eru? Vinsamlegast deildu athugasemdum þínum hér fyrir neðan ...