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

代码:

  1. function getJsonp(url,params,callback){
  2. //创建script标签
  3. var script=document.createElement("script");
         //生成随机的回调函数名
  4. var name="JSONP"+Math.random().toString().substring(2);
  5. window[name]=function(data){
  6. callback(data);
  7. }
  8. var strUrl=url+"?callback="+name;
  9. for(key in params){
  10. strUrl+="&"+key+"="+params[key]
  11. }
  12. script.src=strUrl;
  13. document.body.appendChild(script);
  14. document.body.removeChild(script);
  15. }

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

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. 软件卸载工具 Uninstall Tool 3.5.1 中文破解版

    Uninstall Tool 是一个小巧.安全.快速.强大的软件卸载删除工具,它支持在使用软件本身的卸载程序卸载完毕后,再扫描软件残留的注册及其它残余文件,将其彻底在系统删除!安装监视器可以监视每个应 ...

  2. 使用自定义tld标签简化jsp的繁琐操作

    最近做一个树形结构的展示,请求目标页面后,后台只返回简单的List,虽然有想过在jsp页面内做一些操作简化,但是太繁琐了,其他的标签又不能满足需求,所以只能自己做一个.使用tld标签可以简化jsp代码 ...

  3. [Think In Java]基础拾遗3 - 容器、I/O、NIO、序列化

    目录 第十一章 持有对象第十七章 容器深入研究第十八章 Java I/O系统 第十一章 持有对象 1. java容器概览 java容器的两种主要类型(它们之间的主要区别在于容器中每个“槽”保存的元素个 ...

  4. Leetcode 254. Factor Combinations

    Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...

  5. Python基础7:文件操作

    [ 文件操作] 1 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下: 昨夜寒蛩不住鸣. 惊回千里梦,已三更. 起来独自绕阶行. 人悄悄,帘外月胧 ...

  6. 认识和使用NSOperation

    原文链接:http://www.jianshu.com/p/2de9c776f226 NSOperation是OC中多线程技术的一种,是对GCD的OC包装.它包含队列(NSOperationQueue ...

  7. pair correlation ggpair ggmatrix

    https://zhuanlan.zhihu.com/p/23400450 首发于 R语言数据分析与可视化 关注专栏 登录 写文章     R 语言矩阵散点图 EasyCharts· 15 天前 散点 ...

  8. Windows 基础知识2

    1.进程通信的几种方式 管道:匿名,命名 信号 报文 共享内存 信号量:主要作为进程和同一进程的线程同步的方式 套接字 2.线程通信的几种方式: 临界区,信号量.互斥量.事件. 信号量:它允许多个线程 ...

  9. Solr学习总结(七)Solr搜索引擎的整体架构

    经过前面一段时间的努力,终于把我所知道的关于solr 的内容都总结完了.前面讲到了solr 的安装配置,web管理后台的使用,solr 的查询参数和查询语法,还说到了solr的客户端 solrnet  ...

  10. yii2 codeception程序功能测试

    原文地址: http://www.360us.net/article/35.html http://blog.csdn.net/enoch612/article/details/48679069 ht ...