详解动态网页数据获取以及欣赏器数据和网络数据交互流程-Python ...

---

前言

动态网页是一种在用户欣赏时实时生成或变化的网页。与静态网页不同，后者通常是预先编写好的HTML文件，直接由服务器传送给欣赏器，内容在服务端生成且固定稳定，获取静态数据的文章课查阅博主上一篇文章：详解静态网页数据获取以及欣赏器数据和网络数据交互流程-Python。相比之下，动态网页可以根据用户的互动、哀求或其他条件在欣赏器端或服务器端生成新的内容。而且现在的网页一样寻常都是采用前后端分离的架构，前端负责展示和用户交互，后端负责数据处置处罚。这种架构使得前端可以更加灵活地实现动态内容的加载和展示。以是说以后想要获取到数据，动态网页数据获取会成为我们主流获取网页数据的技术。以是在动态网页数据获取这方面我们需要下足功夫了解动态网页数据交互形式、数据存储访问模式等方方面面的知识，我们才好更加灵活的获取到数据。
博主将尽大概将简化涉及到垂直范畴的专业知识，转化为大众小白可以读懂易于理解的知识，将繁杂的程序创建步骤逐个拆解，以逐步递进的方式由难转易渐渐掌握并实践，接待各位学习者关注博主，博主将不绝创作技术实用前沿文章。

---

一、动态网页和静态网页的区别

当我们谈论动态网页和静态网页时，我们主要是在讨论网页的内容是怎样生成和呈现给用户的。想象一下，网页就像是餐厅里的菜单。
静态网页

就像是一张印刷好的菜单，上面的内容是固定的。每次你去餐厅，看到的菜单都是一样的，不会根据你的偏好大概是时间的变化而改变。
在网页方面，静态网页是一次创建好，之后内容就不再改变的。无论何时访问这个网页，你都会看到同样的内容。它们是直接从服务器上以文件形式提供的，不涉及任何内容的即时生成或处置处罚。
动态网页

就像是一张电子菜单，可以根据你的口味偏好、季节、甚至是现在的库存来动态调整菜单内容。比如，假如是夏天，菜单大概会显示更多清凉饮品或沙拉；假如你是素食者，它会向你展示更多素食选项。
动态网页在你访问时才生成内容。这意味着网页可以根据用户的哀求、时间、用户互动等因素来更改显示的内容。动态网页通常会使用服务器端的脚本语言（如PHP、ASP.NET、Java等）来生成页面内容，而且经常与数据库交互，以提供实时更新的内容。
这就是动态网页和静态网页之间的主要区别。动态网页更加灵活，能够提供个性化和交互式的体验，而静态网页则相对简朴，内容固定。
二、网页何谓动态

动态网页技术在网页的HTML源码中通常不直接可见，由于它们在服务器端举行处置处罚，然后生成最终的HTML内容发送给用户的欣赏器。动态网页技术在网页HTML源码中通常不局限于特定的板块，而是遍布于整个页面的各个部门。比如用户登录状态的动态显示（比如显示用户的名字或头像）、基于用户角色或权限动态生成菜单项、分页或无限滚动，动态加载更多内容。最常见的当属通过按钮、滑块、标签页等，这些元素响应用户操纵，如点击或滑动，来触发动态变化。
我们以一个网页实例开发会碰到的题目来看，比如评论区的开发，许多网站有文章或产品评论区，这些评论是实时从数据库加载的，并根据用户的欣赏或互动实时更新。以Django的实例展示：

1. # Django 示例
2. def article(request, article_id):
3.     article = Article.objects.get(pk=article_id)
4.     comments = Comment.objects.filter(article=article).order_by('-date')
5.     return render(request, 'article.html', {'article': article, 'comments': comments})

复制代码

 一些网站使用动态表单，根据用户的输入或选择来调整表单的选项。这些通常是通过JavaScript实现的，但大概会与服务器端代码交互以获取必要的数据。

1. document.getElementById('country-select').addEventListener('change', function() {
2.     var country = this.value;
3.     fetch('/api/getStates?country=' + country)
4.         .then(response => response.json())
5.         .then(data => {
6.             // 更新状态选择框
7.         });
8. });

复制代码

动态网页技术的一个关键特点是它们通常依靠于JavaScript来操控DOM（文档对象模型），使得页面可以在不重新加载的环境下更新其内容。这种技术可以应用于几乎任何页面元素，并使得网页能够提供更加丰富和交互式的用户体验。
常见动态元素判断

在HTML中，通常没有固定的标签或类名专门用于体现动态内容，由于这些标记着决于开发者的个人选择或团队规范。不外我们可以讨论一些常见的模式和命名惯例来识别大概包罗动态内容的元素。
1. 数据绑定的属性和类名

在使用当代前端框架（如React, Angular, Vue等）的网站中，你大概会看到一些特殊的属性，如ng-bind, v-model, {{data}}（在Vue和Angular中），这些通常体现与动态数据源绑定的元素。

1. <!-- Angular -->
2. <div ng-bind="user.name"></div>
4. <!-- Vue -->
5. <div v-bind:title="message"></div>

复制代码

2. 通用的动态内容类名

一些常见的类名如dynamic, async, loader, content, ajax, update, fetch等，大概被用于体现动态加载或更新的内容。.

1. <div class="dynamic-content"></div>
2. <div class="loader"></div>

复制代码

 3. 列表和容器

对于动态加载的列表、评论、文章等，开发者大概会使用包罗list, container, wrapper等单词的类名。

1. <ul class="comment-list"></ul>
2. <div class="article-container"></div>

复制代码

 4. 与API交互的元素

用于显示从API哀求中得到数据的元素大概会有特定的类名，如api-data, fetch-data等。

1. <div class="api-response"></div>
2. <div class="fetch-data"></div>

复制代码

 5. JavaScript控制的元素

有时，元素大概没有显着的类名或属性来表明它们是动态的，但假如它们具有事件监听器或由JavaScript直接操纵（如通过document.getElementById或document.querySelector），则这些元素也大概是动态的。

1. <button id="loadMore">加载更多</button>
2. <div id="dynamicSection"></div>

复制代码

虽然这些命名风俗可以作为识别动态内容的线索，但它们并不是硬性规则。每个网站或应用大概有其独特的命名约定。通常理解一个网站的HTML布局和动态内容需要联合HTML源码和相干的JavaScript代码举行分析。
三、获取动态网页数据

获取动态网页数据可以使用多种技术，一样寻常来说假如你需要频繁地与动态内容互动，Selenium或Puppeteer大概是较好的选择。假如你只需要抓取API返回的数据，网络哀求分析大概更高效。具体分类下来有：

 JavaScript引擎集成

Selenium

Selenium是一个自动化测试工具，它可以模拟用户在欣赏器中执行的操纵，如点击、滚动等。Selenium非常适合于爬取JavaScript动态加载的内容，由于它实际上是运行在一个真正的欣赏器中，可以执行JavaScript。我之前的项目一半以上都是用selenium来做，现在各类反爬技术都在渐渐遍及运用，selenium虽然较慢但不失为保底的技术计谋。举一个简易的selenium的例子：

1. from selenium import webdriver
2. from selenium.webdriver.common.by import By
3. from selenium.webdriver.support.ui import WebDriverWait
4. from selenium.webdriver.support import expected_conditions as EC
5. import time
7. # 配置Selenium驱动器（以Chrome为例）
8. driver = webdriver.Chrome(executable_path='path/to/chromedriver')
10. # 打开目标网页
11. driver.get('https://example-ecommerce.com/products')
13. # 等待页面动态加载完成
14. WebDriverWait(driver, 10).until(
15.     EC.presence_of_element_located((By.CLASS_NAME, 'product'))
16. )
18. # 模拟向下滚动以加载更多产品（如果需要）
19. driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
20. time.sleep(3)  # 等待额外内容加载
22. # 获取产品信息
23. products = driver.find_elements(By.CLASS_NAME, 'product')
24. for product in products:
25.     name = product.find_element(By.CLASS_NAME, 'product-name').text
26.     price = product.find_element(By.CLASS_NAME, 'product-price').text
27.     print(f'Product Name: {name}, Price: {price}')
29. # 关闭浏览器
30. driver.quit()

复制代码

 以上通常要注意：

• 动态内容加载时间：根据网站的响应时间，大概需要调整期待时间。
  
• 滚动页面：有些网站大概需要滚动才气加载更多内容。execute_script方法用于执行JavaScript代码以模拟滚动。
  
• 异常处置处罚：实际应用中，应添加异常处置处罚逻辑来处置处罚元素未找到、超时等题目。
  

 Puppeteer

Puppeteer是一个Node库，提供了一个高级API来控制Chrome或Chromium。与Selenium类似，Puppeteer也能处置处罚动态内容。

1. const puppeteer = require('puppeteer');
3. async function scrapeData() {
4.     const browser = await puppeteer.launch();
5.     const page = await browser.newPage();
6.     await page.goto('https://example-news.com/latest-news', {waitUntil: 'networkidle2'});
8.     // 等待特定元素加载完成，确保页面已经加载了所需数据
9.     await page.waitForSelector('.news-item');
11.     // 获取数据
12.     const newsItems = await page.evaluate(() => {
13.         const items = [];
14.         document.querySelectorAll('.news-item').forEach(item => {
15.             const title = item.querySelector('.title').innerText;
16.             const link = item.querySelector('a').href;
17.             items.push({title, link});
18.         });
19.         return items;
20.     });
22.     console.log(newsItems);
24.     await browser.close();
25. }
27. scrapeData();

复制代码

 以上示例仅为简朴先容 Puppeteer 的基本用法。在实际使用中，你大概需要处置处罚更复杂的场景，如处置处罚登录、处置处罚分页、滚动页面等。
基于HTTP哀求

基于HTTP哀求的方法通常涉及分析网站的网络哀求，特别是AJAX（异步JavaScript和XML）哀求。一样寻常可以用requests库来爬取动态生成的内容。

• 个假设的消息网站，例如 "example-news-api.com/api/latest-news"
  
• 目的数据：消息标题和链接
  

1. import requests
3. def fetch_news():
4.     url = 'https://example-news-api.com/api/latest-news'
5.     response = requests.get(url)
7.     if response.status_code == 200:
8.         news_data = response.json()  # 假设API返回JSON格式数据
9.         for news_item in news_data:
10.             print(f"标题: {news_item['title']}, 链接: {news_item['url']}")
11.     else:
12.         print("无法获取数据")
14. if __name__ == "__main__":
15.     fetch_news()

复制代码

一样寻常使用欣赏器的开发者工具来分析网络哀求，找出实际负责数据加载的API。动态内容通常以JSON格式返回，需要使用相应的方法来解析，实际应用中应当包罗错误处置处罚逻辑，例如处置处罚非200的HTTP状态码。这种方法的上风在于服从较高，不需要加载整个网页，而是直接哀求负责数据的API，但是大概还需要处置处罚身份验证、会话管理或其他安全步伐。
Web Scraping框架

使用Web Scraping框架（如Scrapy）爬取动态网页数据的案例通常涉及到与JavaScript交互或处置处罚异步加载的内容。这里暂不展开，以后会有详细拿一篇文章专门讲述此内容。
想要获取更多内容接待私聊交换，点关注，防走丢，如有纰漏之处，请留言指教，非常感谢

本章内容已经富足多了，下篇文章将展开selenium的采集项目讲解。

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。