简单地实现jsonp

作者:杨润炜
日期:2016/4/28 12:03

今天看到一道面试题,要求说出jsonp的实现原理。jsonp算是用过,但还真没想过它的原理。这回得来看看它的庐山真面目了。

原理简述

jsonp不是一种数据交互的协议,也不是像ajax请求,虽然jq把它封装到ajax方法中。一些html标签有跨域加载资源的特性,通过它们来加载数据,这样的标签有script,iframe,img,link,然而加载回来的数据还需要被客户端所使用,这就需要客户端能够识别并读取到。综合起来,script标签最合适,因为它是加载数据并运行。所以即能够达到数据被客户端读取的效果。下面我就理解到的,写一下具体的代码实现,包括客户端与服务端。

客户端实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6. // 获取数据后的回调函数
  7. var callback = function(data){
  8. console.log(data);
  9. };
  10. // 提供数据的url
  11. var url = "http://127.0.0.1:3103/getData?callback=callback";
  12. // 创建script标签,设置其属性
  13. var script = document.createElement('script');
  14. script.setAttribute('src', url);
  15. // 把script放到head里,这样页面加载时便立即执行
  16. document.getElementsByTagName('head')[0].appendChild(script);
  17. </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

客户端的代码逻辑是,定义一个回调函数,并且希望服务端能够把返回的数据作为参数放到这个回调函数里,当请求完成后,加载过来的数据会被执行,并且是我们定义好的回调函数的方式运行的。

服务端实现

以express为例

  1. app.get('/getData', function (req, res) {
  2. var json = {a: 123};
  3. res.send(req.query.callback+'('+JSON.stringify(json)+')');
  4. });

最终运行效果如图:
jsonp效果图

jonp-log

参考

简单描述JSON跟JSONP的区别以及实战

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/53.html
邮箱:glowrypauky@gmail.com
QQ: 892413924