• 雪天寒冷 常州120一天多接到急救电话1118个 2018-07-18
  • 怀揣“警察梦” 盗贼专偷警用物品 2018-07-18
  • 创新人才教育研究会选举出第二届理事会理事 2018-07-18
  • 筽箌紈贰蟰贺礶羛甶Fantasia 2018-07-18
  • 三亚开通至保亭陵水3条城际旅游公交线路 20分钟发一班车 2018-07-18
  • 苹果AR新技术或让你生活大爆炸 这些公司已布局(股) 2018-07-18
  • 合众人寿阜阳中支因部分保单客户信息不真实被罚款10万元 2018-07-17
  • 顾客网购电视安装时发现屏裂 因已开箱无法正常退货 2018-07-17
  • 20多年未开口的央视女主播 在政协会上说了什么? 2018-07-17
  • 为什么只有韩国能生产大尺寸OLED?中国不行 2018-07-16
  • “高盐值”真面目 这些食品不咸也高盐 2018-07-16
  • 山西太原:出租车拟调价以应对网约车市场冲击 2018-07-15
  • 默勒镇多措并举全面打响生态环境保护攻坚战 2018-07-15
  • 去年广州专利申请量首破10万件 2018-07-15
  • 冬日浪漫礼遇 圣诞节游戏里“约“起来 2018-07-15
  • jQuery中利用JSONP解决AJAX跨域问题

    栏目: Javascript 发布于: 2014-02-21 11:30:39

    跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。

    什么是跨域?

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

    具体策略限制情况可看下表:

    URL 说明 允许通信
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    同一域名下 允许
    http://www.rocksun.cn/lab/a.js
    http://www.rocksun.cn/script/b.js
    同一域名下不同文件夹 允许
    http://www.rocksun.cn:8000/a.js
    http://www.rocksun.cn/b.js
    同一域名,不同端口 不允许
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    同一域名,不同协议 不允许
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    域名和域名对应ip 不允许
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    主域相同,子域不同 不允许
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    同一域名,不同二级域名(同上) 不允许
    http://www.rocksun.cn/a.js
    http://www.rocksun.cn/b.js
    不同域名 不允许
    什么是JSONP?

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。

    JSONP跨域的原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。

    举个例子,假如需要从服务器(http://www.rocksun.cn/user?id=123)获取的数据如下:

    {"id": 123, "name" : "张三", "age": 17}
    那么,使用JSONP方式请求(http://www.rocksun.cn/user?id=123?callback=foo)的数据将会是如下:

    foo({"id": 123, "name" : "张三", "age": 17});
    当然,如果服务端考虑得更加充分,返回的数据可能如下:

    try{foo({"id": 123, "name" : "张三", "age": 17});}catch(e){}
    以PHP为例,服务端的代码应该如下:

    $json = json_encode(array("id" => 123, "name" => "张三", "age" => 17));
    if(isset($_GET['callback'])){
    	$json = 'try{' . $_GET['callback'] . '(' . $json . ')}catch(e){}';
    }
    echo $json;
    这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.rocksun.cn/user?id=123?callback=foo:

    <script type="text/javascript" src="http://www.rocksun.cn/user?id=123?callback=foo"></script>
    便可以使用foo函数来调用返回的数据了。

    在jQuery中如何通过JSONP来跨域获取数据

    第一种方法是在ajax函数中设置dataType为'jsonp':

    $.ajax({
    	dataType: 'jsonp',
    	url: 'http://www.rocksun.cn/user?id=123',
    	success: function(data){
    		//处理data数据
    	}
    });
    第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:

    $.getJSON('http://www.rocksun.cn/user?id=123&callback=?', function(data){
    	//处理data数据
    });
    也可以简单地使用getScript方法:

    //此时也可以在函数外定义foo方法
    function foo(data){
    	//处理data数据
    }
    $.getScript('http://www.rocksun.cn/user?id=123&callback=foo');
    JSONP的应用

    JSONP在开放API中可以起到非常重要的作用,开放API一般是运用于开发者的应用上,而这些应用往往是在开发者的服务器上而并非在新浪微博的服务器上,因此跨域请求数据成为前端开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。

    转载自:http://www.rocksun.cn/2012/08/1637.html

    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:jQuery中利用JSONP解决AJAX跨域问题
    IT技术书籍推荐:
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    Luke Welling (作者), Laura Thomson (作者), 武欣 (译者)
    《计算机科学丛书:Php和Mysql Web开发(原书第4版)》将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子?!都扑慊蒲Т允?Php和Mysql Web开发(原书第4版)》是第4版,经过了全面的更新、重写和扩展,包括PHP 5.3最新改进的特性(例如,更好的错误和异常处理),MySQL的存储过程和存储引擎,Ajax技术与Web 2.0以及Web应用需要注意的安全问题。