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

Question

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

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

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

Answer 1

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 6

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

$ .get («http://jsbin.com/ufotu5» , {}, функция (результаты) {alert (результаты); });

демо: http://jsfiddle.net/Xj234/ протестирована с FireFox, хром и сафари.

Answer 7

Это довольно легко ... если вы знаете «секрет» трюк почти никто акции ..

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

Так что для того, чтобы вернуть «власть пользователю» (и возвращаясь к удобной мантре: «никогда не принимайте»), просто используйте http://query.yahooapis.com/ (вместо скрипта php? proxy serverside).
jQuery строго не требуется.

Пример 1:
Использование SQL-как команда: (! Обход междоменного быка безопасности $ # 7)

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

Следующая ссылка будет скрести SO для новейших вопросов:
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.

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

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

Для получения дополнительной информации см. this answer (и не забудьте прокомментировать).

Удачи!

Answer 8

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

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