实现 javacript JSONP 跨域

0.跨域

有时我们需要用AJAX来加载另一个网站的数据，但AJAX不支持，必须寻找另一种方法。Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

1.什么是JSONP

利用javascript动态创建<script>,并设置新的src来实现跨域，所以JSONP产生。JSONP是一种利用JSON格式传输跨域数据的一种格式。JSONP必须搭配服务端程序才能完成：1.直接请求你自己的服务器，服务器然后访问其他站点数据，然后返回；2.可以直接访问公开的JSONP服务器接口。

如：Digg API: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 API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

2.前端代码

(function (window) {

  var callBackHandler = function(data){ 
     alert(data.test); 
  }; 
  window.callBackHandler = callBackHandler; 
  function CD(){ 
  } 
  CD.prototype.getScript = function(){ 
          var scriptId = "callBackScriptId"; 
          var script = document.getElementById(scriptId) 
          if(script != null){ 
             script.parentNode.removeChild(script); 
          } 
          script = document.createElement('script'); 
          script.id = scriptId; 
          document.getElementsByTagName('head')[0].appendChild(script); 
          return script; 
  }

   CD.prototype.getURL=function(words){ 
       var callBackHandlerName = "callBackHandler";

       return "http://xxx.com?callback="+callBackHandlerName; 
  } 
   CD.prototype.getData=function(words){ 
    var s = this.getScript(); 
    s.setAttribute("src",this.getURL(words)); 
  } 
  window.cd = new CD();

})(window);

 

//调用cd.getData();

3.后端代码(asp.net)

        string callback = context.Request["callback"];
        if(callback == null || callback.Length == 0){
            callback = "callback";
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write(callback + "({\"test\":\"hello world\"})");

4.jQuery 实现JSONP

jQuer很早就支持JSONP了，用起来很方便，如下： 

$.ajax({
             url:'http://xxx.xxx/xx.xx',
             dataType:"jsonp",
             jsonp:"jsonpcallback",
             success:function(data){
                //deal
             }
    });

可参考：http://www.cnblogs.com/cfanseal/archive/2009/05/19/1460382.html

5.参考

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html#!comments