Mutta ennen kuin pääsemme tähän, meidän on lisättävä yksi rivi CSS: lle, joten tässä esimerkissä ei tarvitse mennä koko CSS-tiedostoon, koska se on vain ulkonäköä varten, mikä muuttuu millä projektilla olet tekemässä. Kuitenkin tällä ensimmäisellä menetelmällä on yksi rivi, joka on välttämätöntä ja se on:

#page2, #page3, #page4 {display: none;}

Tämä piilottaa kaikki sivut paitsi ensimmäinen. Joten sivu näkyy normaalisti ensimmäisellä kuormalla.

JavaScript

Joten nyt selittää, mitä tarvitsemme jQueryn kautta. Meidän custom.js-tiedostomme on kohdistettava, kun käyttäjä napsauttaa navigointi-linkkiä. Nouda href-linkki ja etsi "jakso" saman ID: n avulla, piilota sitten kaikki # main-content div ja haalistat uudessa jaksossa. Näin se näyttää:

$(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;}  muutos {return false;}}); var hash = ikkuna.location.hash; hash = hash.replace (/ ^ # /, ''); liipaista ("klikkaa"), katkaise asia "page3": $ ("#" + hash + "-link"). ("#" + hash + "-link"). trigger ("click"); break;}}); 

Tämä koodi on jaettu kahteen osaan, joista ensimmäinen saa aikaan sen, mitä juuri puhumme. Se on klikkaustoiminto otsikon nav linkkejä. Sitten tuo "# page1, # page2" jne muuttuja nimeltä $ linkClicked. Sitten päivitämme selaimen URL-osoitteen, jolla on sama hash-nimi. Sitten meillä on jos-ilmoitus, jossa varmistamme, että napsauttamamme linkki ei ole nykyinen välilehti, jos se sitten ei tee mitään, mutta jos ei piilota kaikkia nykyistä sisältöä ja paljastaa divin tunnus $ linkClicked. Niin yksinkertaista!

Toisessa osassa tarkistetaan, onko url: ssä hash-linkki sen päähän, jos näin on, se löytää vastaavan linkin sivulta, jolla on sama arvo (siksi linkillä on erityisiä tunnuksia merkinnässä) ja sitten se laukaisee sen linkki (se napsauttaa sitä). Mitä tämä tarkoittaa, tarkoittaa sitä, että käyttäjä voi ladata sivun sen jälkeen, kun hän on siirtynyt sivulle ja päivitys lähettää käyttäjän takaisin sen sijaan, että palaa vain ensimmäiselle sivulle, mikä voi usein olla ongelma tällaisessa järjestelmässä.

Joten se on ensimmäisen menetelmän loppu, tämä johtaa toimivaan staattiseen sivustoon, jolla on hetkellinen sisältövaihdos, eikä sivua lataudu uudelleen. Ainoa haittapuoli tässä menetelmässä on se, että kaikki sisältö on kutsuttu alkuperäiseen kuormaan, koska se on kaikki siellä indeksitiedostossa. Tämä voi alkaa aiheuttaa ongelmia valokuvien ja ylimääräisen sisällön kanssa, jolloin ensimmäinen sivuston vierailu ladataan hieman kauemmin. Katsotaan siis toinen tapa tehdä tämä sama vaikutus, joka voi poistaa ongelman.

AJAX: n ja PHP: n käyttö

Tämän saman vaikutuksen saavuttamiseksi, mutta hieman eri tavalla, jotta alkuperäinen kuorma ei aio ladata koko sisältöä ja siten hidastaa sitä (sivun kumoaminen, jos sivustolla on paljon sisältöä) käytämme vähän PHP ja AJAX. Tämä tarkoittaa, että projektin tiedostorakenne muuttuu ja näyttää tältä:

Joten jos katsot, hakemistotiedosto on nyt .php eikä .html. Meillä on myös ylimääräinen tiedostonimi "load.php" sekä uusi kansio / hakemisto nimeltä sivut, joissa on neljä HTML-sivua. Nyt tämä tarkoittaa sitä, että jos työskentelet paikallisesti, sinun on määritettävä paikallinen kehitysympäristö käyttäen jotain MAMP (Macille) tai WAMP-palvelin (Windows). Tai voit ladata koko kansion web-palvelimelle, jos sinulla on pääsy ja muokkaus siellä, pohjimmiltaan tarvitset ympäristöä, jossa PHP toimii.

Index.php on muuttanut vain yhden asian, mutta on tärkeää, emme nyt lataa kaikkia sisältöä sinne ja yksinkertaisesti soitamme alkuperäiseen sisältöön PHP: n mukana. Se näyttää nyt jotain tällaiselta:

AJAX a Static Site

Joten linja alkaa soittaa ensimmäiseen HTML-tiedostoon sivujen kansiosta ja liittää sen kokonaan # pääsisällön DIV-sivullemme. Tiedoston nimi voi sisältää minkä tahansa sisällön, jonka haluat näkyvän sivulla.

Käyttämällä $ .ajax JavaScript-koodilla

Siirrytään uusiin JavaScript-versioihin, nyt se näyttää hieman erilaiselta, lähinnä nyt käytämme AJAXia hakeaksesi uutta sisältöä kustakin HTML-tiedostosta, kun käyttäjä napsauttaa jotain vastaavaa navigointia. Tässä on ensimmäinen funktio koodissa (toinen pysyy samana kuin aiemmin):

$(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();}  }});} else {event.preventDefault ();}}); 

Joten selitämme, mitä tapahtuu. Lisäämme vielä yhden muuttujan, joka on $ pageRoot. Tämä on pohjimmiltaan todellinen numero napsautettu (ottamalla huomioon '#page' osa hash linkin ja jättäen yksittäisen numeron). Sitten samassa "if" -esittelyssä kuin aiemmin kutsumme ajaxia ja käytämme toista PHP-tiedostoa, jonka mainitsimme aikaisemmin, analysoimaan annetut tiedot (linkki on napsautettu) ja löydämme vastaavan sivun. Sitten, jos se tulee takaisin ilman virheitä, lisäämme uuden HTML-tiedoston vastaanotetusta tiedostosta # pääsisällön DIV. Sitten vain pysäyttää se muuttuessa yhtäkkiä, piilotamme kaiken ja sitten haalistumme sisään.

load.php

Uuden PHP-tiedoston sisältö on lyhyt ja makea, se vie sivunumeron, jonka jQuery on lähettänyt, ja etsii, onko vastaava HTML-tiedosto olemassa. Jos se tulee, se saa kaiken sisällön ja palauttaa sen AJAX-funktioon (jonka osoitin hetki sitten, että sisällytämme sisältöön tärkeimpään DIV: hen).

Tämän jälkeen sivuston pitäisi näyttää kuitenkin haluat sen, mutta enimmäkseen toimii kunnolla.

Se siitä! Sivusto kutsuu nyt oikeaan vastaaviin HTML-tiedostoihin aina, kun käyttäjä napsauttaa navigointi linkkiä. Se vaihtaa sisältöä tekemättä sivun lataamista uudelleen. Tällä tavoin ei myöskään tarvitse soittaa koko alkuperäisen sivun kuormituksen sisältöön! Toivon, että olet oppinut jotain hyödyllistä menetelmää tästä opetusohjelmasta ja että voit käyttää sitä parantamaan jotain projektia jollain tavalla.

Voit tarkastella jQuery demo täällä, PHP demo here, PHP demo täällä, tai lataa lähde ja katso tarkemmin.

Oletko käyttänyt AJAXia sisällön lataamiseen? Oletko käyttänyt samanlaista tekniikkaa nopeuttaaksesi sivustosi? Kerro meille ajatuksesi alla olevissa huomautuksissa.

Esitetty kuva / pikkukuva, valinnainen kuva kautta Shutterstock.