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

Question

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

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

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

Answer 1

Вы должны проверить jQuery . Он обладает богатой базой функциональности AJAX , которая может дать вам возможность сделать все это. Вы можете загрузить внешнюю страницу и проанализировать ее HTML-содержимое с помощью интуитивно понятных CSS-подобных селекторов .

Пример использования $ .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"]);

?>

Answer 2

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

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

Таким образом, чтобы восстановить «власть для пользователя» (и вернуться к удобной мантре: «никогда не принимать нет»), просто используйте http://query.yahooapis.com/ (вместо сценария php? Proxy serveride).
JQuery не будет строго необходим.

ПРИМЕР 1:
Использование SQL-подобной команды:

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

Следующая ссылка очистит SO от новых вопросов (в обход междоменной безопасности bull $ #! 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.

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

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

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

Удачи!

Answer 3

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

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

Answer 4

Обновление 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

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

Firefox

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

конец

---

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

.

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

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

демо: http://jsfiddle.net/Xj234/ протестировано с Firefox, Chrome и Safari.

Answer 5

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

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

Answer 6

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

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

Answer 7

Вы также можете использовать 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 и т. Д.)

Answer 8

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