浅析JSONP之解决ajax跨域问题

程序A的sample代码中的调用：

 <script type="text/javascript">   function addScriptTag(src){
     var script = document.createElement('script');
     script.setAttribute("type","text/javascript");
     script.src = src;
     document.body.appendChild(script);
   }
    window.onload = function(){
     //调用远程服务     addScriptTag("http://localhost:/MyService.ashx?callback=person");
   }
   //回调函数person   function person(data) {
     alert(data.name + " is a " + data.sex);
   }
 </script>　　

　　这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用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来进行跨域访问。先暂时写到这吧。后续还有更新，请持续关注，谢谢。