深入浅出JSONP--解决ajax跨域问题

JSONP和JSON好像啊,他们之间有什么联系吗?

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。

  JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度

实现代码:

 $("#btnAjax").click(function () {
            $.ajax({
                type: "Get",
                url: "http://localhost:4018/Default1/Create?callback=?",
                cache: false,
                error: function () {
                    alert("程序出错,请联系管理员.");
                },
                dataType: "jsonp",
                jsonp: 'callback',
                success: function (data) {
                    alert(data.name);
                 
                }
            });
        });
 public ActionResult Create()
        {
            //获取回调函数名
            string callback = Request.QueryString["callback"];
            //json数据
            string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
            return Content(callback + "(" + json + ")");
          
        }

ASP.NET MVC实现常用方式

在MVC3.0中建立JSONP专用ActionResult

public class JsonpResult<T> : ActionResult
    {
        public T Obj { get; set; }
        public string CallbackName { get; set; }

        public JsonpResult(T obj, string callback)
        {
            this.Obj = obj;
            this.CallbackName = callback;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            var js = new System.Web.Script.Serialization.JavaScriptSerializer();
            var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")";

            context.HttpContext.Response.ContentType = "application/json";
            context.HttpContext.Response.Write(jsonp);
        }
    }
public ActionResult Create()
        {
            //获取回调函数名
            string callback = Request.QueryString["callback"];
            //json数据
        //  string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
           // return Content(callback + "(" + json + ")");
            return new JsonpResult<object>(new { success = true, result = new { a=1 } }, callback);
        }

Jsonp的服务器端的原理其实就是回调一个js函数名(这里是callback参数)将该参数传给服务端,接着再由服务器端执行这个callback js函数,
同时附上该js函数的参数。比如上文的C#代码:
var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")";还有一点我们要注意的就是安全隐患问题:
在使用jsonp由于涉及到跨域,需要考虑到对方站点或者对方系统的安全性问题。应当避免安全隐患,不能滥用jsonp。

posted @ 2014-02-24 11:17  学亮  阅读(246)  评论(0编辑  收藏  举报