“真正地简单的历史框架包括二个开源Javascript组, DhtmlHistory 与 HistoryStorage. 这两类使AJAX 应用支持按书签自由翻动按钮。
首先,我们将创造一个AJAX 网页应用一系列的题目链接; 当题目被选择, 他们的内容将被装载并且显示在页的右边而没有执行整页刷新:…

"真正地简单的历史框架包括二个开源Javascript组, DhtmlHistory 与 HistoryStorage. 这两类使AJAX 应用支持按书签自由翻动按钮。首先,我们将创造一个AJAX 网页应用一系列的题目链接; 当题目被选择, 他们的内容将被装载并且显示在页的右边而没有执行整页刷新:
图：最后实现的效果.

这里有完成后的效果，大家可以看看….

这个例子比较简单且可以创造其它的简单的技术，譬如使用iframe 的iframe 和hyperlinks 。然而,这足够说明怎么使用简单的历史API控制的先进方式, 提供按书签, 和存贮过程的服务器的声明。它提供剪贴代码这样的比较先进的AJAX 应用。
例子应用包括四个主要文件: advanced.html advanced.css advanced.js 和 topics.xml。我们并且使用三个框架加速发展 : DhtmlHistory 和HistoryStorage APIs; X DHTML topics (DHTML 的一个开放来源工具箱; ) Sarissa (一个开源API 为提供 XmlHttpRequest 和XML.这里作用的就是这个开源的API)
我们先从XML 文件开始, 命名topics.xml 我们将使用这个文件创造我们最初的用户界面:
[CODE_LITE]

[/CODE_LITE]
这是记录各个可得到的topics的一个简单XML 文件。我们分配各个题目几个属性, 譬如id 和 title 我们以后将提取使用Javascript加强这份菜单sidebar 。
其次, 我们创造advanced.html文件。
[CODE_LITE]

[/CODE_LITE]

接着建立一个advanced.js文件。
[CODE_LITE]
/*
Copyright (c) 2005, Brad Neuberg,

Permission is hereby granted, free of charge,
to any person obtaining a copy of this software
and associated documentation files (the
“Software”), to deal in the Software without
restriction, including without limitation
the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons
to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this
permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT
WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT
OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR
THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

// initialize ourselves when the page is finished
// loading
window.onload = initialize;

// an array of our topics
var topics = new Array();

function initialize() {
// initialize the DhtmlHistory
// framework
dhtmlHistory.initialize();

// if this is the first time the page
// has loaded, fetch the list of
// topics remotely
if (dhtmlHistory.isFirstLoad()) {
topics = loadTopics();
historyStorage.put(”topics”, topics);
}
else {
// else, simply extract it from our
// history storage
topics = historyStorage.get(”topics”);
}

// display our topics list
displayTopicsList();

// initialize our initial state from
// the browser location after the hash
var currentTopic =
dhtmlHistory.getCurrentLocation();
displayTopic(currentTopic);

// catch when a user clicks on a new
// topic
var menu =
document.getElementById(”menu”);
xAddEventListener(menu, “click”,
handleTopicChange,
false);

// set ourselves up to listen to
// history events
dhtmlHistory.addListener(
handleHistoryEvent);
}

function handleHistoryEvent(newLocation,
historyData) {
var topicID = newLocation;

// display this topic
displayTopic(topicID);
}

function handleTopicChange(e) {
var evt = new xEvent(e);
var target = evt.target;
var topicID = target.getAttribute(”topicID”);

// display this topic
var content = displayTopic(topicID);

// add this to our history
dhtmlHistory.add(topicID, content);

// cancel the default behavior of hyperlinks
return evt.cancel();
}

function displayTopic(topicID) {
var topic;

// if no topic passed in then get the
// default topic
if (topicID == null ||
topicID == “”) {
for (var i = 0; i initialize(), 当第一页装载, 我们必须使用dhtmlHistory .getCurrentLocation() 方法得到当前地点在散列值以;  

下面建立页面显示的内容，分别为topic1.html、topic2.html、topic3.html,这里的文字可以随便写了！

topic1.html
[CODE_LITE]
Hello Topic 1 World!

-Ajax
-advanced.css
-advanced.html
-advanced.js
-topic1.html
-topic2.html
-topic3.html
-topics.xml
-Lib
–history
—dhtmlHistory.js
—historyStorage.js
—serializer.js
–sarissa
—sarissa.js
—sarissa_dhtml.js
—sarissa_ieemu_xpath.js
—sarissa_ieemu_xslt.js
–x
—x_core.js
—x_dom.js
—x_event.js
[/CODE_LITE]

topic2.html
[CODE_LITE]
Hello Topic 2 World!
This is a simple two column layout with a left menu box. By modifying the stylesheet, this layout can serve as the basis for many standard two column layouts. As is the case with most layouts in the Reservoir, the order of elements (header, content, menu) in the HTML source is friendly and accessible to mobile computers, text-based browsers, and alternative/accessible devices.
[/CODE_LITE]

topic3.html
[CODE_LITE]
Hello Topic 3 World!
[/CODE_LITE]
再有就是建立一个advanced.css样式表!
[CODE_LITE]
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica,
sans-serif;
color:#333;
background-color:white;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px verdana, arial, helvetica,
sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}

a {
display:block;
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica,
sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#content {
margin:50px 50px 50px 220px;
padding:10px;
}

#menu {
position:absolute;
top:55px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
}
[/CODE_LITE]
至此一个简单的Ajas应用就实现了，当然X DHTML topics 与 Sarissa 的API是必不可少的，主要的目录文件大家可以去相关的网站下载，这里我给出目录结构:
些Ajax应该的目录结构如下：
-Ajax
-advanced.css
-advanced.html
-advanced.js
-topic1.html
-topic2.html
-topic3.html
-topics.xml
-Lib
–history
—dhtmlHistory.js
—historyStorage.js
—serializer.js
–sarissa
—sarissa.js
—sarissa_dhtml.js
—sarissa_ieemu_xpath.js
—sarissa_ieemu_xslt.js
–x
—x_core.js
—x_dom.js
—x_event.js