jsonp原理实例及mvc中的应用
最近用的工作用到了jsonp,记录一下
jsonp
简单的原理就是通过<script>标记引入一个定义好json数据的js,因为<script>标记是不受域名限制的
例子
<script type=text/javascript>
function callback(jsondata)
{
alert(jsondata.UserName);
}
</script>
<script type=text/javascript>
callback({"UserName":"test","Age":11});
</script>
这个应该都能看懂,如果把
callback({"UserName":"test","Age":11});
保存成一个js文件,随便放到那个什么地方,然后这里直接引入这个js,也是能够执行的
jquery已经把这个过程都包装好,直接调用就可以得到json数据
mvc中调用
先定义好一个JsonpResult,
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); } }
Action写法
public ActionResult GetJsonP(string callback) { if (string.IsNullOrEmpty(callback)) callback = "callback"; User u=new User(); //生成u对象 return new JsonpResult<InpaiUser>(u, callback); }
action返回的就是一段js代码
callback({"UserId":45516,"UserName":"xxx"
})
jquery调用
function getUserInfo(checkUser) { $.ajax({ type: "GET", url: "http://xxx/user/getjsonp?callback=?", cache: false, error: function () { }, jsonp: "callback", dataType: "jsonp", success: function (result) { checkUser(result);//checkUser是一个处理user对象的function } }); }