Fyrsta síðu Titill
Innihald fyrstu síðu.
Horfðu, ekki síðu hlaða!
Önnur síðu innihald.
Ooo hverfa!
Þriðja síðu innihald.
Fjórða síðustaður
Fjórða síðu innihald.
Hvernig á að auka hraða vefsvæðis þíns með AJAX og JQuery
Í þessari einkatími ætlum við að líta á hvernig á að flýta fyrir notendavandanum á litlum truflunum með nokkrum mismunandi aðferðum. (A truflanir síða er einn sem hefur enga endurnýjunarefni, svo engar bloggfærslur eða myndastraumar osfrv.)
Leiðin sem við ætlum að gera þetta er með því að taka út síðuupphleðslur. Svo einfaldlega setja, þegar notandinn notar nokkrar siglingar tenglar, breytist aðeins aðal innihald síðunnar og það gerir ekki vafrann að endurhlaða síðuna.
Við munum ná þessum áhrifum á tvo mismunandi vegu, fyrst notar aðeins jQuery, og hitt notar AJAX og nokkrar PHP. Þeir hafa bæði kostir og gallar, sem við munum líta á eins og heilbrigður. Sjáðu kynningu til að sjá hvað við erum að reyna að ná og við skulum byrja á fyrsta (og einfaldari) jQuery aðferðinni.
Að ná árangri með jQuery
Fyrst munum við líta á uppsetninguna fyrir síðuna. HTML er mjög einfalt en hefur nokkur mikilvæg atriði, "nauðsynleg" eins og það var. Við þurfum nokkrar siglingar tenglar sem hafa sérstaka hash href (sem við munum útskýra í eina mínútu) og tiltekið efni svæði sem þú vilt nú þegar á einhverju öðru vefsvæði. Svo skulum fyrst sjá hvað er í skránni okkar index.html:
Speed Up Static Sites with jQuery
Svo til að endurskoða mikilvæga hluti af því sem þarf að fara inn í merkinguna: Við höfum flakk okkar þar sem hver hlekkur hefur href í samsvarandi DIV. Svo er tengillinn "Page 2" með href = "# page2" (sem er kennimerki
En áður en við komumst að því þurfum við að bæta við einum línu við CSS okkar, það er engin þörf á að fara yfir alla CSS skrána fyrir þetta dæmi þar sem það er allt eingöngu fyrir útlit, sem mun breytast með hvaða verkefni þú ert að vinna að. Hins vegar með þessari fyrstu aðferð er ein lína sem er nauðsynleg og það er:
#page2, #page3, #page4 {display: none;}Þetta felur í sér alla "síður" nema þann sem er fyrsti. Svo birtist síðunni venjulega á fyrstu álagi.
JavaScript
Svo nú að útskýra hvað við þurfum að ná í gegnum jQuery. Í custom.js skránni okkar, þurfum við að miða þegar notandinn smellir á siglingaslóð. Sækja href tengilinn sinn og finndu 'hlutann' með sama auðkenni og verðu síðan allt í # aðal innihaldsefnum og hverfa í nýju hlutanum. Þetta er hvernig það lítur út:
$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;} annars {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); skipta (hash) {tilfelli 'page2': $ ("#" + kjötkássa + "-link"). kveikja ("smell"); brot; tilfelli 'page3': $ ("#" + hash + "-link"). ("#" + hash + "-link"). kveikja ("smell"); brjóta;}}); Þessi kóði er skipt í tvo hluta, fyrst nær það sem við tölum bara um. Það hefur smell aðgerð á haus nav tengla. Það setur síðan '# page1, # page2' etc í breytu sem heitir $ linkClicked. Við uppfærum síðan vefslóð vafrans til að hafa sama heiti heiti. Síðan höfum við ef yfirlýsingu að ganga úr skugga um að tengilinn sem við erum að smella á sé ekki núverandi flipi, ef það er þá ekkert, en ef ekki að fela allt núverandi efni og afhjúpa div með auðkenni $ linkClicked. Svo einfalt!
Í öðru lagi er athugað hvort vefslóðin hefur hreykilslóð í lok hennar, ef það gerir það finnur það samsvarandi hlekkur á síðunni með sama gildi (þess vegna eru tenglarnar með tilteknar auðkenni í merkinu) og þá kallar það hlekkur (það smellir á það). Hvað þetta þýðir þýðir að notandinn getur endurhlaða síðu eftir að hafa farið í 'síðu' og endurnýjunin mun senda notandanum aftur þar í stað þess að bara aftur á fyrstu síðu sem getur oft verið vandamál með þessu tagi.
Svo það er lok fyrsta aðferðin, þetta leiðir til vinnandi truflanir staður sem hefur tafarlaust efni skipti, og engin síðu endurhleðst. Eina galli við þessa aðferð er sú staðreynd að allt innihald er kallað á upphafsslagið, þar sem það er allt í vísitölunni. Þetta getur byrjað að vera vandamál með myndir og auka efni sem gerir fyrsta heimsóknina að hlaða aðeins lengur. Svo skulum líta á aðra leið til að gera sömu áhrif sem geta útrýma því vandamáli.
Notkun AJAX og PHP
Til að ná þessum sömu áhrifum en á annan hátt, þannig að byrjunarálagið muni ekki hlaða öllu innihaldi okkar og þannig hægja það niður (sigra liðið ef síða hefur mikið af efni) munum við nota smá PHP og AJAX. Þetta þýðir að skrá uppbygging fyrir verkefnið okkar mun breytast og líta svona út:
Svo ef þú lítur, er vísitöluskráin nú a .php og ekki .html. Við höfum einnig viðbótarskrá sem heitir 'load.php' ásamt nýjum möppu / möppu sem kallast síður þar sem eru fjórir HTML síður. Nú þýðir þetta að ef þú ert að vinna á staðnum þarftu að setja upp staðbundið þróunarumhverfi með því að nota eitthvað eins og MAMP (fyrir Mac) eða WAMP Server (fyrir Windows). Eða þú getur hlaðið öllum möppunni inn á vefþjóninn ef þú hefur aðgang og breytt þarna, þá þarftu í grundvallaratriðum umhverfi þar sem PHP mun virka.
The index.php hefur aðeins breyst eitt, en það er mikilvægt, við munum nú ekki hlaða öllu innihaldi þarna, og einfaldlega hringdu í upphaflegt efni með PHP innihalda. Það mun nú líta svona út:
AJAX a Static Site
Svo línan byrjar er að hringja í fyrstu HTML skjalið úr möppunni okkar á síðum og setja inn í heildina í # aðal innihald DIV okkar. Skráin sem heitir getur innihaldið allt efni sem þú vilt birtast á síðunni.
Notkun $ .ajax í JavaScript
Við skulum fara á nýju JavaScript, það lítur nú lítið öðruvísi út, aðallega notum við nú AJAX til að sækja nýtt efni úr hvern HTML skrá þegar notandinn smellir á einhvern samsvarandi flakk. Hér er fyrsta aðgerðin í kóðanum (annarinn er sá sami sem áður):
$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();} }});} Annað {event.preventDefault ();}}); Svo skulum útskýra hvað er að gerast. Við erum að bæta við einum breytu, það er $ pageRoot. Þetta er í grundvallaratriðum raunverulegur fjöldi smellt á (að taka þátt í "#page" hluta kjötkássalinsins og yfirgefa einstökan fjölda). Þá innan sömu "ef" yfirlýsingu eins og áður hringjum við ajax og notaðu aðra PHP skrá sem við nefndum áður til að flokka upplýsingarnar sem gefnar eru (hvaða hlekkur hefur verið smellt á) og finna viðeigandi síðu. Þá ef það kemur til baka án villu, setjum við nýjan HTML úr skránni sem fékkst í # aðal innihald DIV okkar. Þá bara til að stöðva það að breytast skyndilega, verum við allt og þá hverfa það inn.
load.php
Innihald nýrrar PHP skráar er stutt og sætur, það tekur blaðsíðuna sem jQuery hefur sent það og lítur út fyrir að sjá hvort samsvarandi HTML-skrá er til staðar. Ef það gerir það fær allt efni og skilar því aftur í AJAX virka (sem við sýndu um stund síðan að við settum það inn í aðal DIV).
Eftir að þessi síða ætti að líta út en þú vilt það, en að mestu leyti virka rétt.
Það er það! Svæðið kallar nú í réttu samsvarandi HTML-skrá í hvert skipti sem notandinn smellir á siglingarakstri. Það skiptir um efnið án þess að endurhlaða síðuna. Og þannig þarf það samt ekki að hringja í allt efni á upphafssíðunni! Ég vona að þú hefur tekist að læra nokkrar gagnlegar leiðir frá þessari kennsluaðferð og að þú getir notað það til að bæta verkefni á einhvern hátt.
Þú getur skoðað jQuery kynningu hér, the PHP kynningu hér, eða hlaða niður uppsprettunni og farðu að líta betur út.
Hefur þú notað AJAX til að hlaða inn efni? Hefur þú notað svipaða tækni til að flýta fyrir síðuna þína? Láttu okkur vita af hugsunum þínum í athugasemdunum hér fyrir neðan.