回答 3 つの異なる手法で改訂され、すべて .ajax() と YQL ベースです。
テクニック 1
参照 HTML: http://doctors.ucsd.edu/?index=1
質問の最初の部分では、提供された URL のテーブルのタイプは、標準のHTML テーブル モデルの種類です。その を作成する際table、Web サイトはXML ファイルを使用して、医師の写真などのデータをrowsとに取り込みます。columns
サーバーの満足度を維持するために、XML ファイルのすべてのデータがブラウザーに読み込まれるわけではなく、限られた結果のみが表示され、次のページに進むオプションが表示されます。
これは、あなたが書いたコメント セクションの URL リンク (つまり、 http://doctors.ucsd.edu/?index=1 ) にも当てはまります。訪問者は、Web ページの [ページごとの結果] ドロップダウンから 10、25、または 50 の結果を選択できます。メニュー。Web のアドレス バーには、たとえば経由で要求された番号が表示されます。&setsize=25
その参照 URLをデータ スクレイピングすることもできますが、必要なすべてのデータを含むXML ファイルが既にあるため、そうしないことをお勧めします。直接アクセスする方が手間がかからない！
参照 XML: http://www.rchsd.org/api/physdir/
XML ファイルはすぐに入手できるので、質問の 2 番目の部分は簡単です。今回は、XML ファイルを参照するデータをスクレイピングすると、探している情報が非常に読みやすく表示されます。
上記の両方のデータ スクレイピング クエリで、テスト目的でリクエストを 5 つの結果に制限しましたが、それをより大きなサンプリング値に増やすことができます。最初の例の余分な Web ページ データの量は、XPATHノードをマップするために を使用する必要があり、そのデータを使用するには追加の処理が必要です。
このプロセスに関する多くの質問を説明する詳細な jsFiddle を用意しました。その中で、YQL の使用方法、およびXML ファイル.ajax()へのリンクについて説明します。
参考例：
$.ajax({
type: 'GET',
url: 'http://query.yahooapis.com/v1/public/yql?q=SELECT%20phys%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Fwww.rchsd.org%2Fapi%2Fphysdir%2F%22%20LIMIT%205',
dataType: 'xml',
success: function(data) {
var dataResults = $(data).find('results');
console.log(dataResults);
}
});
リファレンス チュートリアル:
jsFiddle データ スクレイピング XML デモ( jsFiddle HTML デモについては、以下を参照してください)
テクニック 2
編集:元のリファレンス HTMLに戻る: http://doctors.ucsd.edu/?index=1
最初のセクションで最後に書いたことは、実際には真実ではありません。必要なデータがすべて揃っているとは限らないからです。XML ファイル内の医師の住所から独自のGoogle マップ位置データを作成できますが、その情報は既に使用可能です。
その後、この URL には独自のフォーマットのサムネイル画像も含まれており、利用可能な場合は医師の情報セクションが含まれていることも発見されました。
次に、その HTML Web ページをデータ スクレイピングする方法を示す、書き直した jsFiddle を次に示します。この新しい jsFiddleでは、HTML ドキュメントを扱っているため、 YQL ステートメントはもはや存在しないことに注意してください。また、そのYQL Statement ではタグ名ではなくACCESS phys FROM xmlワイルドカードを使用します。それは*physACCESS * FROM html
上記のデータ スクレイピング 1 番目の方法で覚えているように、そのリクエストから返されたデータが多すぎます。XPATHそのYQL ステートメントに を追加して、目的のデータのみを取得する方法を説明します。
どこから始めますか？あなたのブラウザでそのウェブサイトに！Firefox を使用して続行します。
まず、テストで 5 つの結果が返されるように強制しましょう。これを行うには、Results Per Pageを 25 に変更し、ブラウザ バーで&setsize=クエリの 25 を 5 に変更します。変更を適用するには、キーボードの Enter キーを押します。
Web ページの [追加の検索基準] 、 [その他の専門分野の表示] 、 [場所] 、および[結果の並べ替え]を使用すると、ブラウザー バーも変更され、使用するカスタマイズ URL がさらに作成されます。
このデモでは、 Sort results by: Last Name AZの追加のカスタマイズが 1 つだけ必要です。必要に応じて Web ページをリロードしてください。念のため、カスタマイズした URL は次のようになります。
http://doctors.ucsd.edu/?sortby=familyName&sortDirection=asc&setsize=5
要求した 5 つの結果が Web ページに入力されたので、レイアウトがこれらの項目をどのようにサポートしているかを確認する必要があります。
マウスを右クリックしてFirefox Inspect Elementツールを使用し、表のレイアウト構造を表示して学習します。すぐに、返されたすべての結果が一意のクラス名で囲まれていることがわかります。
以下は、説明のために Firefox を使用したスクリーンショットです。
Inspect Elementツールの下部にあるアイコン( Inspect Element Icon の右側) を介してHTML パネルをポップアップすると、その 1 つの Doctors ボックスがどのように表示されるかを確認できます。layout
上の写真では、DOMを視覚的 にトラバースして、メインクラス名が要求された 5 つの結果を保持していることを確認できます。その実際のクラス名は使用できますが、使用するより洗練されたクラス名は、返される各アイテムが持つ です。 resultsListdivresultsListProvider
これで、使用する YQL ステートメントを作成するために必要な情報が揃いました。まず、開始するために使用する最小値は次のとおりです。
ACCESS * FROM html WHERE url="http://doctors.ucsd.edu/?sortby=familyName&sortDirection=asc&setsize=5"
あまりにも多くの重要でない Web ページ データを返すため、上記は実際には役に立ちません。そのため、Inspect Elementを使用して本当に重要なものを発見しました。そうは言っても、classnameXPATHを介して必要な Web ページの部分にアクセスするために を使用します。 resultsListProvider
xpath="//div[@class='resultsListProvider']"
これで、データをスクレイピングできる最終的な YQL ステートメントを作成するために、両方の部分を組み合わせることができます。AND
SELECT * FROM html WHERE url="http://doctors.ucsd.edu/?sortby=familyName&sortDirection=asc&setsize=5" AND xpath="//div[@class='resultsListProvider']"
上記の最終的な YQL ステートメントは、これらの変更を反映するようにコメントを更新した、作成した新しい jsFiddle で使用できる結果を提供します。必要に応じて、XML ファイルとHTML URLの両方の方法を組み合わせて、データ スクレイピングの要件を満たすことができます。各方法では、他の方法では不足しているコンテンツが提供されるためです。
注意: Web ページの読み込み時、またはYQL Rest Stateクエリの使用時に、一部のデータが直接レンダリングされる場合があります。つまり、動的データは動的データに基づいている可能性があります。オーマイ！
参照チュートリアル:
jsFiddle Data Scraping HTML デモ( jsFiddle XML デモについては上記を参照)
テクニック 3
編集 2: HTML を直接使用する
jsFiddle Data Scraping HTML Demo: Clone That Webpage
最新の編集では、元の Web ページのスタイル シート (オプションであり、独自の を作成できます) の使用方法を示していますが、属性を使用して Ajax データを別の方法で要求していdataTypeます。このアプローチを使用すると、ローカル Web ページに正確なマークアップが配置されclassnamesますid's。
jsFiddle スクリーンショット:
