كشط موقع ويب ديناميكي
تقوم مواقع الويب الديناميكية بتحميل المحتوى باستخدام JavaScript بعد التحميل الأولي للصفحة. يوضح هذا الدليل كيفية جمع البيانات من هذه المواقع باستخدام نقطة نهاية المتصفح الخاصة بـ FourA.
المشكلة
عندما ترسل طلب HTTP قياسيا إلى موقع ويب يعتمد بشكل كبير على JavaScript، فإنك تحصل على هيكل HTML ولكن ليس المحتوى الفعلي. يتم تحميل البيانات التي تحتاجها (قوائم المنتجات، الأسعار، نتائج البحث) بواسطة JavaScript بعد تصيير الصفحة في المتصفح.
هذا الأمر أصبح شائعا بشكل متزايد مع أطر العمل الحديثة مثل React و Vue و Angular و Next.js.
الحل: طلبات المتصفح
تفتح نقطة نهاية المتصفح الخاصة بـ FourA (POST /api/browser/) عنوان URL الخاص بك في مثيل متصفح Chrome يقوم بما يلي:
- تحميل الصفحة
- تنفيذ كل JavaScript
- انتظار تصيير المحتوى
- إرجاع HTML المصير بالكامل
الخطوة 1: تحديد ما تحتاجه
قبل إجراء الطلب، قم بزيارة الصفحة المستهدفة في متصفحك واستخدم DevTools (F12) للعثور على جزء من النص أو عنصر يؤكد أنه قد تم تحميل المحتوى. على سبيل المثال:
- اسم منتج يظهر بعد تصيير JS
- فئة CSS مثل
product-gridفي HTML المصير - سلسلة نصية مثل "results" لا تظهر إلا عند تحميل البيانات
الخطوة 2: إرسال طلب متصفح
curl -X POST https://eu.api.foura.ai/api/browser/ \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://example.com/products",
"timeout_ms": 15000,
"checkText": "product-grid"
}'
يخبر الخيار checkText FourA بالتحقق من ظهور السلسلة "product-grid" في الصفحة المعروضة. إذا لم تظهر قبل انتهاء المهلة، يفشل الـ request، مما يعلمك بأن المحتوى لم يتم تحميله.
الخطوة 3: تحليل الـ HTML
يحتوي الـ response على HTML المعروض بالكامل في الحقل body. قم بتحليله باستخدام مكتبتك المفضلة:
Python (BeautifulSoup)
import requests
from bs4 import BeautifulSoup
resp = requests.post("https://eu.api.foura.ai/api/browser/", headers={
"X-API-Key": "YOUR_API_KEY",
"Content-Type": "application/json"
}, json={
"url": "https://example.com/products",
"timeout_ms": 15000,
"checkText": "product-grid"
})
html = resp.json()["body"]
soup = BeautifulSoup(html, "html.parser")
for product in soup.select(".product-card"):
name = product.select_one(".product-name").text.strip()
price = product.select_one(".product-price").text.strip()
print(f"{name}: {price}")
Node.js (cheerio)
import * as cheerio from 'cheerio';
const resp = await fetch('https://eu.api.foura.ai/api/browser/', {
method: 'POST',
headers: { 'X-API-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
body: JSON.stringify({
url: 'https://example.com/products',
timeout_ms: 15000,
checkText: 'product-grid'
})
});
const { body: html } = await resp.json();
const $ = cheerio.load(html);
$('.product-card').each((i, el) => {
console.log($(el).find('.product-name').text(), $(el).find('.product-price').text());
});
استكشاف الأخطاء وإصلاحها
هل ما زلت تحصل على محتوى فارغ؟
- تحقق مما إذا كانت الصفحة تستخدم تصيير JavaScript فعليا (تحقق باستخدام "View Source" مقابل DevTools)
- قم بزيادة
timeout_ms: بعض الصفحات يتم تحميلها ببطء - تحقق مما إذا كانت الصفحة تتطلب مصادقة أو cookies (استخدم المعلمة
cookies)
هل تظهر لك صفحة CAPTCHA؟
- بالنسبة إلى طلبات single/HTTP، قم بالتبديل إلى endpoint الخاص بـ proxy (
POST /api/proxy/) لتدوير عناوين IP تلقائيا. - لتوجيه طلب متصفح عبر proxy، قم بتمرير المعلمة
proxyالخاصة بـ endpoint المتصفح. يقوم endpoint الخاص بـ proxy بتغليف طلبات single/HTTP فقط، وليس طلبات المتصفح.
تأخذ المعلمة proxy معرف proxy المبهم الذي أرجعته استجابة سابقة، ولا تأخذ أبدا عنوان proxy خاصا بك. قم بتشغيل استدعاء POST /api/proxy/ (أو POST /api/auto/) واحد أولا، واقرأ الحقل proxy الذي يرجعه، ثم قم بتثبيته:
# Step 1: let FourA find a working exit. The response carries "proxy": "A1B2C3".
curl -X POST "https://eu.api.foura.ai/api/proxy/" \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"maxTries": 5, "request": {"method": "GET", "url": "https://example.com/products"}}'
# Step 2: render through that same exit.
curl -X POST "https://eu.api.foura.ai/api/browser/" \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com/products", "proxy": "A1B2C3", "timeout_ms": 20000}'
إرسال عنوان بدلاً من معرف يعود كـ 400 Invalid proxy format. النمط الكامل موجود في إعادة استخدام proxy عبر الطلبات.
الخطوات التالية
- اختيار endpoint المناسب: متى تستخدم المتصفح مقابل الفردي
- مراقبة أسعار المنافسين: دليل تعليمي كامل لتتبع الأسعار
- الحماية من البوتات: التعامل مع المواقع المحمية
- إعادة استخدام proxy عبر الطلبات: تثبيت مخرج واحد عبر مسار العمل بالكامل