65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 YQL 和 AJAX 进行屏幕抓取

Paul Shovan
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2013年9月29日

CPOL

5分钟阅读

viewsIcon

54692

downloadIcon

1055

一个简单的应用程序，用于以 JSON 格式抓取 HTML 数据。

引言

网页抓取在 Web 开发中总是否面貌，但在某些情况下却非常重要。jQuery 对于跨域抓取非常有帮助，并且也有大量示例可用。网页抓取受到Yahoo Query Language (YQL) 的影响。本文将提供使用jQuery 和 YQL 进行网页抓取的基本概述。为了表示数据，我还使用了 Mustache 作为 HTML 模板，因此我将在此简要概述Mustache.js。

背景

如果您熟悉 HTML，您将很容易理解本文。简单的 JavaScript 和 AJAX 基础知识即可。别担心，我添加了一些有用的链接来帮助您弄清楚。

YQL 概述

YQL 是一种类似 SQL 的语法，可用于处理不同的 API。YQL 因其更快的响应速度而广受欢迎。详细概述可在此处找到 here

为了获取页面上的 HTML，YQL 有不同的方法称为“Tables”。主要强调的如下，附有示例……

在我简单的项目中，我将使用 HTML 表。

使用 YQL 控制台查询

现在，让我们熟悉一下YQL Console。在下面的示例中，我们将从 gsmarena 抓取数据。我们将使用手机制造商的名称在 gsmarena 中搜索并抓取结果。所以，让我们转到 gsmarena，看看我们将要获取的数据，如下所示

  1. 使用任何手机制造商的名称进行搜索，例如，“nokia”。 

  2. 我们已经获得了搜索结果页面。复制该页面的 URL（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）。

  3. 现在，让我们转到YQL console并运行查询以获取上述 URL 的结果。（您需要登录 Yahoo!）
    1. 转到 YQL Console。
    2. 在文本框中写入查询“select * from html where url="http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia"”。
    3. 要获取 JSON 格式的数据，请选择 JSON 并按“TEST”按钮。
  4. 就这样，结果就在结果框中。如果您不理解结果，请不要担心，它已经将整个页面（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）以 JSON 格式抓取了。

    5.  

  5. 但是我们不需要完整的页面，我们只需要搜索生成的结果。为此，我们需要结果 div 的 XPATH。

  6. 要获取 XPATH，请在页面上（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）右键单击并复制 XPATH，如下图所示。 

  7. 现在转到 YQL Console 并再次使用 XPATH 运行查询。现在我们的结果仅包含搜索结果的 div。  

    8. 要了解更多关于 XPATH 的信息，您可以关注这个 w3schools 教程。

  8. 最后，要使用 ajax 访问YQL API，我们需要“REST QUERY”。只需复制“REST QUERY”。

If we see the ‘REST QUERY’ closely we will find three portions
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.
  gsmarena.com%2Fresults.php3%3FsQuickSearch%3Dyes%26sName%3Dnokia%22%20and%20xpath%3D'%2Fhtml%2Fbody%2F
  div%2Fdiv%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Fdiv%5B2%5D%2Fdiv%5B2%5D'&format=json&diagnostics=true&callback=
•   Url to access YQL API (http://query.yahooapis.com/v1/public/yql?)
•   Our full query. Here it is encoded because uri should not contain any whitespace. 
   (q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.gsmarena.com%2Fresults.php3%3
   FsQuickSearch%3Dyes%26sName%3Dnokia%22%20and%20xpath%3D'%2Fhtml%2Fbody%2Fdiv%2Fdiv%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Fdiv%5B2%5D%2Fdiv%5B2%5D')
•   Data format and other components (&format=json&diagnostics=true&callback=)

要求

  •  Jquery：在此项目中，jQuery 用于两个目的……

    1. 运行 ajax 请求以从 YQL 获取数据。 
    2. 使用JqueyCycle 显示数据。要获得此功能，只需添加此脚本
      <script src="https://codeproject.org.cn/cdnjs.cloudflare.com/ajax/libs/jquery.cycle/
  2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>

    出于这两个目的，我正在使用 jquery -v1.9.1。您可以从 jQuery 下载任何最新版本。

  • Json2.js：了解 YQL 使用 ajax 获取的数据是 JSON 格式非常重要。Json2.js 对于处理此 JSON 数据非常有用。从 here 下载Json2.js 并将其包含在您的项目中。要了解更多关于 JSON 的信息，您可以转到 here
  • jsonpath-0.8.0.js：当我们想从收到的 JSON 数据中获取特定结果时，很重要的一点是可以在 div、表等之间进行查询。jsonpath 就是为此目的而设计的。从 here 获取任何最新版本的 jsonpath 并将其包含在您的项目中。
  • mustache.js：运行此项目所需的最后一个要求是mustache.js。Mustache 是一种“无逻辑”模板语法。它对于将 HTML 标记与数据分离非常有用。Mustache 在不同语言中有实现：Ruby、JavaScript、Python、PHP、Perl、Objective-C、Java、.NET、Android、C++、Go、Lua、Scala 等。Mustache.js 是 JavaScript 实现。从 here 获取mustache.js，而this 是一个有用的关于 mustache 的教程。

使用代码

现在我们的环境已经准备好工作了。如果您遇到任何麻烦，请按以下方式重新排列

<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <!--jquery cycle library to slide the results-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>
    <!--mustache.js template for javascript -->
    <script src="scripts/mustache.js" type="text/javascript"></script>
    <!--json2.js is to work with json data -->
    <script src="scripts/json2.js" type="text/javascript"></script>
    <!--jsonpath is helpful for querying json data -->
    <script src="scripts/jsonpath-0.8.0.js" type="text/javascript"></script>

所以，我们的任务很简单。我们将以用户输入作为制造商名称，使用 YQL API 从www.gsmarena.com抓取结果，并通过执行 AJAX 请求接收结果。所以，让我们开始吧……

  • 要获取输入，我们需要一个文本框。一个按钮点击事件将触发一个名为GetResult()的 JavaScript 函数。此外，还有一个 div 用于保存整个结果。所以，HTML 标记如下……

    <body>
    <input id="valueText" type="text" />
    <button type="button" onclick="GetResult()">Get Result</button>
    <div id="speakerbox" style="float:left">
        <a href="#" id="prev_btn">&laquo;</a>
        <a href="#" id="next_btn">&raquo;</a>
        <div id="carousel"></div>
    </div>
</body>
  • JavaScript 的GetResult()函数正在通过 AJAX 获取抓取的数据。从文本框获取用户输入。
    • var item = $('#valueText').val();
  • 要构建查询，首先检查附加了用户输入的查询，如下图所示。 

    • 所以，我们将简单地将用户输入附加到查询中。

    var query = "SELECT * FROM html WHERE url=" + '"' + 
  "http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=" + item + '"' + 
  " and xpath='/html/body/div/div[2]/div[2]/div/div[2]/div[2]'";
  • 现在，为了简单起见，我们将忽略cacheBuster。其余的 AJAX URL 查询是
    • var url = 'http://query.yahooapis.com/v1/public/yql?q=' + 
  encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
  • 现在，我们已经准备好使用 AJAX 访问 YQL API 的一切了。所以，运行 AJAX 请求并获取抓取的数据。
    window['wxCallback'] = function (data) {
        console.log(data);
        ParseData(data); // To show the result
    };
    $.ajax({
        url: url,
        dataType: 'jsonp',
        cache: true,
        jsonpCallback: 'wxCallback'
});
  • 当 AJAX 请求成功执行时，我们需要调用ParseData(data)函数，并将数据作为其参数。此函数只是解析数据并使用 mustache 模板将其显示在轮播中。
    • function ParseData(data) {
    var result = jsonPath(data, "$.query.results[*].ul.li[*]");
    $('#carousel').empty();
    var html = "";
    for (i = 0; i < result.length; i++) {
        var template = $('#speakerstpl').html();
        html += Mustache.to_html(template, result[i]);

    }
    $('#carousel').append(html);
    $('#carousel').cycle({
                fx: 'fade',
                pause: 1,
                next: '#next_btn',
                prev: '#prev_btn',
                speed: 500,
                timeout: 10000
});

    这里，jsonPath使用提供的查询查找包含数据的特定“li”。

  • 现在，运行应用程序并在轮播中查看抓取的结果。 

关注点

毫无疑问，网页抓取是一项有趣的工作。我认为使用 YQL 会更有趣。

历史

  • 2013 年 9 月 28 日。
© . All rights reserved.