JQuery getJSON方法的总结

最近在新公司的项目里面经常用到JQuery的getJSON方法和后台程序进行交互,所以特意来总结一下,以备以后的项目的需要。
jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。原型如下：
jQuery.getJSON( url, [data], [callback] )
url:必需 规定将请求发送的哪个 URL
data : (可选) 规定连同请求发送到服务器的key/value数据
callback: (可选) 载入数据成功时的回调函数

例如:
   function LoginSubmit(memberDomain) {
    if (document.getElementById("Account").value == "" || document.getElementById("Password").value == "") {
        alert("用户名或密码不能为空?");
    } else {
        $.getJSON(memberDomain + "/Login/LoginIndex?jsoncallback=?", {
            account: document.getElementById("Account").value,
            password: document.getElementById("Password").value,
            rnum: Math.random()
        }, function (result) {
            if (result.IsSuccess) {
                loginPanelInit(memberDomain);
            }
            else {
                alert("登录不成功!");
            }
        });
    }
}
上面getJSON url部分的memberDomain表示域名,getJSON支持跨域调用,Login表示ASP.NET MVC里面控制器Controller的名字,LoginIndex表示Action的名字.URL后面跟的jsoncallback=?表示该请求是JQuery的JSONP请求.

JQuery官方的网站对getJSON方法的英文解释说明了这一点。
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
很明显，JSONP是一种脚本注入(Script Injection)行为，需要特别注意其安全性。

jQuery对JSONP请求的封装方式很值得提倡：

$.getJSON(url, params + "&jsoncallback=?", function(json){
    /* do something */
});

用jsoncallback作为服务器端支持的标准jsonp参数，而每次执行这个方法都会用时间戳生成一个唯一的全局函数名，替换这个“?”，这个细节被封装到黑盒里，使用者不必了解，可以像普通的ajax请求一样，用匿名的回调函数作为最末尾的参数（这是jquery强调的风格），这种语法糖（syntactic sugar）的作用绝对不仅仅是让前端开发人员可以偷懒而已，对代码的可读性，兼容性和今后的维护都有好处。


Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

注意：
1.运用JQuery的进行跨域调用时请求地址一定要有 jsoncallback=? ，例如我请求 百度，传一个参数userName=123，应该这样写：http://www.baidu.com?userName=123&jsoncallback=? ，如果我不传参数userName，应该这样写：http://www.baidu.com?jsoncallback=?

2、第二个参数一定要是json格式键/值对的格式。例：{ "email": ""}

3、回调函数，您请求的地址需要返回数据，返回的数据必须是严格的json格式的数据，还需要用参数jsoncallback加小括号包裹jsoncallback（json格式的数据），否则就会出现回调函数不会执行的问题。
如下面控制器返回的数据是就是这种格式jsoncallback(SerializeHelper.JsonSerialize(viewData))。
return Content(string.Format("{0}({1})", jsoncallback, SerializeHelper.JsonSerialize(viewData)), "text/plain", System.Text.Encoding.UTF8);

JQuery跨域调用的后台方法:
public ActionResult LoginIndex(string account, string password)
        {
            string jsoncallback = Request.QueryString["jsoncallback"];
            bool tag = true;
            loginInfo dto = new loginInfo();
            dto.Account = account;           
            dto.AccountError = "";
            JsonViewData viewData = new JsonViewData() { IsSuccess = false, ErrorMessage = "登录失败" };
            password = CryptographyHelper.MD5(CryptographyHelper.MD5(password));

            MembershipDTO mdto = MembershipBiz.Instance.Login(account, password);

            if (mdto != null)
            {
                if (mdto.Status >= 0)
                {
                    string ip = System.Web.HttpContext.Current.Request.UserHostAddress;
                    MembershipBiz.Instance.LogionUpdate(mdto.MembershipId, ip);
                    UpdateCredit(mdto.MembershipId, ip);
                }
                else
                {
                    dto.AccountError = "该用户不存在";
                    tag = false;
                    viewData.IsSuccess = false;
                }
            }
            else
            {
                dto.AccountError = "帐号或者密码错误";
                tag = false;
                viewData.IsSuccess = false;
            }
            if (tag)
            {
                Security.Authentication.Authenticate(account, password, false);
                viewData.IsSuccess = true;
                return Content(string.Format("{0}({1})", jsoncallback, SerializeHelper.JsonSerialize(viewData)), "text/plain", System.Text.Encoding.UTF8);

            }
            else
            {
                viewData.IsSuccess = false;
                return Content(string.Format("{0}({1})", jsoncallback, SerializeHelper.JsonSerialize(viewData)), "text/plain", System.Text.Encoding.UTF8);
            }
        }


JQuery getJSON的等价形式$.ajax()或者JQuery.ajax().这种形式相比$.getJSON形式更加的具体,通过设置不同的参数控制起来更加的灵活。比如在某些特殊情况下可以将请求由异步改为同步async: false,请求的类型可以设置为"post"等。
如下所示：
   function GetSupplyNum(id) {
         var childnum = "";
         jQuery.ajax({
             type: "get",
             async: false,
             url: "/Default1/GetSupplyCountByCategory",
             data: 'id=' + id + '',
             contentType: "text",
             dataType: "json",
             cache: false,
             success: function (data) {
             childnum = childnum + data;
             }
         });
         return childnum;
     }