SON和JSONP有哪些区别，PhoneGap跨域请求如何实现（json jsonp区别）

25-02-11 12

以上就是给各位分享SON和JSONP有哪些区别，PhoneGap跨域请求如何实现，其中也会对jsonjsonp区别进行解释，同时本文还将给你拓展Ajaxjsonp跨域请求实现方法、angular2js

以上就是给各位分享SON和JSONP有哪些区别，PhoneGap跨域请求如何实现，其中也会对json jsonp区别进行解释，同时本文还将给你拓展Ajax jsonp跨域请求实现方法、angular2 jsonp跨域请求 express输出jsonp数据、jQuery jsonp跨域请求、jQuery+JSONP跨域请求如何实现等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

SON和JSONP有哪些区别，PhoneGap跨域请求如何实现（json jsonp区别）
Ajax jsonp跨域请求实现方法
angular2 jsonp跨域请求 express输出jsonp数据
jQuery jsonp跨域请求
jQuery+JSONP跨域请求如何实现

SON和JSONP有哪些区别，PhoneGap跨域请求如何实现（json jsonp区别）

SON和JSONP有哪些区别，PhoneGap跨域请求如何实现

2013-8-23 19:18|发布者:admin|查看:865|评论: 0

摘要: 前言　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者 ...

前言

　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。

　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的 WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持 WebSocket，因此都不能算是ST2的原生解决方案，原生的只有AJAX。

　　说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。

　　但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。

　　JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。

　　既然随便聊聊，那我们就不再采用教条的方式来讲述，而是把关注重心放在帮助开发人员理解是否应当选择使用以及如何使用上。

　　什么是JSON

　　前面简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。

　　JSON的优点：

　　1、基于纯文本，跨平台传递极其简单；

　　2、Javascript原生支持，后台语言几乎全部支持；

　　3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

　　4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

　　5、容易编写和解析，当然前提是你要知道数据结构；

　　JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。

　　JSON的格式或者叫规则：

　　JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。

　　1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。

　　2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

　　3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

　　4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号”"，以便于不同语言的解析。

　　5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。

　　JSON实例：

// 描述一个人 
var person = {
    "Name": "Bob","Age": 32,"Company": "IBM","Engineer": true
}
 获取这个人的信息 
var personAge = person.Age;
 描述几个人 
var members = [
    {
        "Name": "Bob",255)">true
    },{
        "Name": "John","Age": 20,"Company": "Oracle",255)">false
    },{
        "Name": "Henry","Age": 45,"Company": "Microsoft",255)">false
    }
]
 读取其中John的公司名称 
var johnsCompany = members[1].Company;
 描述一次会议 
var conference = {
    "Conference": "Future Marketing","Date": "2012-6-1","Address": "Beijing","Members":
    [
        {
            "Name": "Bob",255)">true
        },{
            "Name": "John",255)">false
        },{
            "Name": "Henry",255)">false
        }
    ]
}
 读取参会者Henry是否工程师 
var henryIsAnEngineer = conference.Members[2].Engineer;

　　关于JSON，就说这么多，更多细节请在开发过程中查阅资料深入学习。

　　什么是JSONP

　　先说说JSONP是怎么产生的：

　　其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。

　　1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

　　2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

　　3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

　　4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

　　5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

　　6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

　　7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　如果对于callback参数如何使用还有些模糊的话，我们后面会有具体的实例来讲解。

　　JSONP的客户端具体实现：

　　不管jQuery也好，ExtJs也罢，又或者是其他支持jsonp的框架，他们幕后所做的工作都是一样的，下面我来循序渐进的说明一下jsonp在客户端的实现：

　　1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。

　　远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert('我是远程文件');

　　本地服务器localserver.com下有个jsonp.html页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"head>
    title></script type="text/javascript" src="http://remoteserver.com/remote.js"script</bodyhtml>

　　毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

　　2、现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

　　jsonp.html页面代码如下：

="text/javascript">
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
    >

　　remote.js文件代码如下：

localHandler({"result":"我是远程js带来的数据"});

　　运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了，但是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。

　　3、聪明的开发者很容易想到，只要服务端提供的js脚本是动态生成的就行了呗，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

　　看jsonp.html页面的代码：

// 得到航班信息查询结果后的回调函数
     flightHandler 你查询的航班结果是：票价  data.price +  元，余票  data.tickets  张。);
    };
     提供jsonp服务的URL地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
     url "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler;
     创建script标签，设置其属性
     script = document.createElement(script);
    script.setAttribute(src,url);
     把script标签加入head，此时调用开始
    document.getElementsByTagName(head)[0].appendChild(script);
    >

　　这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。

　　我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。

　　OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

flightHandler({
    "code": "CA1998","price": 1780,"tickets": 5
});

　　我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

　　4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

　　什么？你用的是jQuery，想知道jQuery如何实现jsonp调用？好吧，那我就好人做到底，再给你一段jQuery使用jsonp的代码（我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变）：

>
 ="http://www.w3.org/1999/xhtml" >
     >Untitled Page>
      =jquery.min.js">
     jQuery(document).ready((){
        $.ajax({
             type: getfalsehttp://flightQuery.com/jsonp/flightResult.aspx?code=CA1998jsonpcallback传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:flightHandler自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: (json){
                 alert(您查询到航班信息：票价：  json.price  元，余票：  json.tickets );
             },error: (){
                 alert(fail);
             }
         });
     });
     >
  >

　　是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

　　好啦，写到这里，我已经无力再写下去，又困又累，得赶紧睡觉。朋友们要是看这不错，觉得有启发，给点个“推荐”呗！由于实在比较简单，所以就不再提供demo源码下载了。

　　没想到上了博客园的头条推荐。看到大家对这篇文章的认可和评论，还是很开心的，这里针对ajax与jsonp的异同再做一些补充说明：

　　4月20日下午补充

　　1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

　　2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

　　3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

　　4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

　　总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！

说道这里很多人还不明白后台如何处理数据，这里稍微的说一下：

拿PHP来说吧比如$items_list是一个数组

$items_list=json_encode($items_list);
$callback=$_GET['callback'];
echo $callback."($items_list)";
exit;

原文链接：http://www.phonegap100.com/portal.php?mod=view&aid=72

向原作者致敬....感谢这些如此无私共享技术的人....

Ajax jsonp跨域请求实现方法

什么是跨域？

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

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

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

什么是JSONP？

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

JSONP跨域的原理

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

跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资源(相同域名和端口,此外域名与对应的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域问题,但是这里需要注意一点的是服务器A是没有跨域的问题的,这个只有js存在这个问题,也就是说: 页面A中js-->服务器A--->跨域资源,这个路径是可以.只有页面A中的js--->跨域资源,这个路径是不行的.

然后说一下解决方案中的jsonp,这个不是一种格式,而是一种解决方案.

jsonp的原理:js虽然有同源限制,但是引入js文件的时候却没有这个限制,也就是说:

<script type="text/javascript" src="xxx/xxxx.js"></script>

其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.

ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:

$.ajax({
     type: ''GET'',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服务器端需要通过callback来取值(类似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回

jqueryxxxx({"ret":"ok"})

页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.

以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.

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

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

$.ajax({
    dataType: ''jsonp'',
    url: ''http://www.a.com/user?id=123'',
    success: function(data){
        //处理data数据
    }
});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

$.getJSON(''http://www.a.com/user?id=123&callback=?'', function(data){
    //处理data数据
});

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法
function foo(data){
    //处理data数据
}
$.getJSON(''http://www.a.com/user?id=123&callback=foo'');

JSONP的应用

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

您可能感兴趣的文章:

实例讲解使用原生JavaScript处理AJAX请求的方法
原生js jquery ajax请求以及jsonp的调用方法
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
原生javascript的ajax请求及后台PHP响应操作示例
Javascript原生ajax请求代码实例
轻松搞定jQuery+JSONP跨域请求的解决方案
JavaScript用JSONP跨域请求数据实例详解
JSONP跨域请求实例详解
详细解密jsonp跨域请求
JSONP跨域请求
jsonp跨域请求实现示例
原生js实现ajax请求和JSONP跨域请求操作示例

angular2 jsonp跨域请求 express输出jsonp数据

坑了半天终于搞定了，看代码。

前端部分代码

1、app.module.ts

import {JsonpModule} from "@angular/jsonp";

2、需要调取数据的组件 jsonp.component.ts

import {Component} from "@angular/core";
import {Jsonp, URLSearchParams} from "@angular/http";
import ''rxjs/add/operator/map'';
@Component({
    selector: "my-jsonp",
    templateUrl: "app/templates/tpl1.html"
})
export class AppComponent {
    constructor(public jsonp:Jsonp) {
        // 重点来了，url地址后面添加?callback=JSONP_CALLBACK
        let wikiUrl = ''http://localhost:3000/users?callback=JSONP_CALLBACK'';
        // 也可使用URLSearchParams()设置参数，这里只有一个参数，就写在url里面了。
        // 使用map().substribe()获取数据
        this.jsonp.get(wikiUrl)
            .map(res=> res.json())
            .subscribe((response) => {
                console.log(response);
            }, (error) => {
                console.error(error);
            });
    }
}

后台部分代码（express）
返回jsonp数据即可

router.get(''/'', function(req, res, next) {
  // 使用jsonp
  res.jsonp({"name": "heping"});
});

jQuery jsonp跨域请求

  跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。这里讲下使用jquery的jsonp如何发起跨域请求及其原理。先看下准备环境：两个端口不一样，构成跨域请求的条件。获取数据：获取数据的端口为9090。

  请求数据：请求数据的端口为8080

1、先看下直接发起ajax请求会怎么样

 下面是发起请求端的代码：

[XHTML] 纯文本查看复制代码
?

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-" language="java" %>
<html>
<head>

  <title>跨域测试</title>
  <script src="js/jquery-1.7.2.js"></script>
  <script>
      $(document).ready(function () {
           
          $("#btn").click(function () {
             $.ajax({
                 url: ''http://localhost:9090/student'',
                 type: ''GET'',
                 success: function (data) {
                     $(text).val(data);
                 }
             });

         });
          
     });
 </script>

</head>
<body>

 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text"></textarea>

</body>
</html>

  请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了。

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。

  首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用<img src=""> 标签来随意显示某个域上的图片一样。
  比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

3、那么看下如何使用<script src="">来完成一个跨域请求：
　　当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；
　　showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。
　　至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。
[XHTML] 纯文本查看复制代码

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

  <title>跨域测试</title>
  <script src="js/jquery-1.7.2.js"></script>
  <script>
      //回调函数
      function showData (result) {
          var data = JSON.stringify(result); //json对象转成字符串
         $("#text").val(data);
     }

     $(document).ready(function () {

         $("#btn").click(function () {
             //向头部输入一个脚本，该脚本发起一个跨域请求
             $("head").append("<script src=''http://localhost:9090/student?callback=showData''><\/script>");
         });

     });
 </script>

</head>
<body>

 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text"></textarea>

</body>
</html>

  服务端：

[Java] 纯文本查看复制代码
?

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/html;charset=UTF-8");

  //数据
  List<Student> studentList = getStudentList();

  JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("callback");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);

}

  结果：

4、再来看jquery的jsonp方式跨域请求：

  服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:''jsonp''，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。
  这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

[XHTML] 纯文本查看复制代码

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>

$(document).ready(function () {

$("#btn").click(function () {

$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
var result = JSON.stringify(data); //json对象转成字符串
$("#text").val(result);
}
});

});

});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text"></textarea>

</body>
</html>

  效果：

再看看如何指定特定的回调函数：第30行代码
　　回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。
　　然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。
[XHTML] 纯文本查看复制代码
?

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>

function showData (data) {
console.info("调用showData");

var result = JSON.stringify(data);
$("#text").val(result);
}

$(document).ready(function () {

// window.showData = function (data) {
// console.info("调用showData");
//
// var result = JSON.stringify(data);
// $("#text").val(result);
// }

$("#btn").click(function () {

$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
jsonpCallback: "showData", //指定回调函数名称
success: function (data) {
console.info("调用success");
}
});
});

});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text"></textarea>

</body>
</html>

 效果图：

再看看如何改变callback这个名称：第23行代码
　　指定callback这个名称后，后台也需要跟着更改。
[XHTML] 纯文本查看复制代码
?

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>

function showData (data) {
console.info("调用showData");

var result = JSON.stringify(data);
$("#text").val(result);
}

$(document).ready(function () {

$("#btn").click(function () {

$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
jsonp: "theFunction", //指定参数名称
jsonpCallback: "showData", //指定回调函数名称
success: function (data) {
console.info("调用success");
}
});
});

});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text"></textarea>

</body>
</html>

  后台代码：

[Java] 纯文本查看复制代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");

//数据
List<Student> studentList = getStudentList();

JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();

//前端传过来的回调函数名称
String callback = request.getParameter("theFunction");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";

response.getWriter().write(result);
}

  效果图：

最后看看jsonp是否支持POST方式：ajax请求指定POST方式
　　可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。
　　jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。
[XHTML] 纯文本查看复制代码
?

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

     $(document).ready(function () {

         $("#btn").click(function () {

             $.ajax({
                 url: "http://localhost:9090/student",
                 type: "POST",   //post请求方式
                 dataType: "jsonp",
                 jsonp: "callback",
                 success: function (data) {
                     var result = JSON.stringify(data);
                     $("#text").val(result);
                 }
             });
         });

     });
 </script>

</head>
<body>

 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text"></textarea>

</body>
</html>

  效果图：

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin”。
　　有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。
　　response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

    设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

[Java] 纯文本查看复制代码
?

// * 表示允许任何域名跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名可以访问
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

//数据
List<Student> studentList = getStudentList();

JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();

//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";

response.getWriter().write(result);
}

  总结：jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

jQuery+JSONP跨域请求如何实现

这次给大家带来jQuery+JSONP跨域请求如何实现，实现jQuery+JSONP跨域请求的注意事项有哪些，下面就是实战案例，一起来看一下。

　　JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。</script>

上面一段话来自百度百科，概念永远是那么抽象难懂，看例子才是最直观的表现。例子看的多了，领悟到那个点了，自然自己也会学着抽象的描述了。这就是为什么常说“学习知识是从薄到厚，又由厚到薄的过程”。好了扯远了。下面直接来看一个例子。

问题：本地现有一个页面demo.html需要从http://localhost:3561/User/GetAllNames获取数据并展示。

解答：由于问题中的两方不在同一服务器，故需要使用jsonp来跨域访问。

① 客户端编写

客户端使用jQuery中提供的$.getJson方法来跨域访问。getJson有3个参数：

I. url：请求地址；

II. data：发送到服务端的参数；

III. callback：成功时的回调函数。

getJson的使用方法和普通的$.get方法基本一致，不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。然后在回调函数中操作从异域返回的json对象，回调函数callback的参数即为该json对象。

nbsp;html&gt;


<meta>
  <title></title>

登录后复制

　　② 服务端编写

服务端的逻辑主要是将数据序列化为json字符串，然后封装成"callback(json)"的形式，callback为jQuery自动生成并传到服务端的函数名称。下面使用C#实现：

public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format("{0}({1})", callback, json);
  }
}

登录后复制

　　至此，便成功解决了问题。

思考：如果服务端已经写死了callback（如：return string.Format("moty({0})", json);）,那么客户端该怎么写呢？

参考：

$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i " + json[i] + "");
    }
  }
});

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！