ajax实现JSONP跨域
摘要：简单的说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果
AJAX的一大限制是不允许跨域请求。不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式，它是可以引用跨域URL的js脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果
什么是跨域
简单的说，出于安全方面的考虑，页面中的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(JavaScriptObjectNotation)是一种轻量级的数据交换格式，而JSONP（JSONwithPadding）则是JSON的一种“使用模式”，通过这种模式可以实现数据的跨域获取
JSONP的应用
JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）
JSONP跨域的原理
同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码
举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：
{"id":123,"name":张三,"age":17}
点击并拖拽以移动
那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：
foo({"id":123,"name":张三,"age":17});
点击并拖拽以移动
当然，如果服务端考虑得更加充分，返回的数据可能如下：
try{foo({"id":123,"name":张三,"age":17});}catch(e){}
点击并拖拽以移动
这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo
functionexecuteJsonp(url){ vareleScript=document.createElement("script"); eleScript.type="text/javascript"; eleScript.src=url; document.getElementsByTagName("head")[0].appendChild(eleScript);}functionfoo(data){for(varpindata){console.log(data[p]);}}varurl="http://www.a.com/user?id=123?callback=foo";executeJsonp(url)
点击并拖拽以移动
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp'：
$.ajax({type:"get",data:"random="+Math.random(),url:url,dataType:"jsonp",jsonp:"callback",success:function(data){//处理data数据$.each(data,function(key,val){$("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>");});}});
点击并拖拽以移动
第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{q:"Arsenal"},function(tweets){console.info("Twitterreturned:",tweets);});
点击并拖拽以移动
也可以简单地使用getScript方法：
//此时也可以在函数外定义foo方法functionfoo(data){}//处理data数据$.getScript('http://www.a.com/user?id=123&callback=foo');
点击并拖拽以移动
jquery中的ajax方法怎样通过JSONP进行远程调用
$.ajax的参数
type：请求方式GET/POST
原文链接http://click.aliyun.com/m/23861/