取经——ASP.NET MVC Ajax

一直对ASP.NET MVC 的异步提交搞不懂，今天决定一探究竟。

其实核心都封装在jquery.unobtrusive-ajax.js里。

我们发现所有的代码都放在了(function($){}(jQuery))里，这个结构很奇妙，一般的js函数都是function(){}，可这个后面多了个参数，其实说白了这是个匿名方法，我们一点点还原它的真实面目。

我们可以写成这样(function($){})(jQuery)，

我们再把function方法拿出来

function aa($){

}

aa(jQuery);

这样是不是就看懂了，相当于声明了一个函数aa，然后立即执行它。

而之所以在最外面包上这么一层，是为了把jQuery传进去，以防$和其他库冲突。而在jQuery的世界里，就可以任性的用$了。

然后是一大堆的方法，别急，我们一个个看，其实一切都是从它开始的：

$("form[data-ajax=true] :submit").live("click", function (evt) {
        var name = evt.target.name,
            form = $(evt.target).parents("form")[0];

        $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

        setTimeout(function () {
            $(form).removeData(data_click);
        }, 0);
 });

看样子是给某个东西执行了live方法。

先来看是什么东西。

$(form[data-ajax=true] :submit)

首先找到属性"data-ajax"为true的form表单，然后找到里面的submit按钮，说白了就是我们自己页面点击保存时的提交按钮。

<input type="submit" value="保存"/>

这就对上了，异步提交嘛。

再来看live方法，可以查阅Jquery文档，http://www.php100.com/manual/jquery/

哦，原来是给提交按钮绑定click方法，不过通过live绑定更严谨些，详情先一放。总之我们知道这是一点击提交按钮首先执行的函数。

然后来看这个函数都干了什么

var name = evt.target.name,
    form = $(evt.target).parents("form")[0];

$(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

setTimeout(function () {
    $(form).removeData(data_click);
}, 0);

定义了两个变量，name是提交按钮的name属性值，form是提交按钮所在的表单。

但是data方法又是干什么的呢？貌似是存了一个值。

没错，准确的说是存了一个键值对。其实data是把数据存到了form表单这个元素中，至于如何存的，此处暂不多追究。

key叫data_click，value是后面那坨。data_click是个变量，全文搜索一下，在顶部会发现它的声明

 var data_click = "unobtrusiveAjaxClick"

那坨其实是个三目运算符，当name有值时，将下面的对象放到一个数组中，说白了，data_click保存的是提交按钮的name和value属性：

var o = {
   name = name,
   value = evt.target.value
};

当name为空时，存一个空数组。

最后一个方法是过一段时间后，将data_click删掉，但此处有点小疑惑，时间设置为0，不是立即删吗？那还有什么意义？

ok，接下来进入下一个函数

$("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
        if (!validate(this)) {
            return;
        }
        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            data: clickInfo.concat($(this).serializeArray())
        });
 });

这个是给data-ajax属性为true的form表单的submit事件绑定函数，是正儿八经的提交函数。

首先，取出了第一个函数中存好的data_click值，就是提交按钮的name和value信息。

submit函数会调用执行绑定到submit事件的首要函数，包括浏览器的默认行为。

而我们想在浏览器有所作为之前进行验证，所以要先阻止默认行为的发生，如下：

evt.preventDefault();