User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 294

// add Ajax loaded content to paragraph on the page
function responseReady() {
message.innerHTML=xmlhttp.responseText;
}
window.onload = init;
This script uses a variable ( messageID ) to track which of three messages needs to
load when the previous or next button is clicked. You'll need to create three text files to
load named message1.txt , message2.txt , and message3.txt and save them
in the ajax directory. Add some text to each of these files; just make sure the text is
different for each. This text will be injected into the empty paragraph element on the
page.
Open index.html in a web browser to test the file. You should be able to click the
buttons back and forth and display a different message on each click ( Figure 7-4 ) .
Figure 7-4. The output of a simple Ajax application after two clicks of the next button. The button
is disabled when the last of the three messages is displayed.
History-enabled Ajax
If you look at the URL for the page's address in the previous example, you will see it is
not updating as the different content is loaded. This isn't ideal because the pages show-
ing the different messages can't be bookmarked, and clicking the browser's back button
will not go back to the previously displayed message but instead will go to the previous
page viewed. However, the History API can be used to overcome these issues. HTML5
introduces two methods, pushState() and replaceState() , for adding to and
editing the browsing history. The first, pushState() , allows a new entry to be ad-
ded to the page's browsing history, while replaceState() will replace the current
browsing location in the history with a new entry.