AJAX 跨域实现

  • 想查看其它方法的 ajax 实现，可以看我上一篇文章
  • 本例跨域是利用src属性来实现，为src属性添加链接后，无论是否跨域，浏览器都会去加载，由此来实现跨域

    具体实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //ajax.js 文件
    function Ajax (){
        //jsonp方法,利用callback=作为句柄,全局注册一个回调函数
        //如果不希望全局污染，可以在window对象下建立一个命名空间
        return{
            jsonp:function(url,callback){
                window[url.split('callback=').pop()]=  callback;
                var script = document.createElement('script');
                document.getElementsByTagName('body')[0].appendChild(script);
                script.setAttribute('src',url);
                script.onload = function(){
                    console.log('跨域成功')
                }
            }
        }
    }

//index.html文件,引入后实例

1
2
3
4
5
6
<script type="text/javascript">
var M = new Ajax()
    M.jsonp('./servers/json.php?callback=jsoncallback',function(data){
        console.log(data)
    })
</script>

//相应的服务端程序，本例只放出php
//servers文件夹下json.php文件

1
2
3
4
<?php 
    $callback = $_GET['callback'];
    echo $callback.'({jsonp:"jsonp"})';
?>