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服务的更多相关文章
- 【AngularJs】---JSONP跨域访问数据传输
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
- 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
- angularJS(三):服务(Service)、http
一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...
- AngularJs之六(服务)
服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location 服务, $http 服务 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- 怎么理解angularjs中的服务?
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- AngularJS之使用服务封装
AngularJS之使用服务封装可复用代码 创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...
- AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
随机推荐
- 新的一年快开始了,学点新东西吧,从React开始(一)
ReactJS是Facebook出的前端View框架,好东西啊. 看看它的说明: 仅仅是UI 许多人使用React作为MVC架构的V层. 尽管React并没有假设过你的其余技术栈, 但它仍可以作为一个 ...
- ModernUI教程:独立显示器DPI感知
独立显示器DPI感知,是在Windows 8.1中新增的特性,这个特性针对拥有多个显示器同时各个显示器的DPI设定又不同的人.对这个新特性做了优化支持的软件能够在一个高DPI的显示器 ...
- PLSQL查询字段为科学计数法,修正显示
打开PLSQL工具--- toad中->view->option->data->display large number in scientific notationpl/sq ...
- POSIX字符集
[. .] 排序元素 [= =] 等价元素 类别 匹配字符 [:alnum:] 数字字符 [:alpha:] 字母字符 [:blank:] 空格与制表符 [:cntrl:] 控制字符 [:di ...
- angularJs模块ui-router之路由控制
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .st ...
- UIDynamic(捕捉行为)
一.简介 可以让物体迅速冲到某个位置(捕捉位置),捕捉到位置之后会带有一定的震动 UISnapBehavior的初始化 - (instancetype)initWithItem:(id <UID ...
- 教你一招:Excel中使用vlookup函数查询序列所对应的值
以一个简单的例子做示范,列数相对较少,看起来也比较清楚:在奥运会或其他比赛上我们可以看到各个国家的奖牌数的变化:那么我们如何查询国家对应的总奖牌数. 我们用到的函数是vlookup,它是一个纵向查询函 ...
- Alpha事后诸葛亮
Aruba小组Cento项目Postmortem 队员: 408 409 410 428 429 431 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰 ...
- PathGradientBrush类进行渐变颜色的填充
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; GraphicsPath gp ...
- mysql 查询当天的数据库
时间存储格式是时间戳 SELECT * FROM 表名 WHERE 时间字段 BETWEEN UNIX_TIMESTAMP( CURDATE( ) ) AND UNIX_TIMESTAMP( N ...