跨域方法 - JSONP

优质
小牛编辑
136浏览
2023-12-01

我理解的JSONP的方式就是,通过JS代码,动态创建一个Script标签,通过标签的src的网址里面包含一个JSONP属性,后端接收到后返回一个url中jsonp=参数,这样一个参数(包含一个json),通过执行这个参数命名的函数来实现跨域。

以下是JS中的代码

  1. var util = {};
  2. /*[function 在页面注入脚本]*/
  3. util.createScript = function(url,charset){
  4. var script = document.createElement('script');
  5. script.setAttribute('type','text/javascript');
  6. charset && script.setAttribute('charset',charset);
  7. script.async = true;
  8. return script;
  9. }
  10. /*[function jsonp]*/
  11. util.jsonp =function(url,onsuccess,onerror,charset){
  12. var callbackName = util.getName('tt_player');
  13. window[callbackName] = function () {
  14. if(onsuccess && util.isFunction(onsuccess)){
  15. onsuccess(arguments[0]);
  16. }
  17. };
  18. var script = util.createScript(url + '&callback=' + callbackName,charset);
  19. script.onload = script.onreadystatechange = function () {
  20. if(!script.readyState || /loaded|complete/.test(script.readyState)){
  21. script.onload = script.onreadystatechange = null;
  22. //移除该script 的DOM 对象
  23. if(script.parentNode){
  24. script.parentNode.removeChild(script);
  25. }
  26. //删除函数或变量
  27. window[callbackName] = null;
  28. }
  29. };
  30. script.onerror = function(){
  31. if(onerror && util.isFunction(onerror)){
  32. onerror();
  33. }
  34. };
  35. document.getElementsByTagName('head')[0].appendChild(script);
  36. }

通过它可以创建如下

  1. <script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
  2. <script>
  3. jsonp({
  4. data:{
  5. <!-- 全局函数接受回掉信息 -->
  6. }
  7. })
  8. </script>