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/

最简单实现跨域的方法----使用nginx反向代理

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 现在随着RESTFUL的流行,很多应用提供http/https接口的AP...
  • shendl
  • shendl
  • 2015年09月14日 18:54
  • 23328

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

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

使用代理解决js跨域问题

最近在做客服系统,系统是第三方已开发好的,我们的功能以页面的形式嵌入进去,其中一个功能是打电话,我们页面上有个按钮,客服点击按钮,便调用第三方的js方法,便可以打电话了。但是,上面有一个问题,双方的服...
  • molaifeng
  • molaifeng
  • 2016年08月23日 18:12
  • 1689

jQuery 跨域访问问题解决方法

浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js ...
  • mochong
  • mochong
  • 2017年03月28日 14:09
  • 861

JSONP的使用(在zepto和kissy下使用)

一、JSONP是一种较为规范和通用的解决ajax跨域访问限制的方式 二、ajax跨域访问限制:基于安全的原因,浏览器采用同源策略,其阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档;所谓同源...
  • liulangdeyue
  • liulangdeyue
  • 2014年12月07日 16:25
  • 2922

JSONP操作01_本地访问数据和跨域访问数据

1.jsonp简介 json 是一种数据格式 jsonp 是一种数据调用的方式。 1)什么是jsonp 为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一...
  • weixin_36185028
  • weixin_36185028
  • 2017年01月03日 23:15
  • 706

arcgis js 跨域代理proxy设置(java)

为什么要使用代理proxy? 答:未配置代理时server发送请求是用get的方式,请求跨域访问或者URL长度超过浏览器限制时,这就需要一个代理文件proxy来转发请求。Arcgis Server 1...
  • wpz0713
  • wpz0713
  • 2015年12月10日 09:28
  • 6851

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

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

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

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。 通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端,或一者为IP地址,一者...
  • thx9537
  • thx9537
  • 2017年02月02日 16:03
  • 741

轻松搞定JSONP跨域请求

本文介绍了通过JSONP实现跨域请求,首先介绍了“同源策略”,然后介绍了同构JavaScript动态加载script标签的方法,实现JSONP跨域,最后介绍了jQuery中对JSONP的封装和使用...
  • u014607184
  • u014607184
  • 2016年07月26日 17:49
  • 24372
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSONP跨域访问在线代理API
举报原因:
原因补充:

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