有些页面的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);
}

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

AngularJS的JSONP服务的更多相关文章

  1. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  2. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  3. 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  4. angularJS(三):服务(Service)、http

    一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...

  5. AngularJs之六(服务)

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  6. 让AngularJS的$http 服务像jQuery.ajax()一样工作

    让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...

  7. 怎么理解angularjs中的服务?

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  8. AngularJS之使用服务封装

    AngularJS之使用服务封装可复用代码   创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...

  9. AngularJS 的异步服务测试与Mocking

    测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...

随机推荐

  1. VMware安装Centos7,已将该虚拟机配置为使用64为,却无法执行64位操作

    在新建虚拟机之后,相信很多人都遇到了这个问题,这个问题的本质就是电脑是否支持虚拟化,虽然不是很清楚这是什么 解决方案就是,重启电脑(这边的电脑不是虚拟机而是主机),进入BIOS界面(不同电脑进入BIO ...

  2. js中遍历删除数组中的项(项目中遇到的问题解决)

    代码如下: for (var key=0;key<$scope.pageContent.messages.length;key++){ if($scope.pageContent.message ...

  3. 日常资料(TNB)

    http://www.med66.com/html/2005/5/hu47563183418550025733.html http://www.guokr.com/article/192045/ ht ...

  4. 【Beta】七天屠蛟记

    团队名字: 一不小心就火了 屠龙天团少年们: 031402504 陈逸超 (组长) 031402505 陈少铭 031402511 黄家俊 031402515 翁祖航 031402516 黄瑞钰 03 ...

  5. wcf第4步之原生调用简单封装

    public interface IDemoServiceChannel : IDemoService, System.ServiceModel.IClientChannel { } public p ...

  6. Node.js入门笔记(5):案例两则

    案例分析:前端自动化 1. 实现一个自动创建前端项目文件的js 通过node.js自动创建前端项目目录,包括js目录,js目录css目录,index.html和对应的内容. 初步的代码如下: var ...

  7. java源码分析:Arrays.sort

    仔细分析java的Arrays.sort(version 1.71, 04/21/06)后发现,java对primitive(int,float等原型数据)数组采用快速排序,对Object对象数组采用 ...

  8. Nginx下wordpress伪静态规则(rewrite)

    当我们从apache服务器转向Nginx服务器的时候,它们的伪静态规则就不一样了,所以你熟悉Nginx服务器的伪静态规则,自己写当然也好.但很多网友还是不太了解Nginx服务器的伪静态规则的,而如果你 ...

  9. MySQL Cluster 数据分布(分区、分组)

    数据分布 1.MySQL Cluster自动分区数据表(也可能使用用户自定义分区),将数据分布到分区中: 2.一个数据表被划分到多个Data Node分区中,数据在分区中被”striped”: 3.主 ...

  10. Alpha版本冲刺总结——曙光初现

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 项目预期计划 界面设计 androi ...