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

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

复制代码 代码如下:

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

 
看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想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原理我相信大家也很清楚。

时间: 2024-09-22 14:41:37

JSONP 跨域访问代理API-yahooapis实现代码_jquery的相关文章

跨域访问代理API-yahooapis

你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代 码,但是讨厌的浏览器的三原策略,阻止了我们的ajax调用. 比如我想访问一个天气的restfull api,如果我直接去GET : $.get("http://m.weather.com.cn/data/101010100.html"); 看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但 是服务端没实

AJax与Jsonp跨域访问问题小结_AJAX相关

####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F

request参数-jsonp跨域访问Struts2后台,获取到的数据没有用callback参数包裹是怎么回事啊?

问题描述 jsonp跨域访问Struts2后台,获取到的数据没有用callback参数包裹是怎么回事啊? 前端代码: $.ajax({ url:'http://localhost:8080/OA/json/json.action?orgid=aaa&code=00002', dataType:'jsonp', type:"GET", dataFilter:function(json,me){ alert("dataFiter:"+json); }, cont

如何在ASP.NET MVC 3 中利用Jsonp跨域访问

在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就是OAuth.新浪微博这个开放系统做的就很好.但OAuth并非本文讨论范畴.这里主要讨论jQuery1.5 jsonp 在Asp.net MVC3 中的应用. 本文应用场景: 假设您的开发团队欲为某集团公司开发一整套信息管理系统,目前首要开发的就是一套订单系统和一套内部OA系统.前提是这两套系统使用

浅谈JQuery+ajax+jsonp 跨域访问_jquery

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q

AJax与Jsonp跨域访问问题小结

####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F

jQuery 跨域访问解决原理案例详解_jquery

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

jquery下利用jsonp跨域访问实现方法_jquery

复制代码 代码如下: $.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: fu

jsonp跨域访问实现方法

这种方式其实是上例$.ajax({..}) 的一种高级封装. 在服务端通过获得callback参数(如:网页特效onp*****)得到jquery端随后要回调的 然后返回类似:"网页特效onp*****("+要返回的json数组+")"; jquery就会通过回调方法动态加载调用这个:jsonp*****(json数组); 这样就达到了跨域数据交换的目的. jsonp是一种脚本注入(script injection)行为,所以也有一定的安全隐患 $.ajax({ a