让Ajax网页带有后退功能

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
让Ajax网页带有后退功能

在AJAX 做了一个项目后,测试人员告诉我,新闻列表翻了很多页后,当查看过一条新闻的详细信息返回目录的时候,不能返回到已经翻过的页码,而要从第一页重新翻,这样很郁闷。网上面找到一篇<开发保留标准浏览器功能的AJAX应用程序>的文章,按照里面的介绍,把相应的代码节选出来,保留在这里。

我实现原理是:每翻一次页,把当前的页码存入碎url的碎片标识中,待客户查看完详细信息后返回到目录,在目录的body的onload事件执行setOptionValue,将碎片的内容获取下来,再执行读取目录的函数;以达到保存翻页信息的功能。

//使用URI的碎片标识符部分,创建状态的历史记录;
function makeHistory(newHash)
{
window.location.hash = newHash;
expectedHash = window.location.hash;
alert(expectedHash);
return true;
}
//检查浏览器历史记录中的URI
function handleHistory()
{
if ( window.location.hash != expectedHash )
{
     alert(window.location.hash + "|" + expectedHash);
    expectedHash = window.location.hash;
    var newoption = expectedHash;
    setOptionValue( newoption );
}
return true;
}

function pollHash() {
handleHistory();
//window.setInterval("handleHistory()", 1000);
return true;
}

//获取碎片中的内容,可进行任何操作
function setOptionValue(value)
{
// var myForm = document.make_history;
// var mySelect = myForm.change_year;
// mySelect.options[value-1].selected = true;
    document.getElementByIdx("testDiv").innerHTML = value.replace('#','');
    Test(value.replace('#',''));
    alert(value.replace('#',''));
return true;
}
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2007/07/20/2912332.html   ,如需转载请自行联系原作者
相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
72 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
10月前
|
XML 数据采集 JSON
scrapy_selenium爬取Ajax、JSON、XML网页:豆瓣电影
在网络爬虫的开发过程中,我们经常会遇到一些动态加载的网页,它们的数据不是直接嵌入在HTML中,而是通过Ajax、JSON、XML等方式异步获取的。这些网页对于传统的scrapy爬虫来说,是很难直接解析的。那么,我们该如何使用scrapy_selenium来爬取这些数据格式的网页呢?本文将为你介绍scrapy_selenium的基本原理和使用方法,并给出一个实际的案例。
|
1月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
1月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
7月前
|
存储 前端开发
ajax实现简单的点击左侧菜单,右侧加载不同网页
ajax实现简单的点击左侧菜单,右侧加载不同网页
52 0
|
10月前
|
数据采集 前端开发 JavaScript
Python爬虫实战:抽象包含Ajax动态内容的网页数据
Python爬虫实战:抽象包含Ajax动态内容的网页数据
|
10月前
|
前端开发 数据库
通过ajax调用数据字典数据动态添加到网页下拉列表
通过ajax调用数据字典数据动态添加到网页下拉列表
|
7月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
59 0
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
73 0