ajax网站采集实例2

zhouchanglin

这个网站http://www.centaline-cis.com/ccom/cpropsrch.aspx，是个典型的ajax请求的网站，也有些特别的地方，它请求的是ｇｅｔ的


首先，这个网站要点搜索按钮，才会显示数据，而点击这个按钮，发生了ajax请求和一个post请求，而这个post请求只是为了得到数据的总量，对请求的数据是无用的，真正返回数据的是ｇｅｔ的请求

这样了解点击搜索按钮，触发了什么函数就是关键了，搜索按钮的代码

1. <input type="button" onclick="javascript:btnSearchClick()" id="btnSearch" value="搜尋"  style="width:60px" width="60px">

复制代码

，可以了解到触发了

1. btnSearchClick()

复制代码

函数，

1. function btnSearchClick()
   
2.                 {
   
3.                         document.getElementById("getPagePanel").innerHTML= ""; //clear all parameter
   
4.                         document.getElementById("getResult").innerHTML="";
   
5.                         var curPageNo = document.getElementById('curPageNo');
   
6.                         var curPageSize = document.getElementById('curPageSize');
   
7.                         var curAreaL = document.getElementById('curAreaL');
   
8.                         var curAreaH = document.getElementById('curAreaH');
   
9.                         var curLumpPriceL = document.getElementById('curLumpPriceL');
   
10.                         var curLumpPriceH = document.getElementById('curLumpPriceH');
    
11.                         var curAvgPriceL = document.getElementById('curAvgPriceL');
    
12.                         var curAvgPriceH = document.getElementById('curAvgPriceH');
    
13.                         var curLumpRentL = document.getElementById('curLumpRentL');
    
14.                         var curLumpRentH = document.getElementById('curLumpRentH');
    
15.                         var curAvgRentL = document.getElementById('curAvgRentL');
    
16.                         var curAvgRentH = document.getElementById('curAvgRentH');
    
17.                         var curPropType = document.getElementById('curPropType');
    
18.                         var curStatus = document.getElementById('curStatus');
    
19.                         var curLumpSumOrAvg = document.getElementById('curLumpSumOrAvg');
    
20.                         var curDeco = document.getElementById('curDeco');
    
21.                         var curView = document.getElementById('curView');
    
22.                         var curFloor = document.getElementById('curFloor');
    
23.                         var curShopType = document.getElementById('curShopType');
    
24.                         var curBusiness = document.getElementById('curBusiness');
    
25.                         curPageNo.value = '1';
    
26.                         curPageSize.value = '10';
    
27.                         curAreaL.value = document.getElementById('PropSrch_txtAreaL').value;
    
28.                         curAreaH.value = document.getElementById('PropSrch_txtAreaH').value;
    
29.                         curLumpPriceL.value = document.getElementById('PropSrch_txtLumpPriceL').value;
    
30.                         curLumpPriceH.value = document.getElementById('PropSrch_txtLumpPriceH').value;
    
31.                         curAvgPriceL.value = document.getElementById('PropSrch_txtAvgPriceL').value;
    
32.                         curAvgPriceH.value = document.getElementById('PropSrch_txtAvgPriceH').value;
    
33.                         curLumpRentL.value = document.getElementById('PropSrch_txtLumpRentL').value;
    
34.                         curLumpRentH.value = document.getElementById('PropSrch_txtLumpRentH').value;
    
35.                         curAvgRentL.value = document.getElementById('PropSrch_txtAvgRentL').value;
    
36.                         curAvgRentH.value = document.getElementById('PropSrch_txtAvgRentH').value;
    
37.                         curPropType.value = document.getElementById('PropSrch_ddlPropType').value;
    
38.                         curLumpSumOrAvg.value = document.getElementById('PropSrch_ddlLumpSumOrAvg').value;
    
39.                         curDeco.value = document.getElementById('PropSrch_ddlDeco').value;
    
40.                         curView.value = document.getElementById('PropSrch_ddlView').value;
    
41.                         curFloor.value = document.getElementById('PropSrch_ddlFloor').value;
    
42.                         curShopType.value = document.getElementById('PropSrch_ddlShopType').value;
    
43.                         curBusiness.value = document.getElementById('PropSrch_ddlBusiness').value;
    
44.                         curStatus.value = changeSta();
    
45.                         getPropList('true',orderPrev);
    
46.                 }

复制代码

这个函数大概的意思是把隐藏的表单项的值在请求前，设置成对应的输入框，下拉框等当前用户设置的值，然后ａｊａｘ请求，也就是getPropList('true',orderPrev)函数的功能；

隐藏的表单项：<input type="hidden" value="" name="PropSrch:cusDistrict" />
<input type=hidden id="curPageNo" value=1>－－－－－－－－－当前第几页
<input type=hidden id="curPageSize" value=20>－－－－－－－－每页数量
<input type=hidden id="curAreaL">－－－－－－－－－－－面積范围左
<input type=hidden id="curAreaH">－－－－－－－－面積范围右
<input type=hidden id="curLumpPriceL">－－－－－－－－－售價范围左
<input type=hidden id="curLumpPriceH">－－－－－－－售價范围右
<input type=hidden id="curAvgPriceL">－－－－－－－－－每平方呎售價范围左
<input type=hidden id="curAvgPriceH">－－－－－－－每平方呎售價范围右
<input type=hidden id="curLumpRentL">－－－－－－－－－－－－租金范围左
<input type=hidden id="curLumpRentH">－－－－－－－－－租金范围右
<input type=hidden id="curAvgRentL">－－－－－－－每平方呎租金范围左
<input type=hidden id="curAvgRentH">－－－－－－－－每平方呎租金范围右
<input type=hidden id="curPropType">－－－－－－－－－－－類別

1. <option value="ALL">全部</option>
   
2.         <option selected="selected" value="Comm">寫字樓物業</option>

复制代码

<option value="Ind">工商物業</option>
        <option value="Ret">商舖物業</option>


<input type=hidden id="curStatus">－－－－－－租／售
<input type=hidden id="curLumpSumOrAvg">－－－－－

1. <select name="PropSrch:ddlLumpSumOrAvg" id="PropSrch_ddlLumpSumOrAvg" onchange="javascript:changeStatus();" style="width:85px;width:85px">
   
2.         <option selected="selected" value="LumpSum">總數</option>

复制代码

<option value="Average">呎價</option>

<input type=hidden id="curDeco">－－－－－－－－－－裝修
<input type=hidden id="curView">－－－－－－－－－景觀
<input type=hidden id="curFloor">－－－－－－－－－－樓層
<input type=hidden id="curShopType">－－－－－－－－－－商舖類別
<input type=hidden id="curBusiness">－－－－－－－－－行業

当搜索时这些隐藏的表单项的值会根据当前的搜索条件，从新设置，然后ａｊａｘ．这就还要看getPropList('true',orderPrev)函数的源码；

这是

1. 
   
2. var lang = 'zh-tw';
   
3.                 var orderPrev = 'default';
   
4.                
   
5.                 function getPropList(init,orderBy)
   
6.                 {
   
7.                         xmlHttp=GetXmlHttpObject();
   
8.                         if (xmlHttp==null)
   
9.                         {
   
10.                         alert ("Your browser does not support AJAX!");
    
11.                         return;
    
12.                         }
    
13.                         var url;
    
14.                         url ='/getPropList.aspx?';
    
15.                         url += 'init=' + init;//ture getPropList('true',orderPrev);
    
16.                         url += '&pn=' + getPn();//curPageNo当前页
    
17.                         url += '&ps=' + getPs();//curPageSize每页数量
    
18.                         url += '&pt=' + getPt();//curPropType  PropSrch_ddlPropType-----------物業類別：<br />
    
19.                         url += '&al=' + getAl();//PropSrch_txtAreaL--------------<br />面積(平方呎)
    
20.                         url += '&ah=' + getAh();------------//至PropSrch_txtAreaH
    
21.                         url += '&lpl=' + getLpl();//PropSrch_txtLumpPriceL----------------<br />售價(百萬元)：
    
22.                         url += '&lph=' + getLph();//至PropSrch_txtLumpPriceH
    
23.                         url += '&lrl=' + getLrl();//PropSrch_txtLumpRentL----------------------------租金(元)
    
24.                         url += '&lrh=' + getLrh();//PropSrch_txtLumpRenth
    
25.                         url += '&apl=' + getApl();//PropSrch_txtAvgPriceL----------->每平方呎售價(元)
    
26.                         url += '&aph=' + getAph();//至PropSrch_txtAvgPriceh
    
27.                         url += '&arl=' + getArl();//PropSrch_txtAvgRentL----------->每平方呎租金(元)
    
28.                         url += '&arh=' + getArh();//至PropSrch_txtAvgRenth
    
29.                         url += '&sta=' + getSta();//PropSrch_ddlStatus----------------租／售：<br />
    
30.                         url += '&la=' + getLa();/*<select name="PropSrch:ddlLumpSumOrAvg" id="PropSrch_ddlLumpSumOrAvg" onchange="javascript:changeStatus();" style="width:85px;width:85px">
    
31.         <option selected="selected" value="LumpSum">總數</option>
    
32.         <option value="Average">呎價</option>*/
    
33.                         url += '&dc=' + getDc();//裝修：<br />---------------PropSrch_ddlDeco
    
34. 
    
35.                         url += '&vw=' + getVw();//景觀：<br />
    
36.                                                                                         <select name="PropSrch:ddlView" id="PropSrch_ddlView" style="width:130px;width:130px">
    
37.                         url += '&fr=' + getFr();//樓層<select name="PropSrch:ddlFloor" id="PropSrch_ddlFloor" style="width:130px;width:130px">
    
38.         <option selected="selected" value="ALL">全部</option>
    
39.         <option value="H">高層</option>
    
40.                        
    
41.         url += '&spt=' + getSpt();//商舖類別：<br />
    
42.                                                                                         <select name="PropSrch:ddlShopType" id="PropSrch_ddlShopType"
    
43.                         url += '&bs=' + getBs();//行業PropSrch_ddlBusiness
    
44.                         url += '&dist=' + getDist();//PropSrch_llbDistrict------地區(
    
45.                         url += '&sc=' + lang;//var lang = 'zh-tw';
    
46.                         if(orderBy != 'default')
    
47.                         {
    
48.                                 url+= '&ord=' + orderBy;//
    
49.                                 orderPrev = orderBy;//
    
50.                         }
    
51.                         else
    
52.                         {
    
53.                                 url+= '&ord=default';//default
    
54.                         }
    
55.                         //alert(url);
    
56.                         try {
    
57.                         xmlHttp.onreadystatechange=function(){stateChanged(init)};
    
58.                         xmlHttp.open("GET",url,true);
    
59.                         xmlHttp.send(null);
    
60.                         }
    
61.                         catch (e)
    
62.                         {
    
63.                                 alert(e);}
    
64.                 }

复制代码

里面我加了注视，getPn()等函数在源码里都可以找到，它们的功能都是返回相应的表单的隐藏项的值，而组合成带参数的请求地址，

而里面的

1. xmlHttp.onreadystatechange=function(){stateChanged(init)};
   
2.                         xmlHttp.open("GET",url,true);
   
3.                         xmlHttp.send(null)

复制代码

则是发生ａｊａｘ的函数，这里知道了

1. xmlHttp.open("GET",url,true);

复制代码

，几已经知道了请求的地址是URL，这样地址是http://www.centaline-cis.com/get ... -tw&ord=default　　而这个

1. stateChanged(init)

复制代码

函数是具体的把返回的数据进行设置，所以到这搜索提交这步已经结束了,还有这个地址在浏览器打开查看源码，可能没有想要的数据，不清楚是为什么，用火车测试是有数据返回的


而还有个问题每页解决，那就是翻页

而这就要看页脚部分的源码了，而这个网站页脚部分也是用

1. xmlHttp.onreadystatechange=function(){stateChanged(init)}

复制代码

，输出的，这样就有必要了解

1. stateChanged(init)

复制代码

了，

1. function stateChanged(init)
   
2.                 {
   
3.                         if (xmlHttp.readyState==4)
   
4.                         {       
   
5.                                 if(init == 'true')
   
6.                                 {
   
7.                                         var intRecordCount = PropSrch.getRecordCount(getPt(), getSta(), getAl(), getAh(), getLpl(), getLph(), getApl(), getAph(), getLrl(), getLrh(), getArl(), getArh(), getLa(), getDc(), getVw(), getFr(), getSpt(), getBs(), getDist(), lang);
   
8.                                         document.getElementById("getPagePanel").innerHTML= "<table cellSpacing='0' cellPadding='0' width='974' border='0' align='center'><tr><td align='left' valign='middle' style='padding-top:5px;padding-bottom:5px;padding-left:5px' width='619'>在全港&nbsp;<font color='#A50743'><b>11667</b></font>&nbsp;個精選樓盤中，有&nbsp;<font color='#A50743'><b><label id='lblRecordCount'></label></b></font>&nbsp;個符合閣下要求，現詳列如下 :</font></td><td align='left' valign='middle' width='175'>每頁顯示<select id=ddlPageSize onchange=javascript:changePage(this.id)><option value=5>5</option><option value=10 selected=true>10</option><option value=15>15</option><option value=20>20</option></select>個樓盤紀錄</td><td align='right' valign='middle' width='170' style='padding-right:5px'><a href='#' id='linkPrevPage' onclick=javascript:changePage(this.id)>上一頁</a><select id=ddlPageNo onchange=javascript:changePage(this.id)></asp :dropdownlist></select><a href='#' id='linkNextPage' onclick=javascript:changePage(this.id)>下一頁</a></td></tr></table>";
   
9.                                         document.getElementById("lblRecordCount").innerHTML = intRecordCount.value;
   
10.                                         getDdlPage(intRecordCount.value);
    
11.                                         document.getElementById("getResult").innerHTML=xmlHttp.responseText;
    
12.                                 }
    
13.                                 else
    
14.                                 {
    
15.                                         document.getElementById("getResult").innerHTML=xmlHttp.responseText;
    
16.                                 }
    
17.                         }
    
18.                         else
    
19.                         {
    
20.                                 document.getElementById("getResult").innerHTML='<img src="/1024/images/img_running.gif" />';
    
21.                         }
    
22.                 }

复制代码

其中

1. <select id=ddlPageNo onchange=javascript:changePage(this.id)></asp :dropdownlist></select>

复制代码

是下拉框翻页的源码；

这个下拉框在

1. getDdlPage(intRecordCount.value);

复制代码

执行后就被设置好了

1. function getDdlPage(intRecordCount)
   
2.                 {
   
3.                         var curPageSize = document.getElementById('curPageSize');
   
4.                         var ddlPageSize = document.getElementById('ddlPageSize');
   
5.                         var ddlPageNo = document.getElementById('ddlPageNo');
   
6.                         for(j=ddlPageNo.length;j>=0;j--)
   
7.                         {
   
8.                                 ddlPageNo.remove(j);
   
9.                         }
   
10.                         for(var i=1;i<=Math.ceil(intRecordCount/curPageSize.value);i++)
    
11.                         {
    
12.                                 ddlPageNo.options.add(new Option(i,i));
    
13.                         }
    
14.                 }

复制代码

可以知道路过通过下拉框翻页触发了

1. changePage(this.id)

复制代码

，

1. function changePage(controlName)
   
2.                 {
   
3.                         var curPageNo = document.getElementById('curPageNo');
   
4.                         var curPageSize = document.getElementById('curPageSize');
   
5.                         var ddlPageNo = document.getElementById('ddlPageNo')
   
6.                         var ddlPageSize = document.getElementById('ddlPageSize');
   
7.                         var linkPrevPage = document.getElementById('linkPrevPage');
   
8.                         var linkNextPage = document.getElementById('linkNextPage');
   
9.                         if(controlName == 'ddlPageSize')
   
10.                         {
    
11.                                 curPageSize.value = ddlPageSize.value;
    
12.                                 getDdlPage(document.getElementById("lblRecordCount").innerHTML);
    
13.                                 getPropList('false',orderPrev);
    
14.                         }
    
15.                         else if(controlName == 'ddlPageNo')
    
16.                         {
    
17.                                 curPageNo.value = ddlPageNo.value;
    
18.                                 getPropList('false',orderPrev);
    
19.                         }
    
20.                         else if(controlName == 'linkPrevPage')
    
21.                         {
    
22.                                 if(parseInt(ddlPageNo.value,10) - 1 > 0)
    
23.                                 {
    
24.                                         ddlPageNo.value = parseInt(ddlPageNo.value,10) - 1;
    
25.                                         curPageNo.value = parseInt(curPageNo.value,10) - 1;
    
26.                                         getPropList('false',orderPrev);
    
27.                                 }
    
28.                         }
    
29.                         else if(controlName == 'linkNextPage')
    
30.                         {
    
31.                                 if(parseInt(ddlPageNo.value,10) + 1 <= ddlPageNo.length)
    
32.                                 {
    
33.                                         ddlPageNo.value = parseInt(ddlPageNo.value,10) + 1;
    
34.                                         curPageNo.value = parseInt(curPageNo.value,10) + 1;
    
35.                                         getPropList('false',orderPrev);
    
36.                                 }
    
37.                         }
    
38.                 }

复制代码

这个函数包含了点上一页，下一页和下拉框翻页的处理过程，都查补多，下拉框翻页id=ddlPageNo，只看

1. else if(controlName == 'ddlPageNo')
   
2.                         {
   
3.                                 curPageNo.value = ddlPageNo.value;
   
4.                                 getPropList('false',orderPrev);
   
5.                         }

复制代码

即可，可以了解到时把选择的页数的值给隐藏项curPageNo，然后getPropList发生，也就是前面点搜索时会发生的ajax请求的函数，不同的是这次传递的第一个参数是false，点搜索时是ture，两次不同的地方通过stateChanged(init) 的条件

1. if (xmlHttp.readyState==4)
   
2.                         {       
   
3.                                 if(init == 'true')

复制代码

可以知道翻页的时候页脚不会被更新，只更新数据，而点搜索时则更新了页脚

这样curPageNo参数的值就代表页数，那么写成

1. http://www.centaline-cis.com/getPropList.aspx?init=false&pn=分页ps=10&pt=Comm&al=&ah=&lpl=&lph=&lrl=&lrh=&apl=&aph=&arl=&arh=&sta=ALL&la=LumpSum&dc=ALL&vw=ALL&fr=ALL&spt=ALL&bs=ALL&dist=ALL&sc=zh-tw&ord=default

复制代码

，就可以访问分页了

ajax地址后每个参数的意思：
pn---------页码
ps-------每页数量
pt-------物業類別
al------面積范围左

ah-------面積范围右
lpl------售價范围左

lph---------售價范围右
lrl-----租金范围左
lrh--------租金范围右
apl----每平方呎售價范围左
aph=&arl=&arh=&sta=ALL&la=LumpSum&dc=ALL&vw=ALL&fr=ALL&spt=ALL&bs=ALL&dist=ALL&sc=zh-tw&ord=defaul
aph-------每平方呎售價范围右
sta--------租／售
la-----------總數 尺寸
dc-----------裝修
vw------景觀

fr----樓層
spt---------商舖類別
bs-----行業

dist-----地區
sc--------url += '&sc=' + lang;     //var lang = 'zh-tw';

ord----排序把
想要其他的搜索，改下相应的参数就可以了

而抓包的那个post其实是请求数据的总量，与真正获取数据无关

这个网站分页即是内容页，而这样的往往不好做，因为表格里的每条数据要循环采集，这样路过源码格式不规范，将很难做，还在这个网站还算规范，用循环采到了每条的记录

规则

caizhiguang

回复 1# zhouchanglin
多谢楼主帮忙和分享，谢谢。

shgaoli

okok7845

除了狂顶，还要学习中

zk1062

支持，这也可以啊，还没用过

di44

感谢楼主。，很不错 谢谢了

415439444

顶！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

infoseek

这个教程很详细，感谢楼主！