发布网友 发布时间:2022-04-23 14:19
共9个回答
懂视网 时间:2022-05-15 05:49
这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
使用Ajax可以异步获取数据,可以更高效地渲染页面。
但也存在这一些问题:
再刷新页面,页面就会变成初始的状态
浏览器的前进后退功能无效
对搜索引擎的爬虫抓取不友好
1、
早前会使用浏览器的 hash锚点 来解决
不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题
再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度
2、
随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题
通过一个路径定义一个页面部分,在单页面应用中可常见到(Angular中已经封装了)。但好像只有google真正支持了对该路径的爬取
3、
HTML5的新特性做了助力,通过pushState、replaceState 这两个新的history方法和 onpopstate 这个window事件,解决了上述三个问题
当然,也因为是HTML5的新特性,在旧版本浏览器上支持度不好的,建议是再用hashbang的方法来兼容
本文主要讲讲pushState这几个新东西
文字太枯燥了,先看看图示直接点感受
这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url后也能获取相应的数据
其中state是个json对象,可以自定义存放一些数据,title即是这个url对应的标签title(不过好像浏览器都忽略了这个参数)
url是某个页面的标记url(操作只会改变地址栏的url,并不会立马加载这个url,可以简单的标记 ?w=a、ajaxPage.html/w=a、&w=a,只是一种标记,取值时对照着来就行)
replaceState和pushState的不同是:前者直接替换当前值,后者就是向栈中压入一个值
window.onpopstate 事件触发之后,可以通过 history.state获取到上述方法的第一个json对象
实现部分
HTML
<p class="push-state-test"> <input type="button" id="ajax-test-btn" value="Ajax获取"> <p>value: <span id="ajax-test-val">0</span></p> </p>
JS
PHP
<?php $val = $_REQUEST['val']; echo $val + 1; ?>
这里通过?val=num 的方式,标记了不同的ajax结果页
Tips:
使用pushState之后,当前进后退触发了popstate事件,获取到相应的json对象
json对象的数据可自定义
可简单地存储相关标记再发个请求,或者直接将该标记页对应的结果直接存起来
随着后退操作,地址栏url得到了更新,异步的数据也得到了更新
刷新页面或新打开页面,就要根据url中的标记去请求数据了
要记住的是,浏览器并不会自动加载url这部分标记对应的这个异步内容页,需要我们去获取
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
AJAX请求队列实现
使用ajax异步提交表单的几种方法总结
解决AJAX请求中含有数组的办法
热心网友 时间:2022-05-15 02:57
push
[puF]
n.
推, 推动, 奋发, 干劲, 进取心, 攻击
vt.
推, 推动, 推行, *迫, 增加
vi.
推, 推进, 增加, 努力争取
push
[pJF]
vt., vi.
推;推动;推进
They pushed the door open.
他们把门推开。
Don't push against me!
别推我!
He pushed his way through the crowd to the the front of rostrum.
他从人群中挤到讲台前。
催促;力劝;强烈要求
My friends are all pushing me to enter politics.
我的朋友们都力劝我从政。
"If you push him too hard, he may lose the confidence in his work and feel frustrated."
"你如果催他太紧,他可能对工作失去信心而感到沮丧的。"
"I'd like to stop for a longer talk, but I'm rather pushed today."
"我很想停下来多谈一会儿,不过我今天很忙。"
使引人注意;推销(商品)
They aren't really pushing their business enough.
他们对业务推展得不够。
催*;驱策
His friends and relatives are all pushing him to enter politics.
他的朋友和亲戚都怂恿他从政。
贩卖(*)
push
n.
推;挤
She gave a hard push, and the door opened.
她使劲一推, 门开了。
(军队的)推进
求胜的决心;进取心
援助;帮助; 有利的影响
at a push
如果真有必要;如果为情势所迫
get the push
被解雇
push around
随意使唤;摆布;粗鲁地对待
push in
鲁莽地插话;插手
push off
走开;离开
What are you doing here in the garden? Push off at once!
你在花园里干什么?马上给我走开!
It's time to push off.
该走啦。
push on
赶快;尽快
We're late, we must push on.
我们晚了,必须赶快点。
push
[puF]
vt.
推; 推动
使突出, 使伸出, 使延伸
大力推进, 推行; 努力干, 使劲要求; 设法推销, 宣传
强迫, *迫, 催*, 促使
使引人注意, 提携(人); 推销(货物), 贩卖
扩展, 扩大, 增加
(台球)推撞
[常用被动句]使(某人)在金钱等方面受窘, 对(难题)感到困惑
push a door open
推开门
push one's plan
大力实施自己的计划
push one's way through a crowd
从人群中挤出
pushone'snoseinto other people's affairs
干涉别人的事情
push one's claims
坚持要求
push a campaign
大力推进一场运动
be pushed for time
感到时间紧迫
push a person
推荐人
push one's wares
推销货物
Some plants push their roots deep into the soil.
一些植物的根深深长入土中。
push
vi.
推
推行, 推进, 努力前进, 挤着走
伸展, 扩展; 突出; 增加
竭力争取(for)
[古]用角触
a dock pushing far out into the sea
远远伸入海中的码头
push for higher wages
争取提高工资
The door pushs easily.
这门一推就开。
push
n.
推, 推进, 推动
奋斗, 奋力
攻击, 攻势; 推销; 运动
紧迫, 紧要关头
劲头, 进取心, 事业心, 能力
[英俚]解雇
一批人; [英]一帮贼[罪犯等]
(刀锋或兽角等)刺, 冲, 戳
(台球)推球; (棒球)轻击
an economic push
经济攻势
at one push
一推, 一下子
at the first push
第一; 在开始攻击时
push-bike
n.
(=push bicycle)自行车(区别于机动脚踏两用车或摩托车)
push-cart
n.
手推车, 婴儿推车
push-down
n.
【航空】推下
【自】 迭式存储器, 后进先出存储器
push-over
n.
容易击败的对手, 弱敌
容易被吸引的人; 容易方向的位移
push-pin
n.
图钉
微不足道的东西
[美]高顶图画钉
push-pull
[`pJF`pJl]
adj.
【无】 推挽式的
pushrake
n.
推集机
push-type
adj.
推进式的, 前悬挂式的
push-up
n.
【体】俯卧撑
垮[落]沙
砂眼, 型穴; 结疤
pushable
adj.
可以推的
pushful
adj.
有进取心的
pushy
[5pJFI]
adj.
[美]前进的, 有进取精神的, 有干[冲]劲的
at a push
临危, 急迫时, 如果的确必要
be pushed for
[口](时间)紧迫; (金钱)短缺
be in the push
知情, 熟悉情况
be put to the push
尝尽艰难, 受到严峻考验
bring to the push
使陷绝境
come to the push
临到紧要关头
get the push
被解雇, 被辞退
求婚被拒绝
give the push
解雇某人, 叫(某人)卷铺盖, 叫某人滚蛋
拒婚; 抛弃(情人)
give sb. the push
解雇某人, 叫(某人)卷铺盖, 叫某人滚蛋
拒婚; 抛弃(情人)
if it comes to the push
如果急需的话; 到了紧要关头
when it comes to the push
如果急需的话; 到了紧要关头
make a push
(对某事)加把劲, 用最大的努力(做某事);【军】猛烈攻击, 大举进攻
make a push at sth.
(对某事)加把劲, 用最大的努力(做某事);【军】猛烈攻击, 大举进攻
make a push for sth.
(对某事)加把劲, 用最大的努力(做某事);【军】猛烈攻击, 大举进攻
make a push on sth.
(对某事)加把劲, 用最大的努力(做某事);【军】猛烈攻击, 大举进攻
make a push to do sth.
(对某事)加把劲, 用最大的努力(做某事);【军】猛烈攻击, 大举进攻
quick push
[美俚]容易受骗上当的人; 易被击败的运动员[队]
stable push
[美俚]内幕新闻; 来自有影响人士的消息
push along
(= push ahead [forward, on])奋力前进; 抓紧进行
[口]离开, 走
push and go
活力, 精力
push and shove
连推带挤
push around
把... 推来推去; 摆布; 烦扰
push about
把... 推来推去; 摆布; 烦扰
push aside
推向一边, 推开
push away
推开
push back
推回; 迫使后退
push by
从(某人)身边挤过去
push past
从(某人)身边挤过去
push for
催促着要, 敦促(做某事)
push forward
抓紧进行
push ahead
抓紧进行
push in
推进, 推动(做某事)
小艇靠岸
push into
推进, 推动(做某事)
小艇靠岸
push of pike
肉搏, 白刃战
push off
[口]离开, 走
用桨或篙把船撑开
push on
向前推进, 奋力前进
push on
推到...身上, 推给...干
push onto
推到...身上, 推给...干
push on with
坚决进行(下去), 继续(进行)
push one's way
挤着前进
push oneself
鞭策自己; 发愤; 自强
push oneself forward
突出自己, 出风头
push out
推出; 撵走
长出; 伸出
驶出
push over
推倒, 推翻
push through
完成(事务)
冲过, 穿过
(树叶等)长出
使(提案)获得通过
push up
增加, 提高
push up to
*近
chin push
推下颌
cost push
成本推动
cut-off push
断路器按钮
floor push
脚踏开关[电门]
foot push
脚踏按钮
hand push
手按, 按钮
ice push
【地质】冰壅
landing-call push
楼层呼叫电钮
rolling push
滚推球
side push
侧边按钮
starter push
起动按钮
suspension push
悬垂式按钮
table push
桌上按钮
uppish push
挑推球
push shove thrust propel
都含“推"的意思。
push 系常用词, 指“用力推动接触的人、物", 如:
push a baby carriage
推童车。
shove 指“粗暴地推开挡路的人或物"、“使劲推动(重物)", 如:
shove a box into the corner
用力把箱子推到角落里。
thrust 指“突然用力地推"、“使透过某物", 如:
He thrust a dagger into her heart.
他把匕首剌入她的心脏。
propel 指“推进"、“推动", 如:
a boat propelled by oars
以桨操作的船。
push
来自拉丁语pulsare拍打→古法语pousser
热心网友 时间:2022-05-15 04:15
推,压,按,追求,攻击,接近,push
KK: []
DJ: []
vt.
1. 推;推动,推进
He pushed open the library door.
他推开了图书馆的门。
2. 挤出(路)前进[O]
3. *迫;催促,促使[O][O2][(+into)]
She pushed her son to pursue an academic career.
她督促儿子从事学术。
4. 推销(商品);提携(某人)
5. 【俚】贩卖(*)
6. 扩展,扩大,增加
Alexander pushed his conquests still farther east.
亚历山大将他所征服的地区扩展到更远的东方。
7. 伸出,使突出
vi.
1. 推;推开
2. 推进;向前挤[Q]
Our troops pushed northward.
我军向北推进。
3. 伸展,扩张
n.
1. 推;推进[C]
He opened the door with one push.
他一推门就开了。
2. 奋发,努力,奋进[C]
We must make a push to get the job done.
我们必须加把劲把这事干完。
3. 冲劲,进取心[U]
4. 攻击,攻势;推销运动[C]
5. 紧迫,紧急关头[S]
热心网友 时间:2022-05-15 05:50
push—百度词典
[词典释义]vt. 1. 推;推动,推进 2. 挤出(路)前进[O] 3. *迫;催促,促使[O][(+into)] 4. ...
vi. 1. 推;推开 2. 推进;向前挤 3. 伸展,扩张
n. 1. 推;推进 2. 奋发,努力,奋进 3. 冲劲,进取心 4. 攻击,攻势;推销运动
热心网友 时间:2022-05-15 07:41
push
KK: []
DJ: []
vt.
1. 推;推动,推进
He pushed open the library door.
他推开了图书馆的门。
2. 挤出(路)前进[O]
3. *迫;催促,促使[O][O2][(+into)]
She pushed her son to pursue an academic career.
她督促儿子从事学术。
4. 推销(商品);提携(某人)
5. 【俚】贩卖(*)
6. 扩展,扩大,增加
Alexander pushed his conquests still farther east.
亚历山大将他所征服的地区扩展到更远的东方。
7. 伸出,使突出
vi.
1. 推;推开
2. 推进;向前挤[Q]
Our troops pushed northward.
我军向北推进。
3. 伸展,扩张
n.
1. 推;推进[C]
He opened the door with one push.
他一推门就开了。
2. 奋发,努力,奋进[C]
We must make a push to get the job done.
我们必须加把劲把这事干完。
3. 冲劲,进取心[U]
4. 攻击,攻势;推销运动[C]
5. 紧迫,紧急关头[S]
以上结果由 Dr.eye译典通字典 提供
热心网友 时间:2022-05-15 09:49
push [简明英汉词典]
[puF]
n.推, 推动, 奋发, 干劲, 进取心, 攻击
vt.推, 推动, 推行, *迫, 增加
vi.推, 推进, 增加, 努力争取
热心网友 时间:2022-05-15 12:14
信息分发的一种形态。它是由客户端从服务器取回信息的
Pull方式的反义词,表示的是由服务器向客户端发送信息的形态。
信息推送技术(Push)是网络公司通过一定的技术标准或协议、把从网上获得的信息通过固定频道向用户发送的一种新型信息传播系统。
信息推送技术改变了传统的下拉(Pull)的信息检索方式,不是用户去查找,而是主动让信息去找用户。推送服务是从网上获取用户需求的信息,对信息进行分类,供用户对网上的信息进行预订和选择,用户联网后就可以随时获得网上的有关新信息。
热心网友 时间:2022-05-15 14:55
push作为及物动词的时候意思是“推动,增加;对…施加压力,*迫;按;说服”,作不及物动词的时候意思是:“推进;增加;努力争取”,作名词的时候意思是:“推,决心;大规模攻势;矢志的追求”。
热心网友 时间:2022-05-15 17:53
推