AngularJS的JSONP服务

有些页面的response中，包含了 Access-Control-Allow-Origin 这个header，说明可以进行跨域请求,如果没有包含这个header的页面可以利用JSONP进行跨域

script标签中的src属性可以也实现跨域,,下面我们来简单封装利用script标签实现跨域的函数。

步骤：

创建script标签
script标签的src属性等于url

　　　　a) url中有回调函数和参数

　　　　b) 回调函数需要写入window中

i. 调用的函数名不能为同一个,否则会被覆盖

ii. 所以利用随机数(转换为字符串,然后去掉前两位0和小数点)让函数名不同

　　　　c) 参数以对象形式传入,需要遍历,与url进行连接

　　3. 将标签插入body中

　　4. 移除script

代码：

function getJsonp(url,params,callback){

        //创建script标签

        var script=document.createElement("script");
　　　　　//生成随机的回调函数名

        var name="JSONP"+Math.random().toString().substring(2);

        window[name]=function(data){

            callback(data);

        }

        var strUrl=url+"?callback="+name;

        for(key in params){

            strUrl+="&"+key+"="+params[key]

        }

        script.src=strUrl;

        document.body.appendChild(script);

        document.body.removeChild(script);

    }

了解原理即可，现在有很多插件可以解决这个问题

秒客网

AngularJS的JSONP服务

相关文章