Как получить данные с помощью JavaScript с другого сервера?

Как я могу делать запросы к другому серверу (т. Е. Получать страницу с любого желаемого сервера) с помощью JavaScript в браузере пользователя? Существуют ограничения для предотвращения этого для таких методов, как XMLHttpRequest, есть ли способы обойти их или другие методы?

Это общий вопрос, в частности, я хочу проверить серию случайных веб-сайтов и посмотреть, содержат ли они определенный элемент, поэтому мне нужно HTML-содержимое веб-сайта без загрузки каких-либо дополнительных файлов; все это в файле JavaScript, без каких-либо механизмов пересылки или прокси на сервере .

(Примечание: один из способов - использовать Greasemonkey и его GM_xmlhttpRequest.)

Ответов (8)

Решение

You should check out jQuery. It has a rich base of AJAX functionality that can give you the power to do all of this. You can load in an external page, and parse it's HTML content with intuitive CSS-like selectors.

An example using $.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
});

For external domains I've had to author a local PHP script that will act as a middle-man. jQuery will call the local PHP script passing in another server's URL as an argument, the local PHP script will gather the data, and jQuery will read the data from the local PHP script.

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

Giving middleman.php something along the lines of

<?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"]);

?>

Напишите прокси-скрипт, который пересылает HTTP-запрос из вашего домена, это позволит обойти ограничения XMLHttpRequest.

Если вы используете PHP, просто используйте cURL для запроса и чтения страницы, а затем просто выплюните html, как если бы он был из вашего домена.

Большое спасибо, это действительно хороший трюк. Я сделал так:

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");
?>

Это довольно просто ... если вы знаете "секретный" трюк, которым почти никто не делится ..

Это называется Yahoo yql ...

Итак, чтобы вернуть «власть пользователю» (и вернуться к удобной мантре: «никогда не принимать« нет »»), просто используйте http://query.yahooapis.com/ (вместо скрипта php? Proxy на стороне сервера).
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) и вызов обратного вызова функции: cbfunc .

Действительно, в качестве «бонуса» вы также сохраняете котенка каждый раз, когда вам не нужно было повторно выражать данные из «tag-soup».

Вы слышите, как ваш маленький сумасшедший ученый внутри себя начинает хихикать?

Затем см. Этот ответ для получения дополнительной информации (и не забывайте, что это комментарии для других примеров).

Удачи!

Для этого вам нужно будет написать прокси на сервере. И все запросы будут на ваш сервер, а затем ваш сервер загрузит html и отправит его обратно клиенту. И нет хорошего способа реализовать это только через javascript.
jQuery содержит функции для загрузки данных JSON или внешних скриптов с помощью XmlHttpRequest, но эту функцию нельзя использовать для html-страниц. Также вы можете проверить эту ветку списка рассылки jQuery.

Вы также можете использовать iframe для эмуляции запроса ajax. Это избавит вас от необходимости кодировать решение Backend для проблемы Frontend. Вот пример:

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 (Prototype, JQuery и т. Д.)

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

Вы добавляете данные в hello.js в виде массива, JSON или подобного. Пример: var daysInMonth = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

Получить JavaScript с другого сервера не намного проще .. :-)

обновление 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: *
  • отключить веб-безопасность браузера

Хром

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

Fire Fox

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

конец


нуб старый ответ 2011

$ .get (); может получать данные с jsbin.com, но я не знаю, почему он не может получать данные с другого сайта, например google.com

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

демо: http://jsfiddle.net/Xj234/ протестировано с firefox, chrome и safari.