web-dev-qa-db-fra.com

Comment obtenir des données avec JavaScript à partir d'un autre serveur?

Comment puis-je adresser des requêtes à d’autres serveurs (c’est-à-dire obtenir une page de n’importe quel serveur de votre choix) avec un JavaScript dans le navigateur de l’utilisateur? Il existe des limitations pour empêcher cela avec des méthodes telles que XMLHttpRequest. Existe-t-il des moyens de les contourner ou d’autres méthodes?

C’est une question générale. En particulier, je souhaite vérifier une série de sites Web aléatoires et voir s’ils contiennent un élément donné. J'ai donc besoin du contenu HTML d’un site Web sans télécharger de fichiers supplémentaires; tout cela dans un fichier JavaScript, sans aucun mécanisme de transfert ou de proxy sur un serveur .

(Remarque: une solution consiste à utiliser Greasemonkey et son GM_xmlhttpRequest.)

javascriptcross-domain
17
user46665

Vous devriez vérifier jQuery . Il a une riche base de AJAX fonctionnalités qui peuvent vous donner le pouvoir de faire tout cela. Vous pouvez charger une page externe et analyser son contenu HTML avec des sélecteurs intuitifs de type CSS .

Un exemple utilisant $ .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
});

Pour les domaines externes, j'ai dû créer un script local PHP qui agira comme intermédiaire. jQuery appellera le script local PHP en passant en argument l'URL d'un autre serveur, le script local PHP recueillera les données et jQuery lira les données du système local PHP script.

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

Donner à quelque chose d'intermédiaire.php dans le sens de 

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

?>
21
Sampson

Écrivez un script proxy qui transfère la requête http de votre domaine, ce qui contournera les restrictions XMLHttpRequest.

Si vous utilisez PHP, utilisez simplement cURL pour demander et lire la page, puis crachez simplement le code HTML comme s'il provenait de votre domaine.

3
mmattax

C'est plutôt facile ... si vous connaissez le truc "secret", presque personne ne le partage ...

C'est ce qu'on appelle Yahoo yql ...

Donc, pour regagner le "pouvoir de l'utilisateur" (et pour revenir à la devise pratique: "ne jamais accepter non"), utilisez simplement http://query.yahooapis.com/ (au lieu d'un serveur proxy php? scénario).
jQuery ne serait pas strictement nécessaire.

EXEMPLE 1:
En utilisant la commande semblable à SQL: 

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

Le lien suivant effacera SO pour les questions les plus récentes (en contournant la bulle de sécurité inter-domaines $ #! 7):
http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20html%20where%20url%3D%22http%3A%2F%2Fstackoverflow.com%22 % 20et% 0A% 20% 20% 20% 20% 20% 20xpath% 3D% 27% 2F% 2Fdiv% 2Fh3% 2Fa% 27% 0A% 20% 20% 20% 20 & format = json & callback = cbfunc

Comme vous pouvez le voir, cela retournera un tableau JSON (on peut aussi choisir xml) et appelle la fonction de rappel: cbfunc.

En effet, en tant que "bonus", vous sauvegardez également vous enregistrez un chaton à chaque fois que vous n’avez pas besoin de donner une expression rationnelle à des données provenant de "tag-soup". 

Entendez-vous votre petit scientifique fou en vous commencer à rire? 

Puis voir cette réponse pour plus d’informations (et n'oubliez pas ses commentaires pour plus d'exemples).

Bonne chance!

3
GitaarLAB

mise à jour 2018:

Vous ne pouvez accéder à interdomaine qu'avec les 4 conditions suivantes

  • dans l'en-tête de réponse a Access-Control-Allow-Origin: *

Démo

$.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>

  • utiliser le serveur comme pont ou proxy vers la cible

Démo:

$.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>

  • utiliser l'addon de navigateur pour activer Allow-Control-Allow-Origin: *
  • désactiver la sécurité Web du navigateur

Chrome

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

Firefox

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

fin

noob old answer 2011

$ .get (); peut obtenir des données de jsbin.com mais je ne sais pas pourquoi il ne peut pas obtenir de données d'un autre site comme google.com

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

démo: http://jsfiddle.net/Xj234/ testé avec firefox, chrome et safari.

1
ewwink

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

Vous ajoutez les données dans hello.js sous forme de tableau, JSON ou similaire. Exemple: Var daysInMonth = nouveau tableau (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

Obtenir du code JavaScript depuis un autre serveur n'est pas si simple .. :-)

0
Kristoffer Bohmann

Pour ce faire, vous devrez écrire un proxy sur le serveur. Et toutes les demandes seront adressées à votre serveur, qui le chargera et le renverra au client. Et il n'y a pas de bon moyen pour implémenter cela via JavaScript uniquement.
jQuery contient une fonctionnalité permettant de charger des données JSON ou des scripts externes à l'aide de XmlHttpRequest, mais cette fonctionnalité ne peut pas être utilisée pour les pages HTML. Vous pouvez également consulter ce fil de la liste de diffusion jQuery.

0
zihotki

Merci beaucoup, c'est vraiment un bon truc. J'ai fait de cette façon:

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

Vous pouvez également utiliser un iframe pour émuler une demande ajax. Cela vous évite d'avoir à coder une solution dorsale pour un problème frontal. Voici un exemple:

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")}
       }

Cela devrait faire l'affaire. Veuillez noter que la ligne de détection du navigateur n'est pas la plus propre. Vous devez absolument utiliser celles fournies dans tous les frameworks JS les plus courants (Prototype, JQuery, etc.).

0
Chepech