本内容主要介绍如何获取网页中 JS 动态生成的内容。


文章目录

  • 1.1 Ajax 异步加载生成网页内容
  • 1.2 从网页响应中找到 JS 脚本返回的数据
  • 1.2.1 找到 JS 请求的数据接口
  • 1.2.2 URL 编码
  • 1.2.3 代码实现
  • 参考:


1.1 Ajax 异步加载生成网页内容

  现在越来越多的网页使用 Ajax 异步加载方式,即网页中的一些内容由前端的 JS 动态生成。由于呈现在网页上的内容是由 JS 生成而来,我们能够在浏览器上看到,但是在 HTML 源码中却发现不了。

  比如应用宝的搜索应用页面,显示如下:

python获取动态js代码 python爬虫js动态_python获取动态js代码

  从上面可以看到,搜索出来的应用列表信息是在 id="J_SearchDefaultListBox" DOM 树下面。

  查看当前网页的源码(使用快捷键 “Ctrl + U”)如下:

python获取动态js代码 python爬虫js动态_python获取动态js代码_02

  在源码中,发现元素 id="J_SearchDefaultListBox" 下面的内容为空,没有任何应用列表信息。

  通过上面的分析可知,应用宝应用搜索页面中显示的应用列表是由 JS 动态生成加载的。

  遇到这种情况,我们应该如何对网页内容进行爬取呢?一般有两种方法:

(1)从网页响应中找到 JS 脚本返回的数据(大多是 json 格式,也有 xml 格式。);

(2)使用 Selenium 对网页进行模拟访问。

  下面我们将介绍第一种方法。

1.2 从网页响应中找到 JS 脚本返回的数据

  既然网页内容是由 JS 动态生成加载的,那么 JS 就需要先对某个接口进行调用,然后根据接口返回的数据再进行加载和渲染。那我们可以先找到 JS 调用的数据接口,从数据接口中找到网页中最后呈现的数据。

  下面我们就以应用宝的搜索应用页面为例,进行说明。

1.2.1 找到 JS 请求的数据接口

  按照如下步骤进行操作:

  • 打开应用宝的搜索页面(https://android.myapp.com/myapp/search.htm)
  • 按 F12 打开网页调试工具
  • 选择 “Network” 选项卡
  • 选择 “XHR”(即 XMLHTTPRequest,是 Ajax(Asynchronous JavaScript and XML,异步的 JavaScript 和 XML) 中的概念。 )
  • 输入应用名(例如:微信)

  将看到如下信息:

python获取动态js代码 python爬虫js动态_爬虫_03

  在这里,我们看到只有一个 request(其他网页可能会存在多个)。点击这个 request,然后选择 “Preview”,可以看到如下数据:

python获取动态js代码 python爬虫js动态_动态生成网页_04

  在上面的数据中,我们发现了“微信”、“多开助手”等信息,这些就是搜索出来的应用列表信息。

python获取动态js代码 python爬虫js动态_python获取动态js代码_05

  通过上面的分析,可以知道搜索出来的应用列表信息正是通过这个 request 获取的。这个 request 对应 URL 为 https://android.myapp.com/myapp/searchAjax.htm?kw=%E5%BE%AE%E4%BF%A1&pns=&sid=(获取方法:将鼠标移动到这个 request 上 -> 然后右键单击 -> Copy -> Copy link address)。

  将上面的 URL 在浏览器中打开,会返回一串数据。看起来似乎很乱,但实际上是 JSON 格式的数据。

python获取动态js代码 python爬虫js动态_python获取动态js代码_06

  这样,我们就找到了 JS 请求的数据接口。

1.2.2 URL 编码

  上面我们找到的 JS 请求的数据接口是 https://android.myapp.com/myapp/searchAjax.htm?kw=%E5%BE%AE%E4%BF%A1&pns=&sid=,但是其中的 %E5%BE%AE%E4%BF%A1 代表什么意思呢?

  实际上 %E5%BE%AE%E4%BF%A1 是中文 微信 的 URL 编码。在 Python 中,可以使用 urllib.parse.quote() 得到,即 '%E5%BE%AE%E4%BF%A1' = urllib.parse.quote('微信')

按照标准,URL 中只允许包含英文字母、数字以及部分符号,其他字符(比如中文)是不符合 URL 标准的。这个时候就需要进行 URL 编码。

1.2.3 代码实现

  按照以下 4 步进行实现:

(1)引入相关的库;

(2)对 JS 请求的数据接口进行请求;

(3)对 HTTP 响应的数据进行 json 格式化;

(4)进行遍历获取列表中 App 的信息(App 名称、包名、版本号、apk 下载 URL等)

import json
import requests
from urllib.parse import quote

# 对数据接口进行 http 请求
app_name = '微信'
url = 'https://android.myapp.com/myapp/searchAjax.htm?kw={}&pns=&sid='\
    .format(quote(app_name))
web_data = requests.get(url).text

# 对 http 响应的数据进行 json 格式化
data = json.loads(web_data)
app_infos = data['obj']['appDetails']

# 进行遍历获取列表中 App 的信息(App 名称、包名、版本号、apk 下载 URL等)
for app_info in app_infos:
    app_name = app_info['appName']
    pkg_name = app_info['pkgName']
    version_code = app_info['versionCode']
    version_name = app_info['versionName']
    download_url = app_info['apkUrl']
    print(app_name, pkg_name, version_code, version_name, download_url)



参考:

[1] Python爬虫实战入门五:获取JS动态内容—爬取今日头条