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