We Keep Coding

Alternative Links to Broken Links?

today a good friend of mine had an offline website and wanted to have it that way an alternative link is provided when the other doesn't work.
E.G. Say sometimes a server works and you go to it frequently and then it is down. He wants an alternative link for that link if that server is not available, instead be redirected to another. I assume that JavaScript is required.
I have no code to provide since I don't know how. Please leave random code of yours as a representation of your answer. Hopefully I asked the question correctly for you to understand. :)
I will edit this question if it is not understandable.

The only way for this to work is to create an API endpoint on his server with the website that could be down, which just returns success. This is usually called a healthcheck.
Then on the website which links the broken one, use a JQuery POST to see if the healthcheck returns success or failure, and then change the HTML Dom accordingly. (So if other people link to your website, they would have to do this)
You can't redirect from the website that would be down from your point, because.... well it would be down....

How to dynamicaly change the HTML source of a page?

Until now I believed that it was not possible for the HTML source of a page to be modified without reloading it entirely. I suspect what I've just seen is somehow related to pushState (but not only that): on the Quartz website (qz.com), you seamlessly slide to the next article once you've reached the bottom of the one you're reading, with a clean update of the URL and, amazingly, an updated HTML source.
For an example, scroll down any article, e.g.: http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/
Maybe I've missed something, but could someone explain how this is done? Which HTML5 APIs are being used here?
NOTE: My question specifically focuses on updating the HTML content which you can seen when displaying the page source (not the DOM inspector, obviously).

This looks a lot like your typical asynchronous content loading, but yes they are using pushState to change the url. What is getting you I think is the fact that the routes are well-designed so that going to that URL gives you that same article first. However behind the scenes it is all just a series of JSONP requests combined with pushState() to give a nice flowing, well-formed document. You can even verify the requests using the network tab of any modern debugging console.
See this answer for info on using pushState for url updating :Modify the URL without reloading the page
EDIT
Since you are getting stuck on the fact on how the source is changing, think about it this way: When I say "the routes are well-designed so that going to that URL gives you that same article first" I mean that going to that page will reflect that article. All you are doing by viewing the source is taking the active URL (modified by pushState, so you are really going to a different page to retrieve the source) and grabbing the text without DOM parsing/rendering. I hope that clarifies what is going on in this site in particular.

You can now do this in most "modern" browsers!
Here is the original article I read (posted July 10, 2010): (HTML5: Changing the browser-URL without refreshing page).
For a more in-depth look into pushState/replaceState/popstate (aka the HTML5 History API) see the MDN docs.
you can do this:
window.history.pushState("object or string", "Title", "/new-url");

When to use iframe, ajax() or load()?

I know iframe and ajax comparisons have been asked many times. But I would like to add the good jQuery load() function, and also ask when to use which one.
I am certain they all have their own specific features, so I don't wanna know which one is faster and so on, I am more eager to recognize when to use which to retrieve the data from another page?
<iframe>
load();
ajax();

When to use iframe?
From this answer by Manishearth
Given that framing is deprecated, and AJAX has origin control, iframes
is pretty much the only way to embed another page into yours.
GMail is made from iframes. The smooth UX of GMail (you can still use
it when your internet connection breaks, smooth navigation without
having to reload every time) comes from iframes. Again, this could be
implemented in AJAX, but it's harder.
On the other hand, issues with iframes (CSRF, clickjacking, etc) are
well known to modern developers and they can take measures to avoid
that.
- When to use Ajax?
Form validation
This is almost a no-brainer. It's so much nicer when the form tells
you as you are typing if you've filled it out wrong or not. Having to
go to the server and then return an error message is not only old,
it's slow. Leave the server validation in the form, that's important
for accessibility. But for those who can support Ajax, tell them right
away.
Comments
Comments on blogs or even just articles are a great use of Ajax.
Comments can change all the time, and especially when a commenter hits
the comment button, it's nice to see the comment appear immediately on
the page.
Filtering data
If you've got a large table with a lot of data in it, a nice
application for Ajax is to add filters and sorters to the table.
Getting your Web table to act more like Excel is really useful to
people.
Surveys and polls
When you click on your vote, the poll would just switch to show you
the results. And before you comment, About doesn't yet support Ajax on
our polls - but it sure would be nice. Maybe we can give the About.com
developers an "Ajax call" of our own.
When to use load?
As far as load is concerned, in my personal opinion, it is used to
load documents into any element in DOM, but will have same
disadvantages as ajax over iframe with regard to cross domain
data. You can use load when the result you are returning is html
and this provides option to render the result directly to the DOM
element
UPDATE:
When to use AJAX
Basically, the main difference between ajax and load is that
ajax has more options that can be set before posting data to
server plus ajax can be used to store data in the server using
type="POST" and data returned from the server may be manipulated the
way we want unlike load which can be used only to render data.
To conclude - Security wise ajax/load is good but as said before if you know the loopholes of security using iframe you can take necessary precautions to prevent them too.
AJAX USAGES AND DISADVANTAGES

AJAX back button solution similar to facebook

Im new to ajax, jquery and javascript. When i learnt ajax and jquery, i also learned about back button issues and of course i learnt it too. But this solution uses the # anchors. But I want to change the url to the actual page just like to facebook. If you use facebook, you may have noticed that when you click an image, the url gets changed to the url of image but the page doesnt navigates away.
If Any one know about facebook like solution then please answer it.

I know you don't want to hear this, and I'm also new to AJAX and I'm also working on this right now, but i can give you the advise to use hashes first. Why?
Because hashes are accpted in any browser. If i were you I would now work out a solution that can be used with or without ajax (so there's a 'normal' navigation if ajax is not available, because web crawlers don't understand javascript).
If you have successfully worked out your solution, THEN you can add some functions to use the javascript pushState() (or replaceState()) method to manipulate the url.
Don't underestimate this and use hashes at the beginning.

You are looking for Hash Navigation, also known as Fragment Navigation. Google has a very good article on this.
Here is a demo from them: http://gtv-resources.googlecode.com/svn/trunk/examples/location-hash-html.html

Best way to display SQL results

Just looking for a general consensus here. I am displaying results from my database and am filtering and sorting them at the onchange event of a select input with js. This works by adding a new _GET variable to the URL and reloading the page, then using php to select the appropriate results. Would I be better using ajax to do it in realtime? I'm just thinking about what the pro's and con's are of both options...

One thing I would worry about when using AJAX is pagination and page bookmarking, or for people who will forward a page to someone else. You can still change the URL with AJAX, though with some extra work.

To display the sql results, this will be based on the design/process of your application. There are times that it is best to load the results during page load. And there are times that AJAX is more convenient way.
Here in SO there are already a questions related to yours. I'll just provide a link for you.
When NOT to use AJAX in web application development?
Pros and cons of AJAX-loaded content
When is it appropriate to use AJAX?
Now regarding your main questions about displaying the results. As KMC mentioned if you want to bookmark your page and there is a pagination. Reloading the page I guess is much better, if I'm correct SO also use this way.
Now when you should use ajax. If the results is a small or a single data and you dont care about the bookmarks. Also when some part of the page must not be change or you are only updating some part of the pages.
These are only my assumption, please read the link I provided.