jQuery Ajax异步

jQuery.form.js插件（博客参考）：

http://blog.csdn.net/zzq58157383/article/details/7718956

http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html

ajax分页：http://www.helloweba.com/view-blog-195.html

http://www.cnblogs.com/chenping-987123/archive/2011/02/14/1954640.html

ajaxUpload插件实现单图上传：http://www.cnblogs.com/abel/archive/2013/07/24/3213409.html

 

善于使用jquery的data()方法来缓存后台传来的交互数据：http://www.css119.com/book/jQuery/

优势：

 1、简简单单几句代码，我们就可以实现表单的提交，并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
2、支持文件上传功能，并在新浏览器中支持进度条更新。
3、与jQuery库完美结合，支持jQuery.ajax()函数触发的各种事件，支持jQuery.ajax()中所传递的参数。 

实例：

<script type="text/javascript">

    $(function () {

      var options = {

　　type : "post",

　　dataType : "json",

　　beforeSubmit : checkout,  //表单提交之前的验证函数

      success: function (data) {

            $("#responseText").text(data);

      }

  };

        // 方法一：ajaxForm

        $("#form").ajaxForm(options);

 

        // 方法二：ajaxSubmit

        $("#btnSubmit").click(function () {  //button或input不能为submit类型

            $("#form").ajaxSubmit(options);

        });

    });

</script>

 

在jquery的ajax函数中，可以传入3种类型的数据：

1.文本："uname=alice&mobileIpt=110&birthday=1983-05-12"；

2.json对象：{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}；

3.json数组：

[

    {"name":"uname","value":"alice"},

    {"name":"mobileIpt","value":"110"},   

    {"name":"birthday","value":"2012-11-11"}

]；

所以，我们可以一键获取表单并提交，非常方便。

补充：

其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday=1983-05-12"这样的就可以了。

 

对于跨域使用jsonp，其原理为：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

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

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