网页抓取在网络开发中通常被视为一种负面行为，但在某些情况下，它却非常重要。本文将提供一个使用jQuery和YQL进行网页抓取的基本概述。为了展示数据，还使用了Mustache作为HTML模板，因此，也会在这里提供Mustache.js的简短概述。
如果熟悉HTML，那么将很容易理解本文。简单的JavaScript和AJAX基础知识就足够了。不用担心，添加了一些有用的链接以帮助理解。
YQL是一种类似于SQL的语法，可以用于处理不同的API。YQL因其快速响应而受欢迎。可以在这里找到详细的概述。为了从页面上获取HTML，YQL有称为‘Tables’的不同方法。下面将给出一些示例：
在简单项目中，将使用HTML表格。
现在，让熟悉YQL控制台。在以下示例中，将从gsmarena.com抓取数据。将使用手机制造商的名称在gsmarena上进行搜索并抓取结果。所以，让去gsmarena.com并查看即将获取的数据，如下所示：
使用任何手机制造商的名称进行搜索，例如‘nokia’。得到了搜索结果页面。复制页面的URL（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）。
现在，让去YQL控制台并运行查询以获取提到的URL的结果。（需要登录Yahoo!）
进入YQL控制台。在文本框中编写查询“select * from html where url="http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia"”。要获取JSON格式的数据，请选择JSON并按下‘TEST’按钮。
就这样，结果在结果框中。如果不理解结果，不用担心，它已经以JSON格式抓取了整个页面（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）。
但不需要整个页面，只需要搜索生成的结果。为此，需要结果div的XPATH。要获取XPATH，请右键单击页面（http://www.gsmarena.com/results.php3?sQuickSearch=yes&sName=nokia）并复制XPATH，如下图所示。
现在去YQL控制台并再次运行带有XPATH的查询。现在结果只包含搜索结果的div。要了解更多关于XPATH的信息，可以按照这个w3schools教程。
最后，要使用ajax访问YQL API，需要‘REST QUERY’。简单地复制‘REST QUERY’。
如果仔细看看‘REST QUERY’，将找到三个部分：
Jquery：在这个项目中，Jquery用于两个目的...运行ajax请求以从YQL获取数据。要使用JqueyCycle显示数据。为此，请添加此脚本：
<script src="http://www.codeproject.com/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数据非常有帮助。从这里下载Json2.js并包含在项目中。要了解更多关于JSON的信息，可以在这里查看jsonpath-0.8.0.js：当想要从接收到的JSON数据中获取特定结果时，重要的是要查询div、表格等。jsonpath为此目的而存在。从这里获取任何最新版本的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实现。从这里获取mustache.js，这个教程对mustache很有帮助。
现在环境已经准备好了。如果遇到任何麻烦，请按照以下方式重新排列：
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--
jquery cycle库滑动结果
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>
<!--
mustache.js模板用于javascript
-->
<script src="scripts/mustache.js" type="text/javascript"></script>
<!--
json2.js用于处理json数据
-->
<script src="scripts/json2.js" type="text/javascript"></script>
<!--
jsonpath有助于查询json数据
-->
<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()">获取结果</button>
<div id="speakerbox" style="float:left">
<a href="#" id="prev_btn">«</a>
<a href="#" id="next_btn">»</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); // 显示结果
};
$.ajax({
url: url,
dataType: 'jsonp',
cache: true,
jsonpCallback: 'wxCallback'
});
当AJAX请求成功执行时，需要调用ParseData(data)函数，并将数据作为其参数。这个函数简单地解析数据，并使用mustache模板在carousel中显示它。
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’。
现在，运行应用程序并查看carousel中的抓取结果。