Jak ustawić moją lokalną zmienną javascript jako danych JSON na zdalnym stronie

Question

Mam kodu javascript na mojej stronie, jest zmienna:

var remoteJsonVar; 

Z drugiej strony znajduje się plik json na pilocie strona

https://graph.facebook.com/?ids=http://www.stackoverflow.com

muszę ustawić zmienną remoteJsonVar do tego zdalnego danych jason.

Jestem pewien, że jest to bardzo proste, ale nie mogę znaleźć rozwiązania.

Mały przykład pracy byłby miły.

Answer 1

Bo starasz się uzyskać dane z innego pochodzenia, jeśli chcesz to zrobić całkowicie po stronie klienta, można użyć JSON-P raczej niż tylko JSON powodu Same Origin Policy. Facebook umożliwia to jeśli tylko dodać parametr callback do łańcucha zapytania, np:

https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo 

Następnie należy zdefiniować funkcję w skrypcie (w zakresie globalnym), który ma nazwę dajesz w tym parametrze callback, jak to :

function foo(data) { 
    remoteJsonVar = data; 
} 

można wywołać go tworząc element script i ustawienie src do żądanego adresu URL, na przykład:

var script = document.createElement('script'); 
script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo"; 
document.documentElement.appendChild(script); 

Należy pamiętać, że wywołanie funkcji będzie asynchroniczne.

Teraz, ponieważ możesz chcieć mieć więcej niż jedną zaległą prośbę, a prawdopodobnie nie chcesz zostawiać tego połączenia zwrotnego, gdy skończysz, możesz chcieć być nieco bardziej wyrafinowanym i stworzyć losowy nazwa oddzwaniania itp. Oto pełny przykład:

Live copy | Live source

(function() { 

    // Your variable; if you prefer, it could be a global, 
    // but I try to avoid globals where I can 
    var responseJsonVar; 

    // Hook up the button 
    hookEvent(document.getElementById("theButton"), 
      "click", 
      function() { 
     var callbackName, script; 

     // Get a random name for our callback 
     callbackName = "foo" + new Date().getTime() + Math.floor(Math.random() * 10000); 

     // Create it 
     window[callbackName] = function(data) { 
      responseJsonVar = data; 
      display("Got the data, <code>shares = " + 
      data["http://www.stackoverflow.com"].shares + 
      "</code>"); 

      // Remove our callback (`delete` with `window` properties 
      // fails on some versions of IE, so we fall back to setting 
      // the property to `undefined` if that happens) 
      try { 
       delete window[callbackName]; 
      } 
      catch (e) { 
       window[callbackName] = undefined; 
      } 
     } 

     // Do the JSONP request 
     script = document.createElement('script'); 
     script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=" + callbackName; 
     document.documentElement.appendChild(script); 
     display("Request started"); 
    }); 

    // === Basic utility functions 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = msg; 
    document.body.appendChild(p); 
    } 

    function hookEvent(element, eventName, handler) { 
    // Very quick-and-dirty, recommend using a proper library, 
    // this is just for the purposes of the example. 
    if (typeof element.addEventListener !== "undefined") { 
     element.addEventListener(eventName, handler, false); 
    } 
    else if (typeof element.attachEvent !== "undefined") { 
     element.attachEvent("on" + eventName, function(event) { 
     return handler(event || window.event); 
     }); 
    } 
    else { 
     throw "Browser not supported."; 
    } 
    } 
})(); 

Należy pamiętać, że podczas korzystania z jsonp, jesteś oddanie dużo zaufania w miejscu na drugim końcu. Technicznie, JSONP w ogóle nie jest JSON, daje zdalnej stronie możliwość uruchomienia kodu na twojej stronie. Jeśli ufasz drugiemu, świetnie, ale pamiętaj o możliwości nadużycia.

Nie wspomniano używając żadnych bibliotek, więc nie zastosować dowolny wyżej, ale polecam patrząc na dobrej biblioteki JavaScript jak jQuery, Prototype, YUI, Closure lub any of several others. Wiele kodu powyżej zostało już napisane dla ciebie z dobrą biblioteką. Na przykład, powyższe użycie jQuery:

Live copy | Live source

jQuery(function($) { 

    // Your variable 
    var responseJsonVar; 

    $("#theButton").click(function() { 
    display("Sending request"); 
    $.get("https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=?", 
      function(data) { 
      responseJsonVar = data; 
      display("Got the data, <code>shares = " + 
       data["http://www.stackoverflow.com"].shares + 
       "</code>"); 
      }, 
      "jsonp"); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
});