首先提出：什么是跨域？如何解决跨域？

跨域可以简单的理解为从一个域名访问另一个域名，由于javascript的同源政策的限制，出于安全的考虑，不允许浏览器这么做。比如a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。跨域分为跨域和跨子域。跨域：www.baidu.com和www.sina.com之间。跨子域：www.baidu.com和mp3.baidu.com之间。

跨域有不同的解决方案，JSONP为当前常见的解决方案。它实际上是动态创建一个script标签，将请求的URL设置为这个标签src，而非ajax下访问，所以也就不需要在服务器环境下打开网页。这种方式需要前端和后台代码都进行相应的修改和实现，不是特别理想。不过目前的流行框架，都封装了JSONP的实现，因此前端无需太大的改动，反而是后台需要多一步实现。

iframe也是比较常见的解决方法之一。通过动态创建iframe标签并访问url，但却没有jsonp好用。

那么，什么是JSONP呢？JSONP又是怎么使用的呢？

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

其实有点类似CDN的使用。比如调用JQ的时候可以引用jq的CDN：<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>，就能在页面中获取JQ的源码。jsonp也是创建script标签，通过src属性里面的相关网页的API获取数据。src里一般会有一个回调函数，可以通过自定义回调函数对获取到的数据进行操作。

举个简单例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script>

        function aaa(str){

            console.log(str);

        }

    </script>

    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=html5&cb=aaa"></script>

</body>

</html>

分析上面代码：wd=html5表示在百度搜索框输入html5，然后回调函数cb为上面自定义的aaa，aaa就是将返回来的数据打印出来。结果如图：

这样就实现了一个最简单的跨域请求。

JQuery下实现JSONP的跨域。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="submit" id="txt">

        <script src="../jquery-2.1.3.min.js"></script>

    <script>

          $("#txt").click(function () {

            $.ajax({

                url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=html5',

                dataType: "jsonp",

                jsonp: "cb",

                success: function (data) {

                    console.log(data)

                }

            })

        })

    </script>

</body>

</html>

JSONP实现跨域的更多相关文章

  1. 使用XHR2或Jsonp实现跨域以及实现原理

    我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...

  2. 跨域解决方案二：使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  3. 转（JSONP处理跨域事件）

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  4. jsonp实现跨域访问

    要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...

  5. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

  7. AJAX跨域问题解决方法（2）——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  8. 跨域 - 自定义 jsonp实现跨域

    问题:在现代浏览器中默认是不允许跨域. 办法:通过jsonp实现跨域   在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是 ...

  9. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

随机推荐

  1. Form认证的几点说明

    有的页面需要用户认证之后才可以进入,通常都是在Filter的OnActionExecuting方法中我们需要获取当前用户.有两种情况不必登录:1.用户是登录的,也就是认证过的.2.用户上次登录了,但没 ...

  2. 客户端GUI程序开发漫谈

    这篇文章包含了这个领域的很多开源项目的介绍,还有我多年来的心血和汗水  去年夏天的时候,我用QT做了一个小工具 后来还用QT做了流程设计器 我把程序分享给飞扬青云之后,他甚至搞出来一套QT的皮肤来 说 ...

  3. 如何在遍历中使用 iterator/reverse_iterator 删除元素

    如何在遍历中使用 iterator/reverse_iterator 删除元素 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公 ...

  4. Java处理Radius access-challenge

    最近使用 RSA Authentication Manager, 并且与其自带的Radius server整合, RSA的Radius server 配置不太透明, 目前只配成功了PAP方式的验证,C ...

  5. 使用OData技术遇到的问题及解决办法

    “System.NotSupportedException”类型的未经处理的异常在 Microsoft.Data.Services.Client.dll 中发生 其他信息: 对此 POST 请求的响应 ...

  6. Nginx+Keepalived(带Nginx监控脚本)

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0220/151.html?1456381460 Keepalived+ nginx的安装部署 主机: ...

  7. Unity3D大风暴之入门篇（海量教学视频版）

    智画互动开发团队 编   ISBN 978-7-121-22242-9 2014年2月出版 定价:79.00元 328页 16开 编辑推荐 长达800分钟的高清教学视频,手把手教会初学者 数个开发案例 ...

  8. iOS-Objective-C内存管理

    内存管理: 栈区 [stack]:由编译器自动分配并释放,一般存放函数的参数值,局部变量等 堆区 [heap]:由程序员分配和释放,如果程序员不释放,程序结束时,可能会由操作系统回收 全局区(静态区) ...

  9. 每天一个linux命令（17）：whereis 命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...

  10. JS生成1000个数字加字母的不重复的随机字符串

    周五,快下班了,正收拾东西准备走人,项目经理突然让我给他做个Excel,1000个数字加字母组合的密码,不重复,下班前给. 我直接懵了,Excel不会,估计是要写个什么命令才能生成出来,于是想着有没有 ...