4

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.

Srk
  • 51
  • 1
  • 1
  • 5
  • Often this sort of request is much easier to answer if we know the reason for wanting it. That information may reveal alternative approaches, or perhaps may make it clear that what you want just isn't possible. At the very least, you're likely to get responses suggesting reasons why it's a bad idea, which may save you a lot of trouble. – Peter Hansen Dec 04 '09 at 15:51

5 Answers5

12

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: Why not just using ajax for Page Requests to load the page content?

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.

Community
  • 1
  • 1
Gary Green
  • 22,045
  • 6
  • 49
  • 75
2

When you're finished with processing the AJAX request simply use this JS line:

window.location.replace('<URL of the new page>');

This has exactly the effect of loading the new page via 

<a href="<URL of the new page>">...</a>.
Jack
  • 10,943
  • 13
  • 50
  • 65
Tijger
  • 31
  • 1
  • 4
    When you're finished with processing the AJAX request simply use this JS line: window.location.replace('URL of the new page'); This has exactly the effect of loading the new page using a href="URL of the new page".../a. – Tijger Sep 18 '11 at 19:20
0

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.

Tim Ebenezer
  • 2,714
  • 17
  • 23
0

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

jhurshman
  • 5,861
  • 2
  • 26
  • 16
0

This could be useful if your page was unsure if it was expecting back errors to be inserted onto the page or a "new" submission confirmation page. This can be used when you want to put a validation servlet (or whatever) in front of the submission servlet (or whatever). If the page always hits the validation servlet, you hide the submission servlet which actually performs the data update. In the case where the validation passes, forward to the submission servlet. The user never knows what happened in the background.

When the page gets a response back you could just look at the first portion of the response text and determine if it had a keyword set by the server, which means this is a new page. Remove the keyword from the text, and do document.write(ajax.responseText); as described previously. Otherwise insert the response text into your errorBox div and let the user retry submission.

uranazo
  • 51
  • 1
  • 1