JSON跨域原理实现

　　Ajax不能跨域访问有时候的确有点头疼，但是又不得不这样，如果真的可以跨域了，那就太可怕了。在做PhoneGap开发的时候，将HTML/JavaScript/CSS/Image等文件打包在APK中的时候，如果需要与服务器端数据交互就会产生这个问题，那么有几种方式解决这个数据交互的问题：

　　1、WebSocket：很强大，不过服务器端要写代码，还要分配socket端口；主要是有些平台内置浏览器不支持WebSocket，且需要写PhoneGap扩展。

　　2、内嵌Frame：可以在网页中内嵌一个frame，载入服务器端脚本，这样保证在同一个域下请求数据；这种可用性差，需要保证子框架与父框架的数据沟通。

　　3、JSONP：在JQuery里有Ajax方法中可以设定dataType为JSONP后实现跨域访问。

　　在web开发中，前端的JavaScript类库，是可以跨域调用的；在上一篇的博客中写过动态载入JavaScript类库：

        LoadScript : function (url, callback) {
            var superarg = arguments;
            var script = document.createElement("script")
            script.type = "text/javascript";
            document.getElementsByTagName("head")[0].appendChild(script);
            script.onload = function () {
                if (callback) callback();
            };
            script.onerror = function(e){
                console.log('LoadScript error, url : ' + url);
                superarg.callee(url, callback);
            };
            script.src = url;
        },

　　根据这个原理，服务器端返回的不是JSON数据，而且一个JavaScript脚本，这个脚本中包含了JSON数据，那么在发送之前随机生成一个方法名发送到服务端，服务端返回用这个方法执行所需要的JSON数据，那么在JS被载入到页面中后，便开始执行这个方法，一旦执行这个方法，就可以callback需要执行的函数了，这样就实现了JSON数据跨域请求了，代码如下：

        getJSON : function (url, callback, complete){
            var rNumber = '_';
            var reg = /[\?\&]callback=([_\-a-zA-Z0-9]*)/;
            if(!reg.test(url)) {
                for (var i = 0; i < 10; i++) {
                    rNumber += Math.floor(Math.random() * 10);
                };
                url.indexOf('?') != -1
                    ? url += '&callback=' + rNumber
                    : url += '?callback=' + rNumber;
            }
            else{
                var m = reg.exec(url);
                if(m && m.length > 1){
                    rNumber = m[1];
                }
            }

            global[rNumber] = function (data) { 
                if (this.fn) this.fn(eval(data));
                delete global[this.fnName];
            }
            .bind( { fn : callback, fnName : rNumber } );

            var script = document.createElement("script")
            script.type = "text/javascript";
            document.getElementsByTagName("head")[0].appendChild(script);
            script.onload = function () {
                complete && complete();
                $(script).remove();
            };
            script.onerror = function(e){
                console.log('LoadScript error, url : ' + url);
            };
            script.src = url;
        }

　　服务器端是asp.net MVC，代码如下：

    public class JsonpResult : System.Web.Mvc.JsonResult
    {
        public override void ExecuteResult(ControllerContext context)
        {
            if (context != null)
            {
                HttpResponseBase response = context.HttpContext.Response;
                if (!string.IsNullOrEmpty(ContentType))
                {
                    response.ContentType = ContentType;
                }
                else
                {
                    response.ContentType = "application/javascript";
                }
                if (ContentEncoding != null)
                {
                    response.ContentEncoding = ContentEncoding;
                }
                if (Data != null)
                {
                    HttpRequestBase request = context.HttpContext.Request;
                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    response.Write(request.Params["callback"] + "(" + serializer.Serialize(Data) + ")");
                }
            }
        }
    }

已将这段代码放入以前实现的JQuery类库中了，地址如下：

https://github.com/Visolleon/H5Query