愛回收網站，js請求過程分析

aihuishou

最近在qq羣裏看到有個小夥伴在問愛回收網站怎麼爬取手機價格信息。

愛回收網站，在網站中大量使用了js動態改變DOM元素，並且請求的參數使用的是paylaod加密。咱們在分析網站的時候看不到參數，也就分析不出來請求參數的規律，這個問題能夠經過fiddler抓包工具解決。剛開始分析確實有點懵，在此記錄下個人分析過程。

工具；火狐瀏覽器，開發者模式 Fiddler

前面各個分類的分析仍是比較簡單，所需內容都在網頁源碼中有，能夠直接找到。主要是請求價格的過程有點複雜。

首先看看網站是如何發送POST請求價格的
咱們以http://www.aihuishou.com/prod...：

必須選擇要提交的選項才能提交查詢價格，這裏咱們隨便選擇幾個選項，查找買免費詢價的元素看到href是：

重點來了這裏點擊免費詢價以後，網站直接跳轉到價格的頁面網址是：http://www.aihuishou.com/pc/i...，咱們來找下http://www.aihuishou.com/user...，

這時候發現沒有網址的請求，這時猜想是重定向了。這時候咱們須要知道請求了什麼致使重定向，打開fiddler，從新回到剛纔，點擊免費詢價。而後在fiddler中找到發送的http://www.aihuishou.com/user...：

能夠發現是個post請求，返回的是一個json格式的數據，咱們看到裏面有個redirectUrl，參數是"/pc/index.html#/inquiry/1516201064093351267」， 看到這個心中有沒有感到一喜，對比這個和跳轉後的頁面，發現驚奇的類似。訪問下這個網址，正是咱們要找的價格的頁面。

此時是否是有點大功告成的感受，而後咱們在頁面中提取咱們要的數據，結果並無發現，這時猜想多是請求的是json數據，而後動態加載到頁面中的，這這是咱們經過火狐瀏覽器的開發者功能，找到了真正數據的請求：

發現後面的數字就是url後面的數字，這是咱們從新構造這個http://www.aihuishou.com/port...。

如今整個過程明朗了，可是還有一個問題，最初的POST請求的參數怎麼來的， 咱們回過頭從新看下http://www.aihuishou.com/user...。

在火狐開發者模式下，咱們能夠看到免費詢價這個元素對應觸發的click事件，

function(a) {
a.preventDefault();
var l = $(this);
if (!l.hasClass("disabled") && W) {

if (!d.hasClass("hidden")) {
  var c = $.trim(o.val());
  if (!s(c)) return;
  n.imgCaptcha = c
}
n.PriceUnits = e(), ahs.PopWindow.Loading(!0), $.post(r, n, function(e) {
  ahs.PopWindow.Hide(), e.code ? 3001 === e.code ? i(e.data.captchaUrl) : 3002 === e.code ? (t(e.data.captchaUrl), alert("驗證碼有誤")) : e.data.redirectUrl && (location.href = e.data.redirectUrl) : location.href = e.data.redirectUrl
})

}
}

能夠看到js中有個post請求，請求的參數是r, n,r應該是請求的url，n是對應的POST參數，那麼就要找到這個r, n,在js文件中，咱們能夠看到定義r, n參數的代碼，就在這個函數的上面定義了：
var r = $submit.attr('href'),

n = {
  AuctionProductId: $submit.data('pid'),
  ProductModelId: $submit.data('mid')
};

這裏咱們能夠看到r正是submit元素的href的值，n是submit元素屬性中包含'pid', 'mid'的值，咱們再看看fiddler抓到的參數應該有三個，還有一個priceUnits參數，咱們js代碼，發現，n.PriceUnits = e()，這個即是
第三個參數的由來，在js中搜索function e，能夠找到 函數e的定義：
function e() {

var e = [
  ],
  t = [
  ];
  return $('.base-property').find('li.checked').each(function () {
    e.push($(this).data('id'))
  }),
  F ? (e = a(e, t), e = e.concat(O), e.join(';'))  : (e = a(e, O), $('.appearance-property').find('li.checked').each(function () {
    t.push($(this).data('id'))
  }), c.filter('.function-property').find('li').each(function () {
    var e = $(this);
    t.push(e.hasClass('checked') ? e.data('id')  : e.data('default'))
  }), e = e.concat(t), e.join(';'))
}

---

大體的意思就是找到對應元素下包含'id'的屬性的值加入到e的類表中，而後合併列表e,t,最後在用';'鏈接各元素。

這樣，POST請求的三個參數都找到了，這個網站訪問過快會有驗證碼，能夠加代理繞過代理驗證。

---

至此，整個詢問價格的流程分析完成，仍是由衷的感受整個爬蟲懂點js仍是好處多多的！ 若是想讀源碼，請移步github，連接是：https://github.com/allenshen3...