<html>
<head>
<title>index.html</title>
<script type="text/javascript">
function aehyok(data)
{
alert(data.result);
}
</script>
<script type="text/javascript" src="https://localhost:8888/remote.js" ></script>
</head>
<body></body>
</html>
先将本地文件中添加一个js函数,然后调用远程服务器的js文件。
复制代码 代码如下:
aehyok({"result":"我是远程js带来的数据"});
这是在远程服务端js文件中的代码。
运行后效果
调用成功。显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。
复制代码 代码如下:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "get",
async: false,
url: "../Home/aehyok",
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "aehyok", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function (json) {
alert("第二次"+json.result);
},
error: function () {
alert('fail');
}
});
});
function aehyok(data) {
alert("第一次"+data.result);
}
</script>
我是在asp.net mvc3.0项目中,所以后台在控制器中
复制代码 代码如下:
public string aehyok()
{
return "aehyok({\"result\":\"我是远程js带来的数据\"})";
}
然后执行结果为
通过调试可以发现URL:6247/Home/aehyok?callback=aehyok&_=1369235398641
callback=aehyok就是回调函数,在调用完后台返回是先执行aehyok(data)。
然后又执行success(json)。所以有两次的弹窗。
我现在只不过是在一个项目下进行,其实道理还是一样的。
您可能感兴趣的文章: