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

跨域处理方法:

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. 第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  2. [PHP开发必备] -- 小巧强悍的MYSQL-Front中文版使用教程，附最新版下载地址

    PHP开发已经各位工程师轻车熟路的事情,MySQL也是经常都要用的产品,能有一个简单而又强大的管理工具,那可是咱们PHP开发工程师的福气. 下面浪风小园子就为大家介绍下来自国外小巧的MySQL管理工具 ...

  3. vue高级路由

    1.html <script src="https://unpkg.com/vue/dist/vue.js"></script><script src ...

  4. 1076: [SCOI2008]奖励关

    1076: [SCOI2008]奖励关 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2078  Solved: 1118[Submit][Statu ...

  5. PSSH 批量管理服务器

    pssh命令是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,类似pdsh,个人认为相对pdsh更为简便,使用必须在各个服务器上配置好密钥认证访问. 1. ...

  6. JS 插件 fastclick.js 解决手机端click点击延迟

    FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...

  7. 任务06——封装与单元测试(Markdown版)

    模块代码地址 Core 模块代码地址 单元测试代码地址 两个地址是一样的,为了方便,所以把测试的代码很模块代码放在一起git了. 封装阶段 public class Core { public sta ...

  8. 自定义admin

    平时我们用的django自带admin,怎么评价呢?一个字简陋,而且也人性化,如下图,首先只显示数据对象,如果要查看详细还有点进去,其次不能对自己想要的数据进行刷选 我们的期望是:数据如excel显示 ...

  9. Python3.6全栈开发实例[019]

    19.干掉主播.现有如下主播收益信息, 按照要求, 完成相应操作:(1)计算主播平均收益值 sum = 0 for i in zhubo.values(): sum +=i print(round(s ...

  10. Python基础-序列化(json/pickle)

    我们把对象(变量)从内存中变成可存储的过程称之为序列化,比如XML,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flattening等 ...