Using History API and Custom Data Attributes - HTML5 Programming for ASP.NET Developers - page 171

• The URL becomes too complex and is rarely easy to remember. Although most web
applications don't expect you to remember individual page URLs (they have
navigation menus), in certain cases easy-to-remember URLs work great. Consider,
for example, a social-networking application such as Facebook. Facebook offers
shorter profile URLs that are much easier to remember than traditional profile URLs
that have a complex ID in the query string.

• If you use hash-fragmented URLs, your processing logic may become tied to the
hash-fragment parameters. If you add, remove, or change these parameters, you
may also need to update your code due to the changes.

• In spite of the fact that hash-fragmented URLs are widely used in Ajax-driven web
applications, search engines may treat them differently. For example, Google
expects hash-fragmented URL data to begin with #! (a hash mark followed by an
exclamation point). Once you do that, your application is considered Ajax crawlable .

n Note ASP.NET Ajax extensions use the hash-fragment technique to generate URLs for multiple Ajax requests.
The ScriptManager server control makes it easy for you to generate and handle hash-fragmented URLs through
its EnableHistory property.

HTML5 History API
HTML5 comes to the rescue when it comes to creating different URLs for individual Ajax requests. Using
the HTML5 History API, you can add entries to the browser history programmatically. These
programmatically added URL entries need not exist physically on the server. When you navigate to an
entry added via the History API, the browser raises an event to give you chance to synchronize the URL
and the page content. By handling this event, you can fetch relevant content from the server and render it
on the page. If you use the HTML5 History API, there is no need to use hash-fragmented URLs—you can
avoid all the associated complexity. If a user bookmarks such a programmatically added URL and later
navigates to it, the request is sent to the server as a fresh request, and you need to handle it on the server.

Understanding the History API
Earlier in this chapter, you learned about the History object (see Table 6-1). The HTML5 History API
essentially adds two methods and one event to the traditional History object. These new methods and
event are listed in Table 6-2.

Table 6-2. New Methods and Event of the History Object

Method / Event Description

pushState() Adds an entry to the browser session history with the given state, title, and URL.

replaceState() Updates a current entry in the browser's session history with new details. You can use

the replaceState() method if the data associated with a history entry changes.

popstate A popstate event is raised by the window object when the current history entry changes.

If the history entry was created by pushState or replaceState , the popstate event's
state property contains a copy of the history state object.