Json   发布时间:2022-04-22  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Jsonp 方式跨域获取 json 数据原理大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

Jsonp 方式跨域获取 json 数据原理

转自:http://blog.163.com/diaochongzhe@126/blog/static/16328604200910139418714/?fromdm&fromSearch&isFromSearchEngine=yes

douban网的开放api后,查了些文档,了解了一下 jsonp 跨域请求方式.跟大家分享一下。

其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javas cript 文档的动态解析来实现。(其实也可以用ev al 函数

来个超简单的例子
首先是准备客户端的 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>Test Jsonp</title>
  5. <script type="text/javascript">
  6. function jsonpCallBACk(result)
  7. {
  8. alert(result.msg);
  9. }
  10. </script>
  11. <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallBACk"></script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>&nbsp;
复制代码
其中 jsonCallBACk 是客户端注册的, 获取 跨域 服务器 上的json 数据 后,回调的函数
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallBACk
这个 url 是跨域 服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为
  1. jsonpCallBACk({msg:'this is json data'})
复制代码
Jsonp原理:
首先在客户端注册一个callBACk,然后把callBACk的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javas cript 语法的方式,生成一个function,function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签并执行返回的 javas cript 文档,此时数据作为参数,传入到了客户端预先定义好的 callBACk 函数里.(动态执行回调函数

大佬总结

以上是大佬教程为你收集整理的Jsonp 方式跨域获取 json 数据原理全部内容,希望文章能够帮你解决Jsonp 方式跨域获取 json 数据原理所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。