- Initializing an AJAX Application
- Sending a GET Request
- Sending a POST Request
- Sending a Synchronous Request
- Receiving Multiple Data from the Server
- Aborting an HTTP Request
- Retrieving HTTP Headers
- Receiving XML from the Server
- Using JSON for Data (De)Serialization
- Creating a Waiting Screen
- Solving the Bookmark Problem
- Solving the Back Button Problem
- Using XSLT
- Using an XML Library
- Using the Yahoo! Web Service
This chapter is from the book
This chapter is from the book
This chapter is from the book
Solving the Back Button Problem
window.frames["loader"].window.location.search = "?" + escape(data);
A problem related to the issue tackled in the previous phrase is the back button (and, of course, the forward button as well). When the page's URL does not change but its contents do, the back button does not really work as expected.
To solve this problem—and again this phrase can show only a generic approach, not a full solution, since there are so many implementation-dependent details—two subproblems have to be worked on:
- First, you have to make sure that upon loading of a page, the information in location.hash is applied to the page (if you use the previous phrase, this work has already been done).
- Second, you have to make sure that the various pages with the new hash are in the browser's history; otherwise, the back and forward buttons will not work. This is done automatically with Mozilla browsers, but not with Internet Explorer.
The solution to the second subproblem is to use a hidden iframe that will load an invisible page, just to get an entry in the history of the page. Here is the iframe:
<iframe src="loader.html" name="loader" style="display:none"></iframe>
Whenever something happens on the page (AJAX-wise), the loader frame must be forced to load again, with data appended to the URL (unlike the previous code, this time there must be a reload):
if (window.ActiveXObject) {
window.frames["loader"].window.location.search =
"?" + escape(data);
}
Finally, the loader frame must take care of applying any loaded data to the main document; at least for Internet Explorer this is required, since in this browser the back and forward buttons change the contents of the iframe!
window.onload = function() {
if (location.search.length >= 2) {
var data = unescape(
location.search.substring(1));
top.applyData(data);
}
};
This makes the coder's life much more complicated, especially if there are many different AJAX effects on the page. But just to repeat one of the final sentences from the previous phrase: Your users benefit greatly from this convenient feature. And again, this workaround does not work with Safari and Konqueror (yet).