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

我们今天主要来分享的就是jsonp的跨域访问。

我们将从这几个方面来分析jsonp跨域访问

  • 跨域访问是什么
  • json是什么
  • jsonp是什么
  • 如何进行jsonp跨域访问

1.跨域访问是什么

我们先明白一个概念:同源策略

同源策略是一种浏览器的安全策略,一个脚本不能去执行另一个和他不同源的脚本内容。所谓同源指的是域名,协议,端口三个都要相同。所以当我们通过js获取第三方的数据时(比如通过第三方API获取json数据),,浏览器是不允许我们直接这样做的。所以我们得使用一种技巧去访问不同域,然后获得该域的数据。这个就是跨域访问。

2.json是什么

JSON: JavaScript Object Notation(JavaScript 对象表示法)通过名字我们就大概可以知道是个啥了,json是一种轻量级的数据交换格式,而这个格式又是遵循的js的对象语法。所以个人认为json可以直接看做是js的一个子集。

3.jsonp是什么

jsonp:json with padding 我们来翻译一下就是:用来填充的json数据。咦?为什么要这么叫呢。后面当我们讲到jsonp的原理的时候,你就会知道这样取名字的原因了(题外话:取名字真的是个技术活啊。每次遇到函数,变量比较多,如何取个好名字真的很重要)说人话就是:jsonp就是一种访问数据的非官方传输协议。

4.如何进行jsonp跨域访问

通过前面我们可以知道由于同源策略,我们无法通过ajax直接去访问另一个域名下的文件。那这时我们怎么办,别急,直接不行,我们间接还不行吗。我们仔细想想我们的script标签,它是可以获取任何地方的文件的啊。我们可以通过它来帮我们获取我们想要的东西。具体如何操作呢,我们来看例子吧.

首先我们幻想一下我们获得了数据之后我们要干什么,我们把获取的数据显示在页面上吧。

页面的html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
</head>
<body>
<div>
<h1>显示跨域访问获得的数据</h1>
<div id="show"> </div>
</div>
</body>
</html>

我们再在页面中直接添加js函数来处理数据吧

function show(data)//data参数就是我们从另一个域获取到的数据
{
var node = document.getElementById('show');
p.innerHTML=p.innerHTML="这就是获取到的数据 "+data;
}

我们是直接把获取的数据显示出来

然后我们现在去获取数据,我们再添加一个节点,里面的src就是我们要访问的第三方的url,只是在url后面我们额外添加一个callback参数。

这是整个的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
</head>
<body>
<div>
<h1>显示跨域访问获得的数据</h1>
<div id="showdata"> </div>
</div>
<script type="text/javascript">
function show(data)//data参数就是我们从另一个域获取到的数据
{
var node = document.getElementById('showdata');
p.innerHTML=p.innerHTML="这就是获取到的数据 "+data;
}
</script>
<script type="text/javascript" src="url?callback=show"></script>
</body>
</html>

大家需要注意的是src="url?callback=show",我们把之前定义的show函数作为callback参数传递给服务器端,这个函数就是一个回调函数,具体过程是这样:

一个前提是我们使用jsonp是需要服务器端来配合的,我们通过url访问到服务器的地址,并且传递了一个callback参数给服务器端,然后服务器端能够接收这个参数,然后将数据以json格式作为show函数的参数传递给它,也就是用json数据来填充这个show函数(现在明白叫jsonp的原因了吧),然后调用这个函数,最后因为这个函数被执行,我们的html中的div中就会显示出获取到的数据。

不过这样可能会显得死板,固定了什么时候调用。我们可以动态生成一个script节点,这样我们就可以在需要数据的时候动态调用了,这样就会更合理。我还是上一下完整代码吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
</head>
<body>
<div>
<h1>显示跨域访问获得的数据</h1>
<div id="showdata"> </div>
</div>
<script type="text/javascript">
//data参数就是我们从另一个域获取到的数据
function show(data)
{
var node = document.getElementById('showdata');
p.innerHTML=p.innerHTML="这就是获取到的数据 "+data;
}
function invokeRemoteData()
{
var node=document.createElement("script");
//remoteUrl就是第三方服务器的地址
var url=remoteUrl?callback=show ;
node.setAttribute("src",url);
var head=document.getElementsByTagName("head")[0];
//将创建的script节点添加到head的最后,调用开始
head.appendChild(node);
}
</script> </body>
</html>

当我们需要获取跨域数据时,直接调用invokeRemoteData函数,html页面中就会显示出获取到的数据。

总结一下,完成jsonp跨域访问所需要做的步骤:

  • 创建一个函数,这个函数是用来处理获取到的数据
  • 给要访问的远程url添加一个callback参数并将之前创建的处理函数作为callback参数的值
  • 可以添加一个方法来动态创建一个script标签以此来动态获取数据

ps:

  • 此前提到了回调函数,简单说回调函数就是把该函数当做参数传递给另外一个函数,然后在需要的时候在这个函数中调用传入的回调函数。
  • 推荐两篇jsonp讲的很好的博客,廖雪峰ajax随它去吧-jsonp 这两位都是大牛,我的这篇只是我的个人理解,大家可以多看看不同的人写的,然后总结一下
  • 还推荐一个跨域访问的方法:就是服务器端代理,先请求服务器,然后服务器端帮你请求需要的文件再response给你。

Jsonp跨域访问的更多相关文章

  1. 在ASP.NET MVC3 中利用Jsonp跨域访问

    在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...

  2. jquery ajax怎么使用jsonp跨域访问

    在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...

  3. Jsonp跨域访问原理和实例

    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...

  4. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  5. [转载]介绍一个JSONP 跨域访问代理API-yahooapis

    你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用. 比如我想访问一个天气的r ...

  6. 从前端和后端两个角度分析jsonp跨域访问(完整实例)

    一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...

  7. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  8. 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  9. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

随机推荐

  1. Understand Lambda Expressions in 3 minutes(翻译)

    本文翻译自CodeProject上的一篇简单解释Lambda表达式的文章,适合新手理解.译文后面我补充了一点对Lambda表达式的说明. 1.什么是Lambda表达式? Lambda表达式是一种匿名方 ...

  2. iOS开发系列--Objective-C之类和对象

    概述 前面已经简单介绍过ObjC的基础知识,让大家对ObjC有个大致的印象,今天将重点解释ObjC面向对象的特性.ObjC相对于C语言多了面向对象特性,但是ObjC又没有其他面向对象语言那么多语法特性 ...

  3. c#实现redis客户端(一)

    最近项目使用中要改造redis客户端,看了下文档,总结分享一下. 阅读目录: 协议规范 基础通信 状态命令 set.get命令 管道.事务 总结 协议规范 redis允许客户端以TCP方式连接,默认6 ...

  4. 用“MEAN”技术栈开发web应用(三)用mongodb搭建数据库

    上一篇介绍了如何用express搭建起服务端MVC的开发架构,本篇我们来详细介绍一下这个Model层,也就是数据库访问层.包含如何使用mongodb搭建数据库,以及如何使用mongoose来访问数据. ...

  5. Pycharm5注册方式

    0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. ##注册方法2### 注册方法:    在 注册时选择 Licen ...

  6. ASP.NET Web API自身对CORS的支持: CORS授权检验的实施

    通过<EnableCorsAttribute特性背后的故事>我们知道:由CorsPolicyProvider提供的CorsPolicy表示目标Action采用的资源授权策略,ASP.NET ...

  7. highchart导出图片

    http://www.cnblogs.com/jasondan/p/3504120.html 项目中需求导出报表为图片存到Excel中去,或供其它页面调用. 开始存到截屏,但由于用户电脑分辨率不一样, ...

  8. MFC的定时器OnTimer

    本文总结来源出自鸡啄米,感谢鸡啄米.来源:http://www.jizhuomi.com/software/232.html 定时器简介 定时器,可以帮助开发者或者用户定时完成某项任务.在使用定时器时 ...

  9. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  10. C#字符串排序效率

    前几天看到个node.js和C#比较性能的文章,在那篇文章中C#的性能居然输了,按理说这是不可能的,除非有什么特殊的情况拖慢了性能.查看其异步的写法,最终发现没有什么问题,起码不是主要问题.后来用VS ...