JSONP 跨域访问代理API-yahooapis实现代码


Posted in Javascript onDecember 02, 2012

你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用。
比如我想访问一个天气的restfull api,如果我直接去GET:

$.get("http://m.weather.com.cn/data/101010100.html");

JSONP 跨域访问代理API-yahooapis实现代码 
看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但是服务端没实现契约。
在这里我是时候引入主角yahoo提供的jsonp代理:http://query.yahooapis.com/v1/public/yql
实现跨域访问代码为: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 跨域访问代理API-yahooapis实现代码 
多的就不用说了,jsonp原理我相信大家也很清楚。
Javascript 相关文章推荐
js生成随机数的过程解析
Nov 24 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 #Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 #Javascript
You might like
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python利用7z批量解压rar的实现
2019/08/07 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python Cartopy的基础使用详解
2020/11/01 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
医药代表个人求职信范本
2013/12/19 职场文书
求职意向书
2014/04/01 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
金榜题名主持词
2015/07/02 职场文书