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

跨域可以简单的理解为从一个域名访问另一个域名，由于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. dojo的发展历史

    dojo的开始要从2004年初开始说起,那时dojo之父 Alex Russell 在Informatica公司内从事一个名为netWindows的项目,这个项目的目的是在浏览器环境下提供创建窗口化界 ...

  2. dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner

    dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...

  3. Kali Linux渗透测试实战 1.2 环境安装及初始化

    1.2 环境安装及初始化 目录(?)[-] 环境安装及初始化 下载映像 安装虚拟机 安装Kali Linux 安装中文输入法 安装VirtualBox增强工具 配置共享目录和剪贴板 运行 Metasp ...

  4. 团队项目——站立会议DAY14

    第十四次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:修改页面,查漏补缺.进行需求分析,监督每个组员,把大家的问题都一一梳理. 2.钟灵毓秀:继续修改模块代码 ...

  5. 我的第一篇Markdown语法博客

    这是我的第一篇使用markdown语法编写的博客 使用的编辑器为Sublime Text2 并且使用了sublog插件, sublog是一个开源项目 sublog 并且参考了作者的博客 AmongOt ...

  6. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  7. [异常解决] 初玩SAE遇到的小问题——注册&创建项目+MyEclipse装插件直接部署+一个简单的JSP部署实现

    ① 新浪SAE快速上手教程:http://jingyan.baidu.com/season/43090 上面一个链接是针对PHP的相关介绍,如果用java还有点不一样,具体请看新浪SAE官网:http ...

  8. rsync permission denied created directories have no permissions

    这个问题坑了好几天 最后被此贴解决 http://stackoverflow.com/questions/5798807/rsync-permission-denied-created-directo ...

  9. Android移动APP开发笔记——最新版Cordova 5.3.1（PhoneGap）搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

  10. node.js调试

    用了几天node.js感觉很新奇,但是调试问题实在是愁煞人,开始的时候懒的学习调试方法,看看异常内容就可以了,但随着代码复杂程度的上升,并不是所有错误都是语法错误了,不调试搞不定了,只好搜搜资料,学习 ...