JS跨域调用之JSONP--动态Script标签方式实现跨域

最新推荐文章于 2022-09-18 11:59:10 发布

a657282694

最新推荐文章于 2022-09-18 11:59:10 发布

阅读量840

点赞数

分类专栏： js 文章标签： js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

更新的比较慢，做一个简单的JSONP的例子，网上的例子大都是拷过来拷过去的，格式比较乱。如果有任何问题请拍砖。

前面一个帖子 http://wwwcomy.iteye.com/blog/1806724 写了如何在同一个基础域名下实现JS跨域访问，实际上这个“跨域”是为了在同一基础域名下iframe子页面与父页面之间的函数调用。

而动态Script标签的方式往往是用来访问不在同一个域的服务器内部的数据的。例如,
当前我的域名：
d1.wwwcomy.com
我需要访问的数据：
百度翻译"chair"的结果

由于百度翻译和我的域名不在一个域名下，所以这个数据通过常规方式是没办法获取的，是被浏览器的安全机制所禁止的，解决方法如下：

首先要知道这个基础知识：

引用

Web页面上凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

所以，最简单的方法为：我们可以在自己的域名下用iframe引用百度中chair翻译的页面（=。=）。
这个好像比较雷。。那么如何灵活的自己控制呢？

这就要用到动态script标签方式了， JSONP ,JSON with Padding，是一个非官方的解决跨域访问的"协议"，采用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=%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3%E9%A6%96%E9%A1%B5/%E7%99%BE%E5%BA%A6%E7%BF%BB%E8%AF%91/%E7%BF%BB%E8%AF%91API

两个例子：
1.最简单的入门调用

我们先使用百度翻译作为服务端，写一个客户端调用的HTML例子testCallBack.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>
<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("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.appendChild(script);
	}
</script>
</head>

<body>
	<input type="text" value="pen" id="word"/>
	<input type="button" value="click me!" οnclick="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算是"协议"么，不知道自己的表达是否准确。。。）。

===========================================================================

注：srcipt的src中可以是javaweb的.do，不管这个.do是否为异步调用，调用之后不会跳转页面

ifram的src中会跳转页面。

a657282694

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS跨域调用之JSONP--动态Script标签方式实现跨域

更新的比较慢，做一个简单的JSONP的例子，网上的例子大都是拷过来拷过去的，格式比较乱。如果有任何问题请拍砖。前面一个帖子http://wwwcomy.iteye.com/blog/1806724写了如何在同一个基础域名下实现JS跨域访问，实际上这个“跨域”是为了在同一基础域名下iframe子页面与父页面之间的函数调用。而动态Script标签的方式往往是用来访问不在同一个域的服
复制链接

扫一扫