发表于: 2016-05-06 10:33:17
1 2087
1 今天完成的事情
学习了jsonp跨域
2 明天计划的事情
继续根据后台接口调试
3 遇到的问题
jsonp跨域方法:
- 前端创建script标记,设置src,添加到head中(你可以往body中添加)
- 后台返回一个js变量jsonp,这个jsonp就是请求后的JSON数据
- 回调完成后删除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> </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( 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对象,至于有多复杂则无需关注。
燃尽图地址:http://xp.ptteng.com/index.php?m=project&f=burn&project=30
评论