鱼C论坛

 找回密码
 立即注册

扫一扫,访问微社区

查看: 179|回复: 19

[技术交流] 改变网页而网址不变

[复制链接]
最佳答案
1 
发表于 2019-4-11 07:34:46 | 显示全部楼层 |阅读模式
3鱼币
请教各位大侠,下面的网址,手动换页,但是地址栏的网址没有变,是怎么做到的?
看源码,好象是javascript实现的,原理如何?
http://data.eastmoney.com/zjlx/detail.html

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
18 
发表于 2019-4-11 08:51:50 | 显示全部楼层
可以抓包找到接口
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
279 
发表于 2019-4-11 10:02:44 | 显示全部楼层
AJAX,即可实现页面局部周期性刷新
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 2019-4-11 11:55:23 | 显示全部楼层
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 2019-4-11 11:57:31 | 显示全部楼层
怎么做到的?,我想弄明白这个网页变换的详细步骤,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2019-4-11 13:57:10 | 显示全部楼层
选项卡那个?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2019-4-11 14:28:01 | 显示全部楼层
就是post/get 一个请求头 和一个请求体过去,网站接收到了核实如果正确请求就返回相应内容
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 2019-4-11 15:37:30 | 显示全部楼层
详细步骤,配合代码说明
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
26 
发表于 2019-4-11 18:15:15 | 显示全部楼层
minjun 发表于 2019-4-11 14:28
就是post/get 一个请求头 和一个请求体过去,网站接收到了核实如果正确请求就返回相应内容

我也好奇,大神给个例子看看呗
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
12 
发表于 2019-4-11 21:00:11 | 显示全部楼层
你指的是网址不变整个网页变(POST方法),还是网页的一个小局部变(AJAX实现)?

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
10 
发表于 2019-4-11 21:02:08 | 显示全部楼层
重定向?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2019-4-11 21:37:00 | 显示全部楼层
用ajax异步请求后台的程序 php或者asp什么的,然后返回json或者其他数据格式;
然后通过js分析返回的数据并输出到页面
代码的话大概是下面这样的:
<a>上一页</a>
<a>下一页</a>
<script type="text/javascript">
        window.onload=function(){
                var oAs = document.getElementsByTagName('a');
                var oAjax = new XMLHttpRequest() || new ActiveObject("Microsoft XMLHTTP");
                oAs[0].onclick=function(){
                        oAjax.open('GET','./search.php?p=0&t='+new Date().getTime(),true);
                        oAjax.send();
                        oAjax.onreadystatechange=function(){
                                if(oAjax.readyState==4){
                                        if(oAjax.status==200){
                                                var sRes = oAjax.responseText;//请求返回数据
                                        }
                                }
                        };
                };
                oAs[1].onclick=function(){
                        oAjax.open('GET','./search.php?p=1&t='+new Date().getTime(),true);
                        oAjax.send();
                        oAjax.onreadystatechange=function(){
                                if(oAjax.readyState==4){
                                        if(oAjax.status==200){
                                                var sRes = oAjax.responseText;//请求返回数据
                                        }
                                }
                        };
                };
        }
</script>

这里是请求的过程
显示的过程就是直接在innerHTML或者document.createElement();
就不多阐述了.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 7 天前 | 显示全部楼层
http://data.eastmoney.com/zjlx/detail.html
这个网站是怎么实现的?举其他的例子意义不大
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
67 
发表于 7 天前 | 显示全部楼层
casanava 发表于 2019-4-12 07:05
http://data.eastmoney.com/zjlx/detail.html
这个网站是怎么实现的?举其他的例子意义不大

根据经验,初步一看就知道,点击tab选项卡时肯定有监听事件。传递的如<li data="C._A" class="at">沪深A股</li>里的data的值即C._A。

继续根据经验分析监听事件所在的JS及方法,找到
JS路径:http://data.eastmoney.com/js_001/base.js?201806021830
在这个base.js里查看
tiny.loadQuote = function (codeMarket, callback, interval)
的实现方法。

于是明白
比如
http://nufm.dfcfw.com/EM_Finance ... spx?type=ct&st=(BalFlowMain)&sr=-1&p=1&ps=50&js=var%20uxYLNrsi={pages:(pc),date:%222014-10-22%22,data:[(x)]}&token=894050c76af8597a853f5b408b759f5d&cmd=C._A&sty=DCFFITA&rt=51835986
可获得cmd=C._A类型的数据,即“沪深A股”数据。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 6 天前 | 显示全部楼层
<ul id="mk_type">
                        <li data="C._AB">全部股票</li>
                        <li data="C._A">沪深A股</li>
                        <li data="C.2">沪市A股</li>
                        <li data="C._SZAME">深市A股</li>
                        <li data="C.80">创业板</li>
                        <li data="C.13">中小板</li>
                        <li data="C.3">沪市B股</li>
                        <li data="C.7">深市B股</li>
                    </ul>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 6 天前 | 显示全部楼层
你说的意思是,点击,然后跳转到到相应的页面
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 6 天前 | 显示全部楼层
<span class="at">3</span>

<span class="at">5</span>

http://data.eastmoney.com/zjlx/detail.html
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
 楼主| 发表于 6 天前 | 显示全部楼层
我的意思是,无论是第3页,还是第5页,
http://data.eastmoney.com/zjlx/detail.html
这个地址都没有变,这个是怎么实现的,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 6 天前 | 显示全部楼层
进入网页以后按F12调出控制台,点击notebook(用于抓取数据),随便点击一个标签,发现notebook捕捉到了一条消息,并且网页内容发生了改变。
点开捕捉到到这个消息,发现网页使用Ajax发送了一个消息(请求了一个url),如果你进入这个url,将会得到一段JS的代码,其中就有显示到当前网页更新的数据。
地址栏的URl不发生改变是正常的,是因为背后使用Ajax进行了信息的传送,随后又通过JS代码将得到的信息更新到了当前网页,如果你一定要问原理,请理解JS和Ajax以后再问。
20_avatar_big.jpg

点开这条消息

点开这条消息

notebook捕捉

notebook捕捉
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 6 天前 | 显示全部楼层
本帖最后由 zero_sunshine 于 2019-4-13 22:57 编辑

对于你说的第几页也是同样的原理,都是使用了ajax传输信息,使用JS重新修改了网页的内容。
如果你想要使用爬虫爬取信息,我有两点建议:
1.你可以使用request.get()去请求这个ajax请求的url地址,自己解析返回的内容,但是这很麻烦2.
2.你可以使用selenimu的webdriver操纵浏览器解析网页,这样免去了很多麻烦。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小甲鱼新书上市,限量优惠(微信扫一扫)^_^

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2019-4-19 22:14

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表