同源限制: 浏览器不允许一个域的脚本请求另一个域的文档，通俗来说，不允许访问不同协议、不同域名或不同端口的文档

跨域处理方法:

1.jsonp

前提: 浏览器虽然对ajax请求做出了限制，但script的链接没有限制，例如: <script src= 'xxx'>,我们可以轻松地链接到另一个域的文件

原理:

首先在客户端创建一个回调函数，将回调函数的名称(例如callback)传给服务端;

服务端生成json数据data后，创建js文件，将callback(data)(data成了callback的参数)写入js文件；

客户端创建script文件，链接地址为此前生成的js文件地址；

解析script文件，返回的callback(data)即调用callback函数(前面已创建)，由此，我们获取了data，如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script> //创建callback函数

        function callBack(data){

            console.log(data)

        }

    </script>

    <script> //客户端返回的文件

        callBack({content: 'xx'})

    </script>

</html>

实际应用的例子如下:

<script type="text/javascript">

var url = "http://localhost:8080/html5/jsonp_data11.js";

// 创建script标签，设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);

// 把script标签加入head，此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

function callbackFun(data)

{

    console.log(data.age);

    console.log(data.name);

}

</script>

也可以使用jquery

$.ajax({

        type:"post",

        url:"http://localhost:8080/html5/JsonServlet",

        dataType:'jsonp',

        jsonp:'mycallback',

       jsonpCallback:'callbackFun',

       success:function(data) {

             console.log(2222);

             console.log(data.age);

       }

  });

值得注意的是使用jsonp是一个前后端配合的过程，后台根据前端的请求也得做成相应调整，特别是使用jquery时， 有时回调函数名是jsonp属性的值，有时候追加到

url后面。

优点: 很好地解决了同源策略的限制

缺点:

1.只能GET；

2.不会返回状态码；

3.安全性不佳，毕竟返回一段js，对安全由一定威胁。

jsonp跨域总结的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  7. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  8. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  9. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

  10. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

随机推荐

  1. redis python交互和实际例子

    import redis try: r=redis.StrictRedis(host='localhost',port=6379) except Exception,e: print e.messag ...

  2. KMP hihoCoder1015 KMP算法

    人太蠢,,看了一天的KMP.. 刚開始看训练指南的,,后来才惊奇的发现原来刘汝佳写的f数组并非Next数组! 总认为和之前看过的全然不一样.. . 后来又百度了一下KMP,研究了非常久,然后用自己的逻 ...

  3. ORACL EXP导出数据说明

    转载自:http://www.jb51.net/article/17358.htm Oracle 数据库导出(exp)导入(imp)说明   exp 将数据库内的各对象以二进制方式下载成dmp文件,方 ...

  4. 数值孔径NA、分辨率极限与衍射极限

    一.数值孔径  数值孔径(NA):是一个无量纲的数,用以衡量该系统能够收集的光的角度范围.越大,收集到的光越多,分辨率越高. 描述了透镜收光锥角的大小,决定着透镜收光能力和空间分辨率. 数值孔径(NA ...

  5. Android Studio中debug和release模式默认的参数配置

    The possible properties and their default values are: debuggable:表示是否可以在手机上调试程序. 在Eclipse中,只有android ...

  6. Python 基础函数

    函数: 在程序设计中,函数是指用于进行某种计算的一系列语句的有名称的组合. 定义一个函数时,需要指定函数的名称并写下一系列程序语句.定义时不会执行,运行代码时,先加载进内存中,之后使用名称来调用这个函 ...

  7. Kotlin——中级篇（五）：枚举类（Enum）、接口类（Interface）详解

    在上一章节中,详细的类(class)做了一个实例讲解,提到了类(class)的实例化.构造函数.声明.实现方式.和Java中类的区别等.但是对于Kotlin中的类的使用还远远不止那些.并且在上文中提到 ...

  8. 【BZOJ1280】Emmy卖猪pigs 最大流

    [BZOJ1280]Emmy卖猪pigs Description Emmy在一个养猪场工作.这个养猪场有M个锁着的猪圈,但Emmy并没有钥匙.顾客会到养猪场来买猪,一个接着一个.每一位顾客都会有一些猪 ...

  9. 《从零开始学Swift》学习笔记（Day 46）——下标重写

    原创文章,欢迎转载.转载请注明:关东升的博客 下标是一种特殊属性.子类属性重写是重写属性的getter和setter访问器,对下标的重写也是重写下标的getter和setter访问器. 下面看一个示例 ...

  10. nosql_action

    ps -aux  查当前端口占用 connecting to: test > show dbs local .078125GB testphp .203125GB > use testph ...