程序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搜索接口：=?
q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：
<script type="text/javascript"> //添加<script>标签的方法 function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function(){ //搜索apple，将自定义的回调函数名result传入callback参数中 addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=.&q=apple&callback=result"); } //自定义的回调函数result function result(data) { //我们就简单的获取apple搜索结果的第一条记录中url数据 alert(data.responseData.results[].unescapedUrl); } </script>
像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：
Digg API：来自 Digg 的头条新闻：
=?
Geonames API：邮编的位置信息：
=?
Flickr JSONP API：载入最新猫的图片：
=?
Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：
=?
接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。
程序B的MyService.ashx代码：
public class MyService : IHttpHandler { public void ProcessRequest(HttpContext context) { //获取回调函数名 string callback = context.Request.QueryString["callback"]; //json数据 string json = "{\"name\":\"chopper\",\"sex\":\"man\"}"; context.Response.ContentType = "application/json"; //输出：回调函数名(json数据) context.Response.Write(callback + "(" + json + ")"); } public bool IsReusable { get { return false; } } }
程序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])方法(详细可以参考)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：
<script type="text/javascript" src="https://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。