jQuery Ajax使用，以及常用插件简单介绍

jquery:

使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：
.load(url,[data],[callback])
参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
回调函数：function(response,status,xhr)

规定当请求完成时运行的函数。
response -
包含来自请求的结果数据
status - 包含请求的状态（"success", "notmodified", "error", "timeout"
或 "parsererror"）
xhr - 包含 XMLHttpRequest
对象
*例 $(function
() {
                $("#btn").bind("click", function
() {
                    var $this = $(this);
$("ul").load("http:// … 
.html li",function(){
                        $this.attr("disabled", "true");
                    });
                })
            });
在调用load()方法加载数据时，可以在参数url中，通过空格过滤需要加载的数据，空格右边就是元素过滤选择器。
加载成功后的具体操作可以在callback回调函数中添加。
url路径中不能有空格。

使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
*例 $(function () {
                $(“#bt1”).bind("click", function () {
                    $.getJSON("http://www....”,function(ResponseData){
                        $.each(ResponseData, function (index, item) {
                            $("ul").append("<li>" + item[“key...”] + "</li>");
                        });
                    });
                })
            });
在使用getJSON()方法请求服务器中JSON格式文件的数据时，如果请求成功，数据则通过回调函数的参数返回，即ResponseData参数。
getJSON的大小写书写是否一致。
url路径中不能有空格。

使用getScript()方法异步加载并执行js文件
使用getScript()方法异步请求并执行
服务器中的JavaScript格式的文件，它的调用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
*例
$(function () {
                $("#btn").bind("click", function () {
                    var $this = $(this);
                    $.getScript("http://...xx.js",function(){
                        $this.attr("disabled","true");
                    });                    
                });
        });
由于调用getScript()方法加载JavaScript格式文件后，它会自动执行该文件中的代码，因此，可以在文件中编写代码，将获取后的数据显示在页面中。
“getScript”书写是否正确，大小写需要注意。
url路径中不能有空格。

使用get()方法以GET方式从服务器获取数据
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：
$.get(url,[data,][callback(ResponseData,status,xhr){},][dataType])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数,dataType:规定预计的服务器响应的数据类型。
默认地，jQuery 将智能判断,可能的类型:”xml”,"html",”text",”script”,”json”,”jsonp"
*例 $(function
() {
$("#btnShow").bind("click", function
() {
                  var $this = $(this);
                    $.get("http://
… .php”,{ name: "John", time: "2pm" },function(data){
                        $this.attr("disabled", "true");
                      $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    },"json");
});
            });
在使用$.get()方法请求服务器数据时，url参数为服务器端的文件路径，callback为回调函数，在该函数中，通过参数传回请求获取的数据。
“$.get”书写是否正确，它们之间通过.点号进行链接。

使用post()方法以POST方式从服务器发送数据
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：
$.post(url,
[data,][success(data,textStatus, jqXHR),][dataType])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，data可选。映射key-value或字符串值。规定连同请求发送到服务器的数据。
，callback 可选项。为请求成功后执行的回调函数。dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script
或 html）。
$.post("test.php", { "data": "reqData" },
   function(resData){
     alert(resData.name); // John
   }, "json");

使用serialize()方法序列化表单元素值
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
例如，在表单中添加多个元素，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下所示：
Text1=user&Select1=1&Checkbox1=on
可以看出，当序列化后，调用表单元素本身的serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。
*注意 Text1为name属性的值，user为输入在框的value值，当表单元素没有name时，将不会进行序列化。

使用ajax()方法加载服务器数据
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
具体更多参数参考http://www.w3school.com.cn/jquery/ajax_ajax.asp
*注意
在设置data值时，key为传递数据时的名称，不能加载引号。
data: { num: $("#txtNumber").val() },

使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。
也就是说，使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在后面调用ajax请求服务器文件时，只需要设置url地址，请求参数等。
*例 $.ajaxSetup({
                    dataType:"text",
                    type:"post",
                    success:function(data){
                        alert(“ …
”);
                    }
                });

使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop
()方法绑定的函数。
*注
在调用ajaxStart()和ajaxStop()方法之前，首先，需要通过选择器获取绑定方法的元素，然后，再通过元素调用这两个方法。
“ajaxStart”、“ajaxStop”书写是否正确，区分大小写。

表单验证插件-validate
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
*例 $(function
() {
                $("#frmV").validate({
                      //自定义验证规则
                      rules: {
                          email:{
                            required:true,
//必须填写
                            email:true   //email邮件格式
                          }
                      },
                      //错误提示位置
                      errorPlacement: function
(error, element) {
                          error.appendTo(“div:last”);
                      }
                });  
            });

表单插件-form
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form). ajaxForm
({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
*例 $(function
() {
          $("#frmV").ajaxForm({
                    url: "http://www.imooc.com/data/form_f.php", 
                    target: ".tip"   
                });
            });

首先，使用选择器获取表单元素，然后，调用表单插件的ajaxForm()或ajaxSubmit()方法向服务器发送表单数据，并在方法中添加“options”对象。
“ajaxForm”方法名称是否正确，注意区分大小写。

cookie插件-cookie
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：
保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
 [option]参数说明：
expires:　　有限日期，可以是一个整数或一个日期(单位：天)。　　这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了
　　　　　 path:　　　 cookie值保存的路径，默认与创建页路径一致。
　　　　   domin:　　  cookie域名属性，默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"
　　　　   secure:　　
一个布尔值，表示传输cookie值时，是否需要一个安全协议。
  *例 $(function
() {
$("#btnSet").bind("click", function(){
                    if ($("#chksave").is(":checked")) {
                        $.cookie("email",$("#email").val(),{
                            path: "/",
                            expires: 7
                        });
                    }else {
                      $.cookie("email",null,{path: "/"});
                    }
                });
                $("#readCookie").on("click",function(){
                    $("#showContent").append("</br><span>读取cookie的email : "+$.cookie("email")+"</span>");
                });
                 $("#deleteCookie").on("click",function(){
                     $.cookie("email",null,{path:"/"});
                });
            });
如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。

搜索插件-autocomplete
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：
$(textbox).autocomplete(
  urlData , [options]
  );
*例 $("#autocomplete").autocomplete(emails,{
              minChars: 0,//自动完成激活之前填入的最小字符
              max:5,//列表条目数
              width: 400,//提示的宽度
              scrollHeight: 300,//提示的高度
              matchContains: true,//是否只要包含文本框里的就可以
              autoFill:false,//自动填充
              formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
              },
              formatMatch: function (data, i, total) {
                       return data[0];
              },
              formatResult: function
(data) {
                        return data[0];
              }
        }).result(function
(event, data, formatted) {
                    $(".tip").show().html("您的选择是：" +
(!data ? "空" : formatted));
            });

urlData : 数组或者url 
minChars
: 表示在自动完成激活之前填入的最小字符，这里我们设置为0，在我们双击文本框，不输入字符的时候，就会把数据显示出来
max : 表示列表里的条目数，我们设置了5，所以显示5条
autoFill表示自动填充，就是在文本框中自动填充符合条件的项目，看下图，在我们输入“g”的时候，文本框里填充了“google”
formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。
Autocomplete插件里还有两个重要的方法，一个是result( handler
)，一个是search( )，比如用户在选定了某个条目时需要触发一些别的方法时，着两个方法就可以起作用了

另补充几个工具函数
检测对象是否为空
$.isEmptyObject(obj);
检测两个节点的包含关系
$.contains (container, contained);
能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：
参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。
字符串操作函数
$.trim (str);
调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格
URL操作函数
$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：
$. param (obj);
如果参数obj是一个数组，那么它的每个元素都必须是一个包含name属性和value属性的对象
[
{ name: "name", value:
“coco” },
  { name: "age", value: 18 },
  { name: "job", value: "Developer", company: "家里蹲" }
]
.serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求
$.param()
序列化对象或者数组,常用于向服务端发送URL请求