JS跨域调用之JSONP--动态Script标…
来源:互联网 发布:windows下tensorflow 编辑:程序博客网 时间:2024/04/29 19:44
更新的比较慢,做一个简单的JSONP的例子,网上的例子大都是拷过来拷过去的,格式比较乱。如果有任何问题请拍砖。
前面一个帖子http://wwwcomy.iteye.com/blog/1806724写了如何在同一个基础域名下实现JS跨域访问,实际上这个“跨域”是为了在同一基础域名下iframe子页面与父页面之间的函数调用。
而动态Script标签的方式往往是用来访问不在同一个域的服务器内部的数据的。例如,
当前我的域名:
d1.wwwcomy.com
我需要访问的数据:
百度翻译"chair"的结果
由于百度翻译和我的域名不在一个域名下,所以这个数据通过常规方式是没办法获取的,是被浏览器的安全机制所禁止的,解决方法如下:
首先要知道这个基础知识:
所以,最简单的方法为:我们可以在自己的域名下用iframe引用百度中chair翻译的页面(=。=)。
这个好像比较雷。那么如何灵活的自己控制呢?
这就要用到动态script标签方式了,JSONP,JSON withPadding,是一个非官方的解决跨域访问的"协议",采用JSON作为传输数据的载体,具体的实现是通过script标签跨域引用来完成的。
实现JSONP的前提:
两个例子:
1.最简单的入门调用
我们先使用百度翻译作为服务端,写一个客户端调用的HTML例子testCallBack.html:
打开页面后发现访问成功,如果要动态翻译的话,可以动态的生成这个script标签。
2.简单的动态生成script例子testTag1.html
***注意:本例子只是用来演示,真正使用时候请注意script标签的清除,避免页面无限制增加script标签。其他注意事项暂时还没想到=。=
客户端代码基本是在这个基础上进行修改,下面来讨论一下服务端代码,其实服务端代码也很简单,甚至写个servlet组装字符串生成JSON格式的字符就可以,当然要与客户端协调好json的格式。
服务端Servlet生成如下的字符串返回来就行了:
另外要处理callback这个回调参数,上面百度API介绍里面本来没有callback参数的介绍,后来我随意打了一个竟然人家还实现了。
回顾一下实际上流程很简单:
已经写好了jquery实现的这个例子,后续文章准备写下这个例子,也解释一下jquery源码中是怎么支持JSONP这个"协议"的(文中JSONP算是"协议"么,不知道自己的表达是否准确。)。
前面一个帖子http://wwwcomy.iteye.com/blog/1806724写了如何在同一个基础域名下实现JS跨域访问,实际上这个“跨域”是为了在同一基础域名下iframe子页面与父页面之间的函数调用。
而动态Script标签的方式往往是用来访问不在同一个域的服务器内部的数据的。例如,
当前我的域名:
d1.wwwcomy.com
我需要访问的数据:
百度翻译"chair"的结果
由于百度翻译和我的域名不在一个域名下,所以这个数据通过常规方式是没办法获取的,是被浏览器的安全机制所禁止的,解决方法如下:
首先要知道这个基础知识:
引用
Web页面上凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>
所以,最简单的方法为:我们可以在自己的域名下用iframe引用百度中chair翻译的页面(=。=)。
这个好像比较雷。那么如何灵活的自己控制呢?
这就要用到动态script标签方式了,JSONP,JSON withPadding,是一个非官方的解决跨域访问的"协议",采用JSON作为传输数据的载体,具体的实现是通过script标签跨域引用来完成的。
实现JSONP的前提:
- 1.客户端(我的域名)页面代码可控。
- 2.服务端(提供服务和数据)的代码可控,或者使用别人写好的服务。实际上很多开放平台都已经提供了写好的服务,例如百度翻译API,调用方式(可以直接打开看到其中数据传输的内容和格式):
- http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2ALMz6WqUEcsBg4BS91Eppq3
&q=chair&from=auto&to=auto&callback=abc
具体可以参考百度API官方介绍:
http://developer.baidu.com/wiki/index.php?title=帮助文档首页/百度翻译/翻译API
两个例子:
1.最简单的入门调用
我们先使用百度翻译作为服务端,写一个客户端调用的HTML例子testCallBack.html:
Html代码
- <html
- <head>
- <title>Title</title>
- <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <script
type="text/javascript" language="javascript" -
src="jquery-1.7.2.js"></script> - <script
type="text/javascript"> -
function abc(re) { -
alert(re.trans_result[0].src + "翻译的结果为"" + re.trans_result[0].dst+"""); -
} - </script>
- <script
type="text/javascript" language="javascript" src="http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2ALMz6WqUEcsBg4BS91Eppq3 &q=chair&from=auto&to=auto&callback=abc" ></script> -
- </head>
- <body>
- </body>
- </html
打开页面后发现访问成功,如果要动态翻译的话,可以动态的生成这个script标签。
2.简单的动态生成script例子testTag1.html
Html代码
- <html
- <head>
- <title>Title</title>
- <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <script
type="text/javascript"> -
function abc(re) { -
alert(re.trans_result[0].src + "翻译的结果为"" + re.trans_result[0].dst+"""); -
} -
function onClick() -
{ -
var script = document.createElement_x("script"); -
script.type = "text/javascript"; -
var src = document.getElementById("word").value; -
script.src = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2ALMz6WqUEcsBg4BS91Eppq3&q=" +src+"&from=auto&to=auto&callback=abc"; -
document.body.a(script); -
} - </script>
- </head>
-
- <body>
-
<input type="text" value="pen" id="word"/> -
<input type="button" value="click me!" onclick="onClick()"/> - </body>
- </html
***注意:本例子只是用来演示,真正使用时候请注意script标签的清除,避免页面无限制增加script标签。其他注意事项暂时还没想到=。=
客户端代码基本是在这个基础上进行修改,下面来讨论一下服务端代码,其实服务端代码也很简单,甚至写个servlet组装字符串生成JSON格式的字符就可以,当然要与客户端协调好json的格式。
服务端Servlet生成如下的字符串返回来就行了:
Js代码
- abc({"from":"en","to":"zh","trans_result":[{"src":"chair","dst":"\u6905\u5b50"}]});
另外要处理callback这个回调参数,上面百度API介绍里面本来没有callback参数的介绍,后来我随意打了一个竟然人家还实现了。
回顾一下实际上流程很简单:
- 1.客户端根据条件生成一个url,包含请求数据(如"chair")和回调函数名(如"abc")
- 2.客户端写好回调函数function abc(re){}
- 3.服务端接收此请求,生成json数据,并根据回调函数名,动态生成类似abc(json("chair"))这样的数据返回给客户端。
- 4.客户端执行abc(json("chair"))
已经写好了jquery实现的这个例子,后续文章准备写下这个例子,也解释一下jquery源码中是怎么支持JSONP这个"协议"的(文中JSONP算是"协议"么,不知道自己的表达是否准确。)。
- JS跨域调用之JSONP--动态Script标…
- JS跨域调用之JSONP--动态Script标签方式实现跨域
- JS跨域调用之JSONP--动态Script标签方式实现跨域(转)
- JS跨域调用之JSONP--动态Script标签方式实现跨域
- JS跨域调用之JSONP--动态Script标签方式实现跨域
- 通过script标签实现JSONP跨域调用
- JS跨域调用和JSONP
- 动态script标签-跨域调用
- 关于script jsonp跨域请求数据
- jsonp跨域调用
- jsonp 跨域调用
- MVC+JQuery实现跨域Jsonp调用Js
- MVC+JQuery实现跨域Jsonp调用Js
- 解决js跨域访问问题JSONP,不支持同步调用
- Jsonp跨域请求服务端之动态替换页面数据
- ajax jsonp跨域调用
- JSONP跨域调用详解
- 前端跨域调用--JSONP
- UNIX进程组,会话期,作业控制(转…
- 进程组和会话
- hdu 2611(dfs判重)
- 维修手记——燃气热水器低水压点火困…
- 通过JSONP实现跨域
- JS跨域调用之JSONP--动态Script标…
- jsonp跨域访问
- fcntl文件锁
- JSON和JSONP,也许你会豁然开朗,…
- Java 程序员在写 SQL 程序时候常犯的 10 个错误
- 时辰与五行
- 网络播放
- win8 iis安装及网站发布(上)
- linux中的链表