I'm not well versed on AJAX, and the tutorials that I've viewed haven't answered my question in the way I needed it answered, so I figured you more seasoned people could point me in the right direction.
Right now we have a static site. It uses a mix of html & php (hopefully that doesn't matter for AJAX). The site is currently set up so that content loads in a specific div when clicking a link to another page. So because of that I SUSPECT that we shouldn't have to totally change the format of our site to implement AJAX.
With that being said could anyone either 1) point me to an AWESOME tutorial on how to AJAXify a static HTMl site or 2) attempt to inform me of the process via your own experiences and commented code?
Based on your description, I'm going to assume that there's a single PHP file that, depending on the query string, builds different pages that differ from each other only in the contents of that one div.
What you can do is check in that PHP script whether it has been requested normally or via AJAX, for example like this:
PHP Code:
function isAjax() {
return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}
In case it's a normal request, you just let it build the page like usual; in case of an AJAX request you just let it echo the contents of that div.
That way, your AJAX function can just request the usual link, and put the response directly into the div, without having to parse it and find the relevant content first.
As for the nested AJAX requests — I don't really know what you mean. There's no such thing as nested AJAX requests. AJAX requests are just normal HTTP requests, with the difference that the response isn't loaded in a new page, but sent to your Javascript function.
What you do with that response (e.g. put it into a nested div) is completely up to you and has nothing to do with AJAX.
Based on your description, I'm going to assume that there's a single PHP file that, depending on the query string, builds different pages that differ from each other only in the contents of that one div.
Nope. I think I may have confused you a bit. There are as many .php pages as there are content pages. I was just stating that although every "containing" .php page is the same, the only thing that changes from page to page is the content of a specific div. Which I, personally, find to be highly inefficient as compared to just having one .php page and AJAXing the content into the only changing div.
So, currently, there are NO requests going on at all as the whole site is strictly static. That clear it up?
Well that just means that you're doing it wrong, because you're duplicating information in all those files. You might want to switch to a single processing file solution, in order to get rid of all that code duplication, and maybe look into URL rewriting, so you can keep your established URLs.
That step doesn't have anything to do with AJAX, it's just generally good practice. Once you've done it, though, it should be easy to switch to AJAX, like already explained (if you still feel you need it).
Well that just means that you're doing it wrong, because you're duplicating information in all those files. You might want to switch to a single processing file solution, in order to get rid of all that code duplication, and maybe look into URL rewriting, so you can keep your established URLs.
That step doesn't have anything to do with AJAX, it's just generally good practice. Once you've done it, though, it should be easy to switch to AJAX, like already explained (if you still feel you need it).
We're just going to be using it for the very basic of basic functionality which is just refreshing content in a div without reloading the whole page. Nothing more advanced over that. And what you mentioned seemed a lot harder than how he's making it sound on the video.
But if he's doing the same thing you're speaking of, then kudos.
I see. The guy in the video is not doing what I suggested. What he's doing is fetch the whole new page via AJAX, extract the contents of that one div, and put them in the page.
My suggestion is just generally good advice, because code duplication is a really bad thing and can cause high maintenance costs, so if you were building the site from scratch, you should definitely do it that way. But if on your existing site you were ok with this up until now, you may be ok with it in the future, too.
You can certainly do it like the guy in the video, but you have to be aware of the following:
You mentioned earlier that you find loading a new page when only one div changes "to be highly inefficient". In fact, what you are trying to do (although it might look better and more efficient to the user) is in fact less efficient than a normal page refresh. Since you are not getting rid of duplicated HTML in order to be able to serve only the relevant content, the AJAX response will in fact contain the whole page (so, just the same amount of data there would be with a normal page refresh), which then has to be parsed (which also has to happen with a page refresh), and the relevant content has to be found, extracted, and added to the DOM (with doesn't happen with a page refresh).
Arguably, the render time itself might be a bit longer when refreshing the page, but still, don't fool yourself into thinking you're doing it this way because of efficiency considerations, because you're not. It's about user experience only. That's absolutely fine, though, as long as you don't break browser history or deep link bookmarkability/sharability in the process.
I see. The guy in the video is not doing what I suggested. What he's doing is fetch the whole new page via AJAX, extract the contents of that one div, and put them in the page.
My suggestion is just generally good advice, because code duplication is a really bad thing and can cause high maintenance costs, so if you were building the site from scratch, you should definitely do it that way. But if on your existing site you were ok with this up until now, you may be ok with it in the future, too.
You can certainly do it like the guy in the video, but you have to be aware of the following:
You mentioned earlier that you find loading a new page when only one div changes "to be highly inefficient". In fact, what you are trying to do (although it might look better and more efficient to the user) is in fact less efficient than a normal page refresh. Since you are not getting rid of duplicated HTML in order to be able to serve only the relevant content, the AJAX response will in fact contain the whole page (so, just the same amount of data there would be with a normal page refresh), which then has to be parsed (which also has to happen with a page refresh), and the relevant content has to be found, extracted, and added to the DOM (with doesn't happen with a page refresh).
Arguably, the render time itself might be a bit longer when refreshing the page, but still, don't fool yourself into thinking you're doing it this way because of efficiency considerations, because you're not. It's about user experience only. That's absolutely fine, though, as long as you don't break browser history or deep link bookmarkability/sharability in the process.
I think I'm starting to understand where you're coming from. Is there an article or anything you can link me to for thorough explanation of your proposed method?
I don't really have an article or tutorial handy, but basically what I was talking about before is using some sort of template, which means, a single file that is able to generate many different pages (usually based on URL parameters). That doesn't mean you have to use some clunky template engine — PHP itself is perfectly able to do that. You'll probably find some useful explanations if you search around a bit.
That said, when your site is already set up the way it is, it isn't too bad to do the AJAX thing the way you proposed (fetching the whole site and extracting the relevant information). I just said that efficiency considerations shouldn't be the reason to do it that way, because that wouldn't make any sense. Doing it for a better user experience is perfectly ok, though.
I don't really have an article or tutorial handy, but basically what I was talking about before is using some sort of template, which means, a single file that is able to generate many different pages (usually based on URL parameters). That doesn't mean you have to use some clunky template engine — PHP itself is perfectly able to do that. You'll probably find some useful explanations if you search around a bit.
That said, when your site is already set up the way it is, it isn't too bad to do the AJAX thing the way you proposed (fetching the whole site and extracting the relevant information). I just said that efficiency considerations shouldn't be the reason to do it that way, because that wouldn't make any sense. Doing it for a better user experience is perfectly ok, though.
I can't see your server side code, only the generated HTML, so I couldn't really say. If you can make it work for the whole site without duplicating code, I'd say it's probably a good setup.
Before you post, read our: 
