首页 > Web开发 > 详细

jsonp实现跨域访问

时间:2016-05-03 17:34:19      阅读:222      评论:0      收藏:0      [点我收藏+]

JSONP的实现思路很简单

  1. 前端创建script标记,设置src,添加到head中(你可以往body中添加)
  2. 后台返回一个js变量jsonp,这个jsonp就是请求后的JSON数据
  3. 回调完成后删除script标记(还有一些清理工作如避免部分浏览器内存泄露等)

 

接口

1
2
3
4
5
Sjax.load(
    url, // 跨越请求的URL
    success,  // 回调函数,必须定义一个形参,用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构)
    timestamp, // 传true会加一个时间戳,防止缓存,默认不加
);

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>sjax_0.1.js by snandy</title>
    <script src="http://files.cnblogs.com/snandy/sjax_0.1.js"></script>
</head>
<body>
<p id="p1" style="background:gold;"></p>
<input type="button" value="Get Name" onclick="clk()"/>
<script type="text/javascript">
    function clk(){
        Sjax.load(
            http://files.cnblogs.com/snandy/jsonp.js,
            function(){
                document.getElementById(‘p1‘).innerHTML = ‘Hi, ‘ + jsonp.name;
            }
        );     
    }
</script>
</body>
</html>

  

这个html实现一个最简单的前后台交互功能,点击按钮“Get Name”,获取到name后显示在段落P上。

clk函数中调用Sjax.load方法,Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名,这里就使用了Sjax。

请求的后台url是jsonp.js,它返回如下

1
jsonp = {name:‘jack‘};

因为是测试,这里使用最简单的方式实现。请求的后台其实不必是js文件,可以是php,java等任何后台语言,它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp,这个变量就是一个js对象,至于有多复杂则无需关注。

jsonp实现跨域访问

原文:http://www.cnblogs.com/Arther-J/p/5455655.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!