如何用JavaScript中的Ajax調用替換加載腳本文件（使用帶JavaScript的YQL）

!!!下面的問題已經由Andrew Whitaker的回答（很好的例子）得到了回答。基本上，您可以使用$ .getJSON（..）以編程方式從諸如YQL之類的服務中獲取JSON數據，並指出此服務可以與不同的域相關聯（即，不是由加載頁面的相同域提供的）。通常情況下，您不能向不同的域發出這樣的請求，因此在實現請求時使用了「技巧」，在該請求中動態生成HTML並將其插入到DOM中，並獲取並執行新的跨域腳本。在執行返回的腳本時，它會導致處理攜帶的JSON並調用您提供的回調函數。由於此技術盲目執行返回的腳本，因此必須小心安全問題（可能類似於加載任何腳本）。爲了啓用跨域功能，在提供的getJSON url中包含選項「？callback =？」是非常重要的，該選項被jQuery選中並刪除/修改爲使用JSONP跨域調用的信號技術。請注意，這種返回JSON數據的方法依賴於JSONP的服務器端支持。再次感謝所有的幫助。！如何用JavaScript中的Ajax調用替換加載腳本文件（使用帶JavaScript的YQL）

下面的代碼發佈到YQL並獲取IBM的當前股票價格（作爲示例）。它工作正常，通過加載一個腳本文件來完成它的任務，該腳本文件的URL有效地導致了JSON數據的動態生成，在加載和執行時會導致運行「top_stories」並提取價格。不過，我希望基於AJAX調用（$ .getJSON（..））來實現這個過程，我假定我從下面的基於腳本的示例中分離出url和數據組件。我已經嘗試了很多變體而沒有成功 - 它看起來並不像我能獲得$ .getJSON（..）調用來調用回調函數。任何想法將不勝感激。 ...埃裏克

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head><title>YQL</title> 
    <style type='text/css'> 
    #results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; } 
    </style> 
    <script type='text/javascript'> 
    // Parses returned response 
    function top_stories(o) { 
     var price = o.query.results.xml_api_reply.finance.last.data; 
     alert("last = " + price); 
     // Place price in div tag 
     document.getElementById('results').innerHTML = price; 
    } 
</script> 
</head> 
<body> 
    <!-- Div tag for stories results --> 
    <div id='results'></div> 
    <!-- The YQL statment will be assigned to src. --> 
    <script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20google.igoogle.stock%20where%20stock%3D'ibm'%3B&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=top_stories"></script> 
</body> 
</html>

來源

2012-07-17 Eric Schneider

查找相同的來源策略，您違反了。 – Anders 2012-07-17 00:15:01

不與YQL和JSONP :) – 2012-07-17 00:17:30

我嘗試了下面的受訪者提供的代碼（謝謝！），發現它可以在Chrome瀏覽器下工作，但不是IE瀏覽器（包括jsfiddle網站示例 - 什麼是整潔）。我試圖禁用IE的XSS過濾器，防火牆，並儘量減少IE的安全設置，但這沒有幫助。 – 2012-07-17 03:07:58

這裏有一個工作代碼：

$(function() { 
    var ticker = "IBM"; 
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D'"+ticker+"'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"; 
    $.getJSON(url, function(data) { 
     var items = []; 
     $.each(data.query.results.quote, function(key, val) { 
     if(key == "ChangePercentRealtime" || key == "LastTradeRealtimeWithTime") { items.push(val)}; 
     }); 
     $("#nameOfDiv1").html(items[0].substr(9)); 
     $("#nameOfDiv2").html(items[1].substr(6)); 
    }); 
});

的SUBSTR（）獲取其中包含了一些無用的東西返回的結果中的實際數據。它把它放在一些html div中。你可以選擇你想要的結果集。希望它可以幫助你！

來源

2012-07-17 00:20:13 NewInTheBusiness

你可以也應該直接在查詢中選擇這兩個字段，但這只是我之前測試過的一些代碼... – NewInTheBusiness 2012-07-17 00:21:35

謝謝！請參閱我上面的評論。 – 2012-07-17 03:09:41

我不知道，如果這是你的意思，但在這裏就是你怎麼可以打出來的查詢字符串參數爲「數據」對象：

$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", { 
    q: "select * from google.igoogle.stock where stock='ibm'", 
    format: 'json', 
    diagnostics: true, 
    env: 'store://datatables.org/alltableswithkeys' 
}, top_stories);

例子：http://jsfiddle.net/dcXjk/1/

由於另外，如果您正在使用jQuery，您可以繼續使用.html代替直接指定給innerHTML：

function top_stories(o) { 
    var price = o.query.results.xml_api_reply.finance.last.data; 
    alert("last = " + price); 
    // Place price in div tag 
    $("#results").html(price); 
}

這裏有一個更充實的例子，你可以在股票代碼傳遞以及：

的JavaScript：

function top_stories(o, symbol) { 
    var price = o.query.results.xml_api_reply.finance.last.data; 

    // Place price in div tag 
    $("#" + symbol).html(price); 
} 

function getStockValue(symbol) { 
    $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", { 
     q: "select * from google.igoogle.stock where stock='" + symbol + "'", 
     format: 'json', 
     diagnostics: true, 
     env: 'store://datatables.org/alltableswithkeys' 
    }, function(data) { 
     top_stories(data, symbol); 
    }); 
} 


$(function() { 
    getStockValue("ibm"); 
    getStockValue("nflx"); 
    getStockValue("msft"); 
});

HTML：

<p>IBM:</p><div id="ibm"></div> 
<p>Netflix:</p><div id="nflx"></div> 
<p>Microsoft:</p><div id="msft"></div>

例：http://jsfiddle.net/B3L4p/1/

來源

2012-07-17 00:24:00

謝謝！請參閱我上面的評論。 – 2012-07-17 03:09:30

@EricSchneider：我忘了使用'$ .getJSON'的一個重要部分。請參閱我更新的代碼/示例。他們現在應該在IE中工作，對此抱歉！ – 2012-07-17 13:04:49

您的解決方案現在確實可以在IE中運行！非常感謝上面的幫助和非常好的例子。 – 2012-07-17 15:43:15

如何用JavaScript中的Ajax調用替換加載腳本文件（使用帶JavaScript的YQL）

回答

相關問題