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

跨域可以简单的理解为从一个域名访问另一个域名，由于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. 将整数转换成二进制的java小程序

    首先我们知道,将整数转换成二进制是将整数除二取余将最后除得的数和得到的余数从下向上写,组成得到的二进制数. java程序实现如下: public class ChangeToErjinzhi { pu ...

  2. 渣渣小本求职复习之路每天一博客系列——Unix&Linux入门（5）

    前情回顾:昨天简单地介绍了一下如何使用vi编辑器,例如命令模式和插入模式的切换,以及一些简单命令的讲解. —————————————————————————直接就开始吧———————————————— ...

  3. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  4. Node.js与Sails~日志机制log

    回到目录 看到Sails的日志就会想起来log4net,确实它们在很多地方是相似的,都是采用分级别记录的方式,而sails我觉得在使用上更加方便,它不需要我们做多于的事情,直接sails.log.级别 ...

  5. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  6. PHP-CS-Fixer：格式化你的PHP代码

    简介 良好的代码规范可以提高代码可读性,团队沟通维护成本.最推荐大家遵守的是 php-fig(PHP Framework Interop Group) 组织定义的 PSR-1 . PSR-2 两个.不 ...

  7. js笔记——理解js中的call及apply

    call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...

  8. Atitit图像识别的常用特征大总结attilax大总结

    Atitit图像识别的常用特征大总结attilax大总结 1.1. 常用的图像特征有颜色特征.纹理特征.形状特征.空间关系特征. 1 1.2. HOG特征:方向梯度直方图(Histogram of O ...

  9. Android笔记——活动的生命周期

    一.活动的重要性 掌握活动的生命周期对任何 Android 开发者来说都非常重要,当你深入理解活动的生命周期之后,就可以写出更加连贯流畅的程序,并在如何合理管理应用资源方面,你会发挥的游刃有余.你的应 ...

  10. asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action，得到一个分部视图(PartialView)的HTML，进行渲染

    在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...