AngularJS的JSONP服务

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

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

步骤:

  1. 创建script标签
  2. 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); }

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

 

posted @ 2016-10-31 22:06  花开半夏shen  阅读(151)  评论(0编辑  收藏  举报