转:http://justcoding.iteye.com/blog/1366102/

Js是不能跨域请求。出于安全考虑,js设计时不可以跨域。

什么是跨域:

1、域名不同时。

2、域名相同,端口不同。

只有域名相同、端口相同时,才可以访问

可以使用jsonp解决跨域问题。

Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

1、什么是JSONP?

要了解JSONP,不得不提一下JSON,那么什么是JSON ?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

3、如何使用JSONP?

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

HTML代码 (任一 ):

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  2. <script type="text/javascript">
  3. function jsonpCallback(result) {
  4. //alert(result);
  5. for(var i in result) {
  6. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  7. }
  8. }
  9. var JSONP=document.createElement("script");
  10. JSONP.type="text/javascript";
  11. JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
  12. document.getElementsByTagName("head")[0].appendChild(JSONP);
  13. </script>

或者

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  2. <script type="text/javascript">
  3. function jsonpCallback(result) {
  4. alert(result.a);
  5. alert(result.b);
  6. alert(result.c);
  7. for(var i in result) {
  8. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  9. }
  10. }
  11. </script>
  12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

JavaScript的链接,必须在function的下面。

服务端PHP代码 (services.php):

  1. <?php
  2. //服务端返回JSON数据
  3. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
  4. $result=json_encode($arr);
  5. //echo $_GET['callback'].'("Hello,World!")';
  6. //echo $_GET['callback']."($result)";
  7. //动态执行回调函数
  8. $callback=$_GET['callback'];
  9. echo $callback."($result)";

如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。

$.getJSON
$.ajax
$.get

客户端JS代码在jQuery中的实现方式1:

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.getJSON("http://crossdomain.com/services.php?callback=?",
  4. function(result) {
  5. for(var i in result) {
  6. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  7. }
  8. });
  9. </script>

客户端JS代码在jQuery中的实现方式2:

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.ajax({
  4. url:"http://crossdomain.com/services.php",
  5. dataType:'jsonp',
  6. data:'',
  7. jsonp:'callback',
  8. success:function(result) {
  9. for(var i in result) {
  10. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  11. }
  12. },
  13. timeout:3000
  14. });
  15. </script>

客户端JS代码在jQuery中的实现方式3:

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
  4. </script>

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

  1. jsonpCallback({msg:'this is json data'})

Jsonp原理: 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

 

使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。
  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话,会容易出现安全问题。

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

主要提示:

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

关联:

征服 Ajax 应用程序的安全威胁

防止伪造跨站请求

转ajax的jsonp的文章的更多相关文章

  1. ajax和jsonp使用总结

    前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...

  2. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  3. ajax 和jsonp 不是一码事 细读详解

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

  4. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  5. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  6. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  7. ajax和jsonp的封装

    一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...

  8. 针对AJAX与JSONP的异同

    针对AJAX与JSONP的异同       1.ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架 ...

  9. ajax 和jsonp 不是一码事

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

随机推荐

  1. Java并发基础--ThreadLocal

    一.ThreadLocal定义 ThreadLocal是一个可以提供线程局部变量的类,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路,通过为每个线程提供一个独立的变量副本解决了变量 ...

  2. Python实现个性化推荐二

    基于内容的推荐引擎是怎么工作的 基于内容的推荐系统,正如你的朋友和同事预期的那样,会考虑商品的实际属性,比如商品描述,商品名,价格等等.如果你以前从没接触过推荐系统,然后现在有人拿枪指着你的头,强迫你 ...

  3. BZOJ 4736 温暖会指引我们前行 LCT+最优生成树+并查集

    题目链接:http://uoj.ac/problem/274 题意概述: 没什么好概述的......概述了题意就知道怎么做了......我懒嘛 分析: 就是用lct维护最大生成树. 然后如果去UOJ上 ...

  4. 条款03 尽可能使用const

    一.概述 使用const约束对象:可以获得编译器的帮助(指出相关出错的地方) const与成员函数:const重载.转型.避免代码重复 二.细节 1. 为什么有些函数要返回const对象(看上去没必要 ...

  5. 软工1816 · Alpha冲刺(2/10)

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 与前后端敲定接口设计的细节 重新理清业务逻辑,对项目最初的设想进行一定修正 跟 ...

  6. ubuntu中下载sublime相关问题

    1.SublimeText3的安装 在网上搜索了一些ubuntu下关于sublime-text-3安装的方法,在这里针对自己尝试的情况进行反馈: 方法一(未成功): 在终端输入以下代码: sudo a ...

  7. BAT批处理(三)

    1.set set命令:显示.设置或删除变量.显示变量:set 或 set s 前者显示批处理当前已定义的所有变量及其值,后者显示所有以s开头的变量及值.设置变量:set aa=abcd 此句命令便可 ...

  8. centOS6.5如何从启动界面直接进入命令行界面

    进入系统后,按Ctrl+Alt+Fn可以切换控制台,其中F1~F6是字符控制台,F7~F12是X控制台 如果启动直接进入字符控制台,而不是X Window,可以编辑/etc/inittab将id:5: ...

  9. 修改CSV中的某些值

    file.csv文件如下,然后对其中某些值进行变换操作,刚学Powershell的时候操作起来很麻烦,现在看来其实就是对于哈希表的操作. col1,col2,col3,col4 text1,text2 ...

  10. Spyder5 & 显示器校准 & 色彩校准

    Spyder5 & 显示器校准 & 色彩校准 Spyder5EXPRESS 绿蜘蛛5 – 轻松.快速地校准您的屏幕. Spyder5PRO 蓝蜘蛛5 – 可为您的所有笔记本电脑和台式机 ...