Làm thế nào để thiết lập biến javascript địa phương của tôi như một dữ liệu json trên trang web từ xa

Question

Tôi có một mã javascript trên trang web của tôi, có một biến:

var remoteJsonVar; 

Mặt khác có một tệp json trên xa website

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

tôi cần phải đặt biến remoteJsonVar số liệu jason xa xôi này.

Tôi chắc chắn rằng nó rất đơn giản, nhưng tôi không thể tìm ra giải pháp.

Ví dụ làm việc nhỏ sẽ tốt đẹp.

Answer 1

Bởi vì bạn đang cố gắng để có được những dữ liệu từ một khác nhau gốc, nếu bạn muốn làm điều này hoàn toàn client-side, bạn muốn sử dụng JSON-P thay vì chỉ JSON vì Same Origin Policy. Facebook hỗ trợ này nếu bạn chỉ cần thêm một tham số callback chuỗi của bạn truy vấn, ví dụ:

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

Sau đó, bạn định nghĩa một hàm trong kịch bản của bạn (ở phạm vi toàn cầu) trong đó có các tên mà bạn cung cấp cho trong đó callback tham số, như thế này :

function foo(data) { 
    remoteJsonVar = data; 
} 

Bạn kích hoạt nó bằng cách tạo ra một yếu tố script và thiết lập src đến URL mong muốn, ví dụ:

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

Lưu ý rằng cuộc gọi đến chức năng của bạn sẽ là không đồng bộ.

Bây giờ, vì bạn có thể muốn có nhiều hơn một yêu cầu chưa xử lý và có thể bạn không muốn rời khỏi cuộc gọi lại đó khi bạn hoàn tất, bạn có thể muốn tinh vi hơn một chút và tạo ngẫu nhiên tên gọi lại, v.v. Dưới đây là ví dụ hoàn chỉnh:

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."; 
    } 
    } 
})(); 

Lưu ý rằng khi bạn sử dụng JSONP, bạn đang đặt rất nhiều niềm tin vào trang web ở đầu bên kia. Về mặt kỹ thuật, JSONP không phải là JSON chút nào, nó cung cấp cho trang web từ xa cơ hội mã chạy trên trang của bạn. Nếu bạn tin tưởng đầu kia, tuyệt vời, nhưng chỉ cần nhớ tiềm năng lạm dụng.

Bạn chưa đề cập bằng bất kỳ thư viện, vì vậy tôi đã không sử dụng bất kỳ ở trên, nhưng tôi sẽ khuyên bạn nên nhìn vào một thư viện JavaScript tốt như jQuery, Prototype, YUI, Closure, hoặc any of several others. Rất nhiều đoạn mã trên đã được viết cho bạn với một thư viện tốt. Ví dụ: đây là cách sử dụng jQuery ở trên:

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