reload page source for AJAX request

Question

I found that if I use AJAX calls on a page, the page source stays intact. This can cause problem, e.g. if user use forward/backward operation in a browser, when it backs to the page browser will have/read original HTML code and not the one with AJAX content. For example, let's say you construct a page with

<div id="foo">
<script type="text/javascript">
setTimeout('ajaxFunction', ...);
</script>
</div>

once you load the page, it will call ajaxFunction, which eventually will replace content of div tag with id="foo" (btw, it can be recursive calls as well). But the page source which you can view from the browser will still contains this snippet. Is there is any way to refresh page source without reloading the page?

I know that I can add page reload inside of my AJAX code, but I'd like to avoid it and not disturb end-users.

Answer 1

Browser is showing you the content which it received from server in HTTP response. All dynamic changes in DOM are not reflected there. So you can use firebug in FF or developer tools in Chrome to track dynamic changes.