• JSONP

    JSONP

    我理解的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>