JavaScript で URL から HTML を取得する

ブラウザ開発ツールを使用して、Web ページのソースコードを簡単に確認できます。

しかし、JavaScript が提供する興味深い機能は、ページにアクセスしなくても、ページ上の別の Web ページのソースコードを取得できることです。この記事は、これを達成するためのさまざまな方法を示しています。

XMLHttpRequest() を使用して、URL を含む HTML コードを取得する

XML HTTP Request（XHR）は主に、ページを更新せずに URL からデータを取得するために使用されます。したがって、これらを使用して、別のページから HTML コードを取得できます。

function makeHttpObject() {
  if ('XMLHttpRequest' in window)
    return new XMLHttpRequest();
  else if ('ActiveXObject' in window)
    return new ActiveXObject('Msxml2.XMLHTTP');
}

var request = makeHttpObject();
request.open('GET', '/', true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4) console.log(request.responseText);
};

上記の例では、最初に HTTP オブジェクトを HTTP リクエストにします。

次に、open() メソッドと send() メソッドを使用して get リクエストを初期化して送信します。応答が利用可能になったときに HTML コードを出力します。

jQuery を使用して、URL を含む HTML コードを取得する

jQuery.ajax() は、非同期 HTTP リクエストを実行するために使用されます。引数として、リクエストと settings（キーと値のペアのセット）を送信するための URL を取ります。

$.ajax({
  url: '/',
  success: function(data) {
    console.log(data);
  }
});

上記の例では、HTTP リクエストの URL を渡し、リクエストが成功した場合は、返されたデータ（つまり、ウェブページの HTML コード）を出力します。