Q:

Web Design pattern/solution

I'm hoping someone could help/point me in the right direction here.
Option 1
I make a basic site that has a nav menu, I can make a list of links in the nav and each link will have a corresponding page with the same header, nav, footer and different main content. So when the link is clicked the whole page then loads again ans still looks the same except for the main content which is different.
Option 2
I make a site that has a nav menu, header, footer and main div. there is a jquery function that when a li in the nav is clicked. a corresponding page with only the content needed is loaded in the main div with its content displayed. With this only the main div is loaded, The rest of the page( Nav, Header, footer, Do you not refresh at all).
The style layout stay the same only the main content is different..
So now. With Option 1 

the whole page refreshes, 
I can give a link to a specfic page with content (ie. http://domain.com/page2.html) and the whole page loads with nav, header, footer etc.
If i get a google hit for page3.html content and i click it, http://domain.com/page3.html will load with nav, header, footer etc.. 

With Option 2.

only the Main div refreshes (nav, header, footer stay static).
When i change between nav items, the page address will remain http://domain.com/index.html and wont change to  http://domain.com/page3.html or http://domain.com/page4.html to give out that link to users.
If i get a google hit for content on page3.html and its clicked, User will only get the page3.html content with no nav, header, footer 

So

Is there a Way to create a page like the 2nd option that only the main div refreshes with content from the corresponding page that does not have a nav, header, footer when a the nav item is clicked? 
but it will still have a unigue url for each page that has different main content keeping the same nav,footer,header..
and then if a user comes through a search engine they will get the full page layout (nav, footer, header) with the content for that page and not just the content.

I hope i have made this clear enough to understand what im trying to achieve
Basically i want to create the page that the Nav, Header, Footer stay static and only the main div reloads when each li item is clicked. But i need each page to have a unique url and beable to to load the full page with desired content for the search engine users.

A:

It sounds like you're looking for PJAX - or pushState with AJAX. Basically, all requests are made via ajax, but you're updating the address bar using pushState (which doesn't cause a refresh).
A lightweight framework exists (developed by Youtube and used by sites like github) called spfjs, that assists in handling this (as well as handling fallback...)
https://github.com/youtube/spfjs
If you're interested in just a simple pjax solution, a jQuery plugin is available here:
https://github.com/defunkt/jquery-pjax

