JSONP 跨域訪問代理API-yahooapis實現(xiàn)代碼
更新時間：2012年12月02日 15:33:58 作者：
介紹一個JSONP 跨域訪問代理API-yahooapis,需要的朋友可以參考下
你是否遇到了想利用AJAX訪問一些公網(wǎng)API，但是你又不想建立自己的代理服務，因為有時我根本就沒打算涉及服務端任何代碼，但是討厭的瀏覽器的同源策略，阻止了我們的ajax調(diào)用。
比如我想訪問一個天氣的restfull api，如果我直接去GET：
$.get("http://m.weather.com.cn/data/101010100.html");
看見這問題相信大家都不會陌生，也會很自然的得到解決方案，但是我這里真的不想touch任何服務端代碼，用jsonp吧，但是服務端沒實現(xiàn)契約。
在這里我是時候引入主角yahoo提供的jsonp代理：http://query.yahooapis.com/v1/public/yql
實現(xiàn)跨域訪問代碼為：http://jsfiddle.net/whitewolf/4UDpf/9/
html：
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<div id="content">
</div>
js:
$(function(){
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\"http://m.weather.com.cn/data/101010100.html\"",
format: "json"
}, function(data) {
var $content = $("#content")
if (data.query.results) {
$content.text(JSON.stringify(data.query.results));
} else {
$content.text('no such code: ' + code);
}
});
});
效果：
多的就不用說了，jsonp原理我相信大家也很清楚。
比如我想訪問一個天氣的restfull api，如果我直接去GET：
復制代碼 代碼如下:
$.get("http://m.weather.com.cn/data/101010100.html");
看見這問題相信大家都不會陌生，也會很自然的得到解決方案，但是我這里真的不想touch任何服務端代碼，用jsonp吧，但是服務端沒實現(xiàn)契約。
在這里我是時候引入主角yahoo提供的jsonp代理：http://query.yahooapis.com/v1/public/yql
實現(xiàn)跨域訪問代碼為：http://jsfiddle.net/whitewolf/4UDpf/9/
html：
復制代碼 代碼如下:
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<div id="content">
</div>
復制代碼 代碼如下:
js:
$(function(){
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\"http://m.weather.com.cn/data/101010100.html\"",
format: "json"
}, function(data) {
var $content = $("#content")
if (data.query.results) {
$content.text(JSON.stringify(data.query.results));
} else {
$content.text('no such code: ' + code);
}
});
});
效果：
多的就不用說了，jsonp原理我相信大家也很清楚。
相關文章
jQuery的選擇器非常強大,使你可以輕松選取頁面中任何一個對象,下面我們就主要針對DOM操作來看一下jQuery中選擇器的基礎使用教程,需要的朋友可以參考下2016-05-05
SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的
json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單，采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的，對spring mvc ajax json相關知識感興趣的朋友一起學習吧2015-12-12
騰訊UED 漂亮的提示信息效果代碼，需要的朋友可以參考下。2011-09-09
這篇文章主要介紹了jquery動態(tài)更換網(wǎng)頁背景圖的方法,需要的朋友可以參考下2014-03-03
最近有一個活動，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進行交互。但是由于兩個網(wǎng)站處于不同的域名下，而Ajax的應用中，由于安全的問題，瀏覽器默認是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
這篇文章主要介紹了jQuery判斷對象是否存在的方法,對比分析了純javascript與jQuery實現(xiàn)判斷對象是否存在的功能區(qū)別,是非常實用的技巧,需要的朋友可以參考下2015-02-02
jQuery Validation插件remote驗證方式的Bug解決
jQuery插件很多，其中一個重要的插件便是jQuery Validation，它的作用是對表單進行驗證，還上了jQuery官網(wǎng)。2010-07-07
這篇文章主要介是對Jquery中的ajax再封裝,簡化操作示例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
修改好的jquery滾動字幕效果，需要的朋友可以參考下。2011-06-06
Jcrop是基于JQuery的圖片裁剪插件，這里簡單介紹下基本參數(shù)，需要的朋友可以參考下2013-07-07