JSONP跨域访问在线代理API

转载 2015年11月19日 11:26:26

JSONP跨域访问在线代理API

ajax请求不同域名的页面时,由于浏览器安全限制是不允许请求的,发生错误。此时需要搭建服务器做代理捉取跨域页面,ajax请求自己建立的代理页面。如果你不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用。

比如我想访问一个天气的restfull api,如果我直接去GET

-收缩JavaScript代码
$.get("http://www.coding123.net/json.asp");

JSONP跨域访问在线代理API

    看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但是服务端没实现契约。

在这里我是时候引入主角yahoo提供的jsonp代理:http://query.yahooapis.com/v1/public/yql

由于m.weather.com.cn数据地址已经更改,所以改为本站数据地址。你可以讲示例放在你网站下运行,绝对不会报错

html:
-收缩HTML代码  运行代码  [如果运行无效果,请自行将源代码保存为html文件运行]
<script type="text/javascript" src="http://www.coding123.net/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from json where url=\"http://www.coding123.net/json.asp\"",
            format: "json"
        },
        success: function (d) {
           alert(JSON.stringify(d))//远程json数据放在query.results下
        }
    });</script>

  如果跨域数据源不是json格式的,而是html代码,可以用下面的代码获取到跨域页面的html代码,结果如下

JSONP跨域访问在线代理API

-收缩HTML代码  运行代码  [如果运行无效果,请自行将源代码保存为html文件运行]
<script type="text/javascript" src="http://www.coding123.net/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from html where url=\"http://www.coding123.net/eg/base64.aspx\"",
            format: "xml"
        },
        success: function (d) {
           alert(JSON.stringify(d))//跨域html代码放在results下,注意和json的区别
        }
    });</script>

      jsonp原理可以参考这篇文章:jQuery jsonp跨域原理

http://query.yahooapis.com/v1/public/yql JSONP跨域接口API使用说明


        作者:破  狼 出处:http://www.cnblogs.com/whitewolf/

相关文章推荐

ajax完美解决跨域问题(jsonp、nginx反向代理)

做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法 第一种:使用jsonp,jquery的ajax方法支持jsonp,但是最大的缺点就是只支持get方式,而且服务端也要...
  • nuli888
  • nuli888
  • 2016年07月07日 14:53
  • 12758

跨域的三种方法总结:代理,JSONP,以及XHR2

Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。 什么是跨域呢? 简单地理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com或...

Arcgis api for JavaScript 跨域配置(在线编辑问题)

Arcgis api for JavaScript 跨域配置,在线编辑

JS通过JSONP跨域请求API接口

一般JS跨域请求,会经常用到dataType:"JSONP"的格式请求,这里做了一个接口服务器和请求服务器的例子: 接口服务器地址:http://www.api.com/login.php 接口服...

跨域访问解决方法-jsonp

  • 2016年01月07日 15:02
  • 4KB
  • 下载

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】

项目中常常用到搜索,特别是导航类的网站。自己做关键字搜索不太现实,直接调用百度的是最好的选择。使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript...

ajax完美解决跨域问题(jsonp、nginx反向代理)

ajax完美解决跨域问题(jsonp、nginx反向代理) 做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法 第一种:使用jsonp,jQuery的a...

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

科技优家 2017-01-27 01:40 由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。 通俗一点说就是如果存在协议、域名...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSONP跨域访问在线代理API
举报原因:
原因补充:

(最多只允许输入30个字)