Jsonp跨域请求
2015-01-31 11:25
[转载]深入浅出JSONP--解决ajax跨域问题
?JSONP和JSON好像啊，他们之间有什么联系吗？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)，
我们先看下面的小例子然后再详细介绍。
光看定义还不是很明白，那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：
sample.html的代码：
1?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html?xmlns="http://www.w3.org/1999/xhtml"?>
3?<head>
4?<title>test</title>
5?<script?type="text/javascript"?src="test.js"></script>
6?</head>
7?<body>
8?</body>
9?</html>
test.js的代码：
1?alert("success");
打开sample.html后会跳出"success"这样的这样的信息框，这似乎并不能说明什么，?跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。
OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。
sample.html部分代码：
1?<script?type="text/javascript"?src="http://localhost:20002/test.js"></script>
请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。
<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。
刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。
程序A中sample的部分代码：
1?<script?type="text/javascript">
2?//回调函数
3?function?callback(data) {
4?alert(data.message);
5?}
6?</script>
7?<scripttype="text/javascript"?src="http://localhost:20002/test.js"></script>
?
程序B中test.js的代码：
1?//调用callback函数，并以json数据形式作为阐述传递，完成回调2?callback({message:"success"});?
这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。
一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。
?程序A中sample的部分代码：
?
1?<script?type="text/javascript">?
2?function?callback(data) {?
3?alert(data.message);?
4?}?
5?//添加<script>标签的方法?
6?functionaddScriptTag(src){?
7?var?script?=?document.createElement(‘script‘);?
8?script.setAttribute("type","text/javascript");?
9script.src?=?src;
10?document.body.appendChild(script);
11?}
12?
13?window.onload?=?function(){
14addScriptTag("http://localhost:20002/test.js");
15?}
16?</script>
?
程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。
上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=??
q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：
?
1?<script?type="text/javascript">?
2?//添加<script>标签的方法?
3?function?addScriptTag(src){?
4?var?script?=document.createElement(‘script‘);?
5?script.setAttribute("type","text/javascript");?
6?script.src?=?src;?
7document.body.appendChild(script);?
8?}?
9?
10?window.onload?=?function(){
11?//搜索apple，将自定义的回调函数名result传入callback参数中12addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
13?
14?}
15?//自定义的回调函数result
16?function?result(data) {
17?//我们就简单的获取apple搜索结果的第一条记录中url数据18alert(data.responseData.results[0].unescapedUrl);
19?}
20?</script>
?
像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：
Digg API：来自 Digg 的头条新闻：
http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
Geonames API：邮编的位置信息：
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr JSONP API：载入最新猫的图片：
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：
http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?
接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。
程序B的MyService.ashx代码：
?
1?public?class?MyService : IHttpHandler?
2?{?
3?public?void?ProcessRequest(HttpContext context)?
4?{?
5?//获取回调函数名?
6?stringcallback = context.Request.QueryString["callback"];?
7?//json数据?
8?string?json =?"{\"name\":\"chopper\",\"sex\":\"man\"}";?
9?
10context.Response.ContentType =?"application/json";
11?//输出：回调函数名(json数据)
12?context.Response.Write(callback +?"("?+ json +")");
13?}
14?
15?public?bool?IsReusable
16?{
17?get
18?{
19?return?false;
20?}
21?}
22?}
?
程序A的sample代码中的调用：
?
1?<script?type="text/javascript">?
2?function?addScriptTag(src){?
3?var?script?=?document.createElement(‘script‘);?
4script.setAttribute("type","text/javascript");?
5?script.src?=?src;?
6?document.body.appendChild(script);?
7?}?
8?
9?window.onload?=function(){
10?//调用远程服务11?addScriptTag("http://localhost:20002/MyService.ashx?callback=person");
12?
13?}
14?//回调函数person15function?person(data) {
16?alert(data.name?+?"?is a?"?+?data.sex);
17?}
18?</script>
?
? 这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。
jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：
?
<script?type="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script><script?type="text/javascript">$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){ alert(data.name?+?"?is a a"?+?data.sex); });</script>
?
结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。
当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧：
?
<script?type="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script><script?type="text/javascript">?$.ajax({ url:"http://localhost:20002/MyService.ashx?callback=?", dataType:"jsonp", jsonpCallback:"person", success:function(data){ alert(data.name?+?"?is a a"?+?data.sex); } });</script>
?
没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。
利用jQuery可以很方便的实现JSONP来进行跨域访问。先暂时写到这吧。
出处：http://www.cnblogs.com/chopper/?
http://blog.csdn.net/qxs965266509/article/details/12092881
附上本人编写的在谷歌基础上超快搜索引擎代码：
?
<html>
????<head>
????????<title>jsonp返回</title>
????<script?type="text/javascript">
function?sear(){
????var?kw?=?document.getElementsByName(‘keyword‘)[0].value;
????????//动态创建URL
????var?url?=?"http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q="+?kw?+"&callback=aa";???
????????//动态创建script标签
????var?src?=?document.createElement(‘script‘);
????src.setAttribute(‘type‘,‘text/javascript‘);
????src.setAttribute(‘src‘,url);????
????//开始远程请求，下载到script标签里
????document.getElementsByTagName(‘head‘)[0].appendChild(src);
????
?
}
function?aa(res){
????//调试：
????//console.log(res);
????var?szone?=?document.getElementById(‘szone‘); //放置div
????var?result?=?res.responseData.results;
????var?str?=?‘‘;
????for(var?i?in?results){
????????str?+=??‘<p><b>‘+results[i].title+"</b></p>"?+"<br/>";
????????str?+=??‘<p>‘+results[i].content+"</p>"?+"<br/>";
????????str?+=??‘<p>‘+results[i].url+"</p>"?+"<br/>";
????}
????//alert(str);
????szone.innerHTML?=?str;????????//在diV中插入HTM 代码
}
????</script>
????<script?type="text/css">
????????????
?
????</script>
????</head>
????<body>??
????????<input?type="text"?name="keyword"?/><br/>
????????<input?type="button"?value="搜索"??onclick="sear();"/>
????????<div?id="szone">
????????</div>
????</body>
</html>
?
?