ふと思い立ってごりごりと開発しようとするも、それほど頻繁に開発するわけでもないので、つい忘れてしまいがちなのでメモ。
流れとしては以下のとおり
1. PHPで外部サイトのHTMLを取得
※これで同ドメイン内でのajaxとして利用可能になる
2. jQueryでajax
文字にすると簡単なのに、なぜこれを毎度毎度忘れてしまうのか…
手順1：PHPで外部サイトのHTMLを取得
具体的なコードは以下の通り。
<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
echo file_get_contents($_GET["url"]);
}else{
echo "error";
}
?>このPHPを同一ドメイン内に設置してjQueryから読みに行くだけ。
URLパラメータがhttpまたはhttpsなら…という感じ。
HTMLデータが出力されるので、ajaxの戻り値もDOMオブジェクトとして扱えます。
JSONなどを返すURLに対しても利用できますが、正しくパース可能なデータかどうかを確認する必要があります。
（それでドハマりしたのは、また別のお話…）
他の文字列を返すURLに対しても、必ず想定した文字列かどうかは確認しておいた方が安心です。
手順2：jQueryでajax
jQueryから上記のPHPに対して、ajaxします。
取得したい外部サイトのURLは、URLパラメータとして渡してあげればOK。
$.ajax({
url: "前述のPHPファイル名?url="+urlあとはHTMLでパースしようが、ごりごりとDOMをいじろうが思いのまま。
素敵！
おまけ：取得したHTMLの抽出
jQueryでajaxした後のデータを抽出するときに、ついつい忘れがちなのでこちらもあわせてメモ。
$.ajax({
url: "前述のPHPファイル名?url="+url
}).then(function(hoge){
const hogehoge = $($.parseHTML(hoge));
$fuga = $('セレクタ',hogehoge).html();
$piyo = $('セレクタ',hogehoge).text();HTMLをパースするかどうかは置いておいて…
抜き出したら変数に入れておいた方があとあと楽な気がする。
抜き出す際は第2引数にajaxの戻り値orパース後の変数名を入れてあげる。
$('セレクタA','セレクタB')この書き方は「セレクタBの中にあるセレクタA」という意味。
（雑な説明）
ajaxの戻り値がHTMLオブジェクトまたはDOMオブジェクト扱い（？）なので、セレクタBの方に入れても問題ない…ということですね。
$('セレクタA,セレクタB')こっちだと通常のCSSセレクタ同様それぞれに対して処理になるので、ちょっと注意しておきましょう。
$fuga = $('セレクタ',hogehoge).eq(0).html();これも覚えておきたい（自分が忘れがち）記述。
配列の何番目か指定するメソッド。
配列と同様に「0」スタート。
「0」の場合も明示してあげると、あとで自分が楽になります。
jQueryだけでクロスドメイン制約をクリアする方法もありますが…
ぶっちゃけこっちの方がシンプルで分かりやすい。
PHPが動く前提ですが、このご時世にPHP使えないサーバーで開発することもないでしょう。