基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端。

如果修改浏览器地址栏的url,同时不刷新整个页面就完美了。

先来看看什么是pushState? 给history对象增加一个状态。

window.history.pushState(stateData, ‘title’,  ‘newUrl’); // stateData用于事件参数

window.addEventListener(‘popstate’, function(){

         var state = window.history.state;

         // to do …

});

下面实例展示了pushState如何解决上面问题。

末了,history.replaceState和pushState类似,区别是替换一个状态。

时间: 2024-12-23 22:13:17

基于H5 pushState和Ajax完美实现页面局部刷新的相关文章

使用ajax与iframe嵌套实现页面局部刷新

使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.?1. [代码]javascript代码 function cj_start(depname,groupid){    var urls = "<%=path%>/userGather.action";    var status = "";    var html_1 = "<iframe frameborder=\"0\&q

jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代码如下: Java代码   <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("email&quo

关于页面局部刷新例程

RS技术的一个具体例子 在前面的帖子中,我介绍了RS的基本工作原理,显然如果将RS技术运用在一个 网站的设计中将会有很多非凡的作用(尤其是它的那个最大的优点,可以在不刷新 页面的情况下调用服务端的代码).正是因为这个特点,你就可以象在编写一个 传统的C/S模式的程序一样,对数据库的数据进行处理了(我想大家一定很想知道具体应该如何来实现了,下面将给出一个具体的例子,调试这个破程序几乎快把我给累死,呵呵.) 从前面的描述可以看到,要使用RS技术就需要客户端和服务端满足下面两个条件: 1.客户端只需要

解决Ajax框架下页面回退刷新问题

存在问题 如果使用Firefox等浏览器访问RMS网站时,我们可能会发现页面之间的切换是通过AJAX异步请求实现的,同时页面的URL不会发生改变,虽然可以通过页面上的按钮通过AJAX异步请求实现回退刷新,但是对于浏览器前进和后退不能支持,每当刷新与后退之后,页面都会退到最开始的欢迎页面.AJAX可以实现页面的局部刷新,可以做到非常好的数据加载效果,给用户带来非常良好的体验,但是AJAX不能在浏览器的历史会话中保留记录,当你点开一个页面,AJAX各种数据加载非常快捷,例如一个列表页面可以用异步加载

Webform——页面局部刷新

有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控件为:AJAX扩展里面的ScriptManager和UpdatePanel.    ScriptManager就是封装好的JS代码,可以直接拿来用.    UpdatePanel,要局部刷新的部分放在这里面去. 在这张图片里,省市区三个下拉列表就被放在了UpdatePanel里面,从而实现了局部刷新

ajax实现网页的局部刷新

从页面到ajax函数的运行的大致思路:页面点击事件,触发 xmlHttp.open("post", url, true)函数的执行.通过web.xml的配置的servlet-mapping,url所附带的参数会被处理的servlet类接收,此类中可进行数据库的查询,并将查询结果以xml文件的格式保存下来,页面会以解析xml文件将值传到前台,完成了局部刷新的功能. 1.mysql创建的数据库表的字段及相对应的javabean.(可使用hibernate框架构建user数据库) user.

JavaWeb-----------Ajax页面局部刷新(三)

元旦节即将过去,现在继续回来写我的总结复习笔记,今天我们通过ajax技术来获取数据库里的用户信息,并 实现局部刷新到网页上.那么首先就是封装一个ajax的库 function rpajax(url,successrsp) { var xhr=windows.XMLRequest ? new XMLHttoRequest(): new ActiveXObject('Microsoft.XMLHTTP');//首先还是从创建一个ajax对象开始,考虑到浏览器的兼容性 使用了以上两种方式 xhr.op

HTML页面局部刷新

/.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服务器处理后返回结果,再由Ajax接收数据: 3.通过DOM方法或jQuery方法将数据载入页面,事件响应刷新完成. $('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: "POST", url:

AjaxAnyWhere 实现页面局部刷新

这个比较jquery.单纯ajax异步简单多了,不多说了直接上代码. 需要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa.js  ,免费下载地址http://download.csdn.net/detail/xuke6677/8064977 目录结构如下: 1.ListBean.java 实体类    <strong><span style="font-family:System;font-size