0

After an Ajax call I reload a web page. I have two options..

  1. I can send the page as responseText and have it write to the screen using document.write().

  2. I can send a control to Javascript telling it to reload the web page using window.location.href.

Option 1 is good because it takes only one round trip instead of two. However the onload Event was not triggered as it would with a normal reload.

Option 2 is good because it triggers the onload Event.

Is there any way to to get the best of both worlds...i.e. I would like to send the page using responseText but also have it loaded like a new page, once it is recevied.

I simply does not make sense to make 1.5 trips instead of .5 trips when you are on the server (control is on the server) and need to reload the page. Is this a weakness of Ajax or do I just not know hot to do it?

Related:

Caching Issues

*

Similar Post

Community
  • 1
  • 1
  • Can you provide some more context for what you're trying to accomplish? – Brian Driscoll Jan 05 '12 at 17:15
  • Context...all cases where I'm using Ajax..and the server makes a choice that a reload is needed...specefically...when the user logs in...when the use signsup...when the user logs out...those are the current 3 specefic cases. –  Jan 05 '12 at 17:17
  • Ajax techniques aren't really meant for sending an entire page's worth of content from the server to the browser; their intended use is to update an already loaded page by making small changes to the page's content based on data retrieved from the server. – Brian Driscoll Jan 05 '12 at 17:21
  • Right..but on a signup I need to hit the server to populate the database..from there I need to reload the next page...it does not makes sense to have to have control pass back to the client and then do a reload...how are people doing this? If not ajax how? –  Jan 05 '12 at 17:25
  • It should only be one round trip...send the data to the server(database), have the server send the next page...that's it...it's simple...how do I do it...if not with Ajax? –  Jan 05 '12 at 17:26
  • 1
    You can move all of your code from the onLoad event into a function. And simply call it when you get set the page using response text. And rather than using 'document.write()' I'd recommend using 'document.body.innerHTML' and 'document.head.innerHTML'. – Metod Medja Jan 05 '12 at 17:27
  • @stack.user.0 Well I'm guessing you use a button to submit a form to send the data. So why use ajax at all. Without ajax the user will get redirected to that page. – Metod Medja Jan 05 '12 at 17:30
  • "Option 2 is good because it triggers the onload Event." Why, exactly, is that is a good thing? – graphicdivine Jan 05 '12 at 17:34
  • @Method - b.c. if the user picks an email that is already taken he has to select another one..hence there is not point in reloading the page in this case. –  Jan 05 '12 at 17:34
  • @graphic - because that is how I bind all user action...that is how javascript knows how to run when say the user clicks a button or presses the enter key. –  Jan 05 '12 at 17:35
  • In that case, I'd recommend @MetodMedja's approach: "You can move all of your code from the onLoad event into a function. And simply call it when you get set the page using response text". – graphicdivine Jan 05 '12 at 17:47

2 Answers2

1

Ok from what I see you want to load a new page when an user registers. The best way to do this is without ajax. As the page gets loaded and the onLoad event gets fired.

But you also want to check if the email the user used is already in use. The way I like to do this is to make a variable and set it to false. The use the onchange event of the email input field to run an ajax validation. And if the email is available and valid I set the variable to true. And I add a function to the button's onsubmit event and return the variable. This way the user gets redirected only if the email is available.

Or:

You can move all of your code from the onLoad event into a function. And simply call it when you get set the page using response text. And rather than using 'document.write()' I'd recommend using document.body.innerHTML and document.head.innerHTML.

Metod Medja
  • 768
  • 6
  • 10
  • Good thinking but in your first option you are still making two round trips..I know this is probably how many people do it but still inefficient in my mind....Option 2 holds more promice. Bascially, when the user hits submit, all the data is validated, and the page is returned as responseText + it will work because I automatically call the onload function.....this seems to perfect..thanks! –  Jan 05 '12 at 18:00
  • I think the first one is the way most people do it. As it does take multiple trips but you get the result without "reloading" the page. – Metod Medja Jan 05 '12 at 18:07
0

Don't use AJAX for this, or even JavaScript at all for that matter (except for form validation, of course). You can use plain old HTML 2.0.

<form action="processSignup.php" method="post" onsubmit="return isFormValid();">
    <!-- input fields here -->
    <input type="submit" value="sign up" />
</form>

I'm no PHP expert, but the server code should not be complex. Make your database call, then redirect to the next page. It could be exactly the same code as from your AJAX example.

Don't try to over-complicate this. This is the basic pattern that's been used from the early 1990s. (Or earlier, I'm not sure, I didn't have internet access before then.) You don't gain anything by using AJAX patterns here.

Community
  • 1
  • 1
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • Interesting...so many options...all better than what I'm currently doing. –  Jan 05 '12 at 18:07