web-dev-qa-db-ja.com

別のサーバーからJavaScriptでデータを取得する方法は？

ユーザーのブラウザ内でJavaScriptを使用して、他のサーバーにリクエスト（つまり、任意のサーバーからページを取得）するにはどうすればよいですか？ XMLHttpRequestなどのメソッドでこれを防ぐための制限があります。それらまたは他のメソッドをバイパスする方法はありますか？

これは一般的な質問です。特に、ランダムな一連のWebサイトをチェックして、特定の要素が含まれているかどうかを確認したいので、追加のファイルをダウンロードせずにWebサイトのHTMLコンテンツが必要です。すべてJavaScriptファイルでサーバーでの転送またはプロキシメカニズムなし。

（注：1つの方法は、GreasemonkeyとそのGM_xmlhttpRequestを使用することです。）

javascriptcross-domain
19
user46665

jQuery を確認してください。これには AJAX機能 の豊富なベースがあり、これらすべてを実行する力を与えることができます。外部ページを読み込んで、直感的な CSSのようなセレクター でHTMLコンテンツを解析できます。

$.get();の使用例

$.get("anotherPage.html", {}, function(results){
  alert(results); // will show the HTML from anotherPage.html
  alert($(results).find("div.scores").html()); // show "scores" div in results
});

外部ドメインの場合、ローカルPHP仲介者として機能するスクリプトを作成する必要がありました。jQueryはローカルPHPスクリプトを別のサーバーのURLを引数として、ローカルPHPスクリプトがデータを収集し、jQueryがローカルPHPスクリプトからデータを読み取ります。

$.get("middleman.php", {"site":"http://www.google.com"}, function(results){
  alert(results); // middleman gives Google's HTML to jQuery
});

middleman.phpに沿って何かを与える

<?php

  // Do not use as-is, this is only an example.
  // $_GET["site"] set by jQuery as "http://www.google.com"
  print file_get_contents($_GET["site"]);

?>
22
Sampson

これはかなり簡単です...「秘密」のトリックを知っていれば、誰も共有しません。

それはYahoo yqlと呼ばれています...

したがって、「ユーザーへのパワー」を取り戻すには（そして、便利なマントラに戻るには、「決して受け入れない」）、単に http://query.yahooapis.com/ を使用します（phpの代わりに？プロキシサーバーサイドスクリプト）。
jQueryは厳密には必要ありません。

例1：
SQLに似たコマンドの使用：

select * from html 
where url="http://stackoverflow.com" 
and xpath='//div/h3/a'

次のリンクは、最新の質問のためにSO（ドメイン間セキュリティブル$＃！7をバイパスして）を削ります）：
http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20html%20where%20url%3D%22http%3A%2F%2Fstackoverflow.com ％22％20and％0A％20％20％20％20％20％20xpath％3D％27％2F％2Fdiv％2Fh3％2Fa％27％0A％20％20％20％20＆format = json＆callback = cbfunc

ご覧のとおり、これはJSON配列を返し（xmlを選択することもできます）、callback-function：cbfuncを呼び出します。

実際、「ボーナス」として、あなたも 子猫を保存 を使用して、「タグスープ」からデータを正規表現する必要がなくなりました。

自分の中にいる小さなマッドサイエンティストがクスクス笑い始めるのを聞いていますか？

次に、詳細については この答え を参照してください（他の例についてはコメントであることを忘れないでください）。

幸運を！

4
GitaarLAB

ドメインからのHTTPリクエストに沿って転送するプロキシスクリプトを記述します。これにより、XMLHttpRequestの制限がバイパスされます。

PHPを使用している場合は、cURLを使用してページを要求し、読み取ってから、ドメインからのものであるかのようにHTMLを吐き出します。

3
mmattax

2018年更新：

クロスドメインにアクセスできるのは、次の4つの条件がある場合のみです。

  • 応答ヘッダーにはAccess-Control-Allow-Origin: *

デモ

$.ajax({
  url: 'https://api.myjson.com/bins/bq6eu',
  success: function(response){
    console.log(response.string);
  },
  error: function(response){
    console.log('server error');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  • サーバーをターゲットへのブリッジまたはプロキシとして使用する

デモ：

$.ajax({
  url: 'https://cors-anywhere.herokuapp.com/http://whatismyip.akamai.com/',
  success: function(response){
    console.log('server IP: ' + response);
  },
  error: function(response){
    console.log('bridge server error');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  • ブラウザのアドオンを使用してAllow-Control-Allow-Origin: *を有効にする
  • ブラウザのWebセキュリティを無効にする

Chrome

chrome.exe --args --disable-web-security

Firefox

about:config -> security.fileuri.strict_Origin_policy -> false

終わり

noob old answer 2011

$ .get（）; jsbin.comからデータを取得できますが、google.comのような別のサイトからデータを取得できない理由がわかりません

$.get('http://jsbin.com/ufotu5', {},
  function(results){  alert(results); 
});

デモ： http://jsfiddle.net/Xj234/ Firefoxでテスト済み、chromeおよびsafari。

2
ewwink

Iframeを使用して、ajaxリクエストをエミュレートすることもできます。これにより、フロントエンドの問題に対してバックエンドソリューションをコーディングする必要がなくなります。次に例を示します。

function setUploadEvent(typeComponet){
       var eventType = "";
       var iframe = document.getElementById("iframeId");
       try{
           /* for Mozilla / Opera9 */
           if (/(?!.*?compatible|.*?webkit)^mozilla|opera/i.test(navigator.userAgent)) {
                eventType = "onload";
           }else{
           /* IE  */
                eventType = "onreadystatechange";
           }

           iframe[eventType] = function(){
                var doc = iframe.contentDocument || iframe.contentWindow.document;
                var response = doc.body.innerHTML; /* or what ever content you are looking for */
             }
           }
       catch(e){
           alert("Error loading content")}
       }

これでうまくいくはずです。ブラウザ検出ラインは最もクリーンではないことに注意してください。最も一般的なすべてのJSフレームワーク（プロトタイプ、JQueryなど）で提供されるものを絶対に使用する必要があります。

1
Chepech

<script language = "JavaScript" type = "text/javascript" src = "http://www.example.com/hello.js"> </ script>

データを配列、JSONなどとしてhello.jsに追加します。例：var daysInMonth = new Array（31、28、31、30、31、30、31、31、30、31、30、31）;

別のサーバーからJavaScriptを取得するのはそれほど簡単ではありません。

0
Kristoffer Bohmann

これを行うには、サーバーにプロキシを作成する必要があります。そして、すべてのリクエストはサーバーに送られ、サーバーはhtmlをロードしてクライアントに送り返します。そして、これをJavaScriptのみで実装する良い方法はありません。
jQueryには、XmlHttpRequestを使用してJSONデータまたは外部スクリプトを読み込む機能が含まれていますが、この機能はHTMLページでは使用できません。また、jQueryメーリングリストの this thread を確認することもできます。

0
zihotki

どうもありがとう、これは本当に良いトリックです。私はこのようにしました：

test.html

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","sp.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

sp.php

<?php
  print file_get_contents("http://your.url.com/you-can-use-cross-domain");
?>
0
GniK KinG