load a new page using ajax

Question

I am new to ajax and i wanted to know if we can load a complete new page and not just a part of it using ajax. Please give a small example script for understanding if this is possible. Here i am trying to display only one url to user while i change from one page to another when he clicks on any of the links in the page.

Answer 1

When you make an AJAX request, a request goes off and brings you the contents of the URL that you have requested. Now technically you can do whatever you like with the contents (which could be HTML), you can replace any element within the DOM with it. Be careful however of replacing EVERYTHING on the page, you are more likely just going to want to replace what is within the tags.

Answer 2

If what you want to do is show one URL for multiple pages, AJAX is overkill. Why not just use an IFRAME?

Answer 3

You can of course request for a new page and load it via body.innerHTML = ajax.responseText;

I would strongly recommend against this though for reasons outlined in this post: http://stackoverflow.com/questions/640422/why-not-just-using-ajax-for-page-requests-to-load-the-page-content/640461#640461

The whole premise really is that with AJAX you don't need to reload the whole page to update a small percentage of that webpage. This saves bandwidth and is usually much quicker than reloading the whole page.

But if you are using AJAX to load the whole page this is in fact counterproductive. You have to write customised routines to deal with the callback of the AJAX data. Its a whole lot of extra work for little to no increase in performance.

General rule for where to use AJAX: If your updating >50% of your page, just reload, else use AJAX.

You will not only need to request for the new page, but then also take care of ensuring the old styles on the current page are removed and don't interfere with the new page. Theres all sorts of problems associated with what your trying to do. It's possible, but I recommend not to do it.

edit: actually you might be able to just do document.write(ajax.responseText) which should take care of overwriting everything in the document, including css styles etc. Though still don't recommend it.