Utilisation d'ajax pour accéder au Web à partir du fichier local

Question

Je suis un peu nouveau pour JQuery et ajax, donc je m'excuse si c'est une question de débutant. J'essaie d'utiliser ajax à partir d'un fichier local pour accéder au web (par exemple, obtenir un fichier texte).
Je n'utilise pas IIS ou quoi que ce soit, un simple fichier de mon disque dur (et j'en ai besoin pour rester comme ça).
Vérifié à la fois sur IE8 et Chrome (version 11.0.696.60).

Voici quelques javascript pour illustrer:

// use ajax to load from the web 
$("#webText").click(function(){ 
    $.get("http://www.w3schools.com/jquery/demo_ajax_load.txt", function(result){ 
     alert(result); 
}); 

Ce code tente de charger un fichier texte à partir du Web - l'opération échoue sur IE et le chrome (ne sera pas obtenir pour se rendre à la fonction de réussite) .
de Chrome dans notifie la console d'erreur sur les "XMLHttpRequest ne peut pas charger _http: //www.w3schools.com/jquery/demo_ajax_load.txt: Origine null n'est pas autorisé par Access-Control-Allow-Origin"

// use ajax to load from a local file 
$("#localText").click(function(){ 
    $.get("demo_ajax_load.txt", function(result){ 
     alert(result); 
}); 

Ce code essaie de charger à partir d'un fichier texte local.
IE: l'opération aboutit. Chrome: échoue avec la même erreur que ci-dessus.

A ce stade, je pensais qu'il était impossible de communiquer avec le Web à partir d'un fichier local, mais je suis tombé sur une question similaire: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

En utilisant les exemples donnés là-bas, j'ai essayé:

// use ajax to load json object from the web 
$("#webJSON").click(function(){ 
    var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150'; 
    $.get(url, function(json) { 
     alert(json.photos[1].photoUrl); 
    }, "jsonp"); 
}); 

Et ce code fonctionne très bien sur les deux navigateurs. Alors évidemment, il est possible de communiquer avec un service web à partir d'un fichier local.

Des idées?

BTW - Je suis plus intéressé par l'aspect IE de cela, Chrome et d'autres navigateurs sont moins un problème.

Merci.

Answer 1

Le problème est que vous exécutez le Same Origin Policy, qui s'applique à tous les appels "réels" ajax (appels utilisant réellement XMLHttpRequest).

La raison pour laquelle IE fonctionne mais pas Firefox et Chrome est simple: IE n'applique pas la SOP lorsque l'origine est un fichier local et que la ressource que vous essayez de récupérer est sur le web. Chrome et Firefox, d'autre part, appliquer la norme Cross-Origin Resource Sharing du W3C et donc inclure le pertinent "c'est mon origine, allez-vous me laisser parler?" En-têtes   — et w3schools dit "Non, je ne vais pas vous parler." ("null" est la valeur "origine" pour la machine locale.) La joie d'avoir un choix de navigateurs est qu'ils peuvent prendre différentes décisions de conception sur des choses comme ça.

Le code que vous avez trouvé qui fonctionne est de ne pas faire un véritable appel ajax, qu'il fait JSON-P, qui n'utilise pas XMLHttpRequest du tout et donc court-circuite le SOP, mais seulement pour GET opérations (non POST) et seulement si les l'autre extrémité le soutient. (get fonction de jQuery peut faire à la fois de vrais appels ajax et JSON-P, la clé de ce qu'il fait est le paramètre dataType, qui dans l'exemple que vous avez montré est "jsonp".) Vous pouvez trouver this article utile. Il décrit en utilisant YQL (un service de grattage HTML de Yahoo) comme un proxy inter-domaine, car YQL supporte JSON-P.