改变网页而网址不变

casanava

请教各位大侠，下面的网址，手动换页，但是地址栏的网址没有变，是怎么做到的？
看源码，好象是javascript实现的，原理如何？
http://data.eastmoney.com/zjlx/detail.html

_谪仙

可以抓包找到接口

不二如是

AJAX，即可实现页面局部周期性刷新

casanava

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。

casanava

怎么做到的？，我想弄明白这个网页变换的详细步骤，

18133942901

选项卡那个？

minjun

就是post/get 一个请求头 和一个请求体过去，网站接收到了核实如果正确请求就返回相应内容

casanava

详细步骤，配合代码说明

cwhsmile

minjun 发表于 2019-4-11 14:28
就是post/get 一个请求头 和一个请求体过去，网站接收到了核实如果正确请求就返回相应内容

我也好奇，大神给个例子看看呗

My_A

你指的是网址不变整个网页变（POST方法），还是网页的一个小局部变（AJAX实现）？

TOP_LK

重定向？

Fc丶小米

用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();
就不多阐述了.

casanava

http://data.eastmoney.com/zjlx/detail.html
这个网站是怎么实现的？举其他的例子意义不大

行客

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股”数据。

casanava

<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>

casanava

你说的意思是，点击，然后跳转到到相应的页面

casanava

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

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

http://data.eastmoney.com/zjlx/detail.html

casanava

我的意思是，无论是第3页，还是第5页，
http://data.eastmoney.com/zjlx/detail.html
这个地址都没有变，这个是怎么实现的，

zero_sunshine

进入网页以后按F12调出控制台，点击notebook（用于抓取数据），随便点击一个标签，发现notebook捕捉到了一条消息，并且网页内容发生了改变。
点开捕捉到到这个消息，发现网页使用Ajax发送了一个消息（请求了一个url），如果你进入这个url，将会得到一段JS的代码，其中就有显示到当前网页更新的数据。
地址栏的URl不发生改变是正常的，是因为背后使用Ajax进行了信息的传送，随后又通过JS代码将得到的信息更新到了当前网页，如果你一定要问原理，请理解JS和Ajax以后再问。

zero_sunshine

对于你说的第几页也是同样的原理，都是使用了ajax传输信息，使用JS重新修改了网页的内容。
如果你想要使用爬虫爬取信息，我有两点建议：
1.你可以使用request.get()去请求这个ajax请求的url地址，自己解析返回的内容，但是这很麻烦2.
2.你可以使用selenimu的webdriver操纵浏览器解析网页，这样免去了很多麻烦。