jQuery Ajax使用总结

一、概述

　　jQuery对Ajax操作进行了封装，在jQuery中$.ajax()是属于最底层的方法，第2层是load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法。

　　写法：load(url, [data], [callback])

　　　　   url: String类型—请求HTML页面的URL地址

　　　　   data：Object类型—发送至服务器的key/value数据

　　　　   callback：Function类型—请求完成时的毁掉函数，无论请求成功或失败。

二、load()方法

1.概述

　　load()方法是jQuery中最常用和简单的Ajax方法。

　　能载入远程的HTML文件并插入至DOM中。

2.传递方式

　　load()方法的传递方式根据参数data来自动制定。

　　默认使用GET方式，传递附加参数时自动转换为POST方法。

3.参数

　　Object类型—发送至服务器的key/value数据。

4.回调函数

　　对于必须在加载完成后才能继续的操作，load()方法提供了回调函数，该函数有三个参数。

　　responseTest：请求返回的内容。

　　textStatus：请求的状态，有success、error、notmodified、timeout 4种。

　　XMLHttpRequest：XMLHttpRequest对象。

5.示例

①GET方式

$("#feeds").load("feeds.html");

②POST方式

$("#feeds").load("feeds.php", {limit: 25}, function(responseText, textStatus, XMLHttpRequest){
   alert("The last 25 entries in the feed have been loaded");
 });

三、GET方法

1.概述

　　$.get()方法使用GET方式来进行一步请求。

　　写法：$.get(url, [data], [callback], [type]).

2.参数

　　url：String类型—请求的HTML页的URL地址。

　　data：Object类型—发送至服务器的key/value数据会作为QueryString附加到请求URL中。

　　callback：载入成功时执行回调函数（只有当Response的返回状态时success才调用该方法）自动将请求的结果和状态传递给该方法。如果需要在出错时执行函数，需要使用$.ajax()方法。

3.回调函数

　　回调函数只有当数据成功返回后才会被调用，这点与load()方法不同。　

　　$.get()方法的回调函数只有两个参数。

　　data：请求返回的内容。

　　textStatus：请求的状态。

4.返回内容格式

　　xml, html, json, script, text _default。

5.示例

①返回HTML片段

$("#send").click(function(){
			$.get("get1.asp", { 
						username :  $("#username").val() , 
						content :  $("#content").val()  
					}, function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
					}
			);
})

由于服务器端返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML数据插入到主页面中。

②返回XML文档

$("#send").click(function () {
                $.get("get2.asp", {
                    username: $("#username").val(),
                    content: $("#content").val()
                }, function (data, textStatus) {
                    var username = $(data).find("comment").attr("username");
                    var content = $(data).find("comment content").text();
                    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
     });
})

由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理。

③返回JSON文件

$("#send").click(function () {
                $.get("get3.asp", {
                    username: $("#username").val(),
                    content: $("#content").val()
                }, function (data, textStatus) {
                    var username = data.username;
                    var content = data.content;
                    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
                    $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                }, "json");
})

由于服务器端返回的数据格式是JSON文件，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页面中。

④在不需要与其他应用程序共享数据的时候，使用HTML片段来提供返回数据一般来说是最简单的；如果需要重用，那么JSON文件时不错的选择，它在性能和文件大小方面具有优势；而当远程应用程序未知时，XML文档时明智的选择，它是Web服务领域的“世界语”。

四、$.post()方法

1.概述

　　该方法的使用类似于$.get()方法。区别在于是通过HTTP POST请求载入信息的。

　　写法：$.post(url, [data], [callback], [type])

2.与$.get()方法的区别

　　Request对象功能是从客户端得到数据，常用的三种取得数据的方法是：Request.Form、Request.QueryString，Request。其第三种是前两种的一个缩写，可以取代前两种情况。而前两种主要对应的Form提交时的两种不同的提交方法：分别是Post方法和Get方法。

　　$.get()方法可以通过 Request.QueryString["a"]和Request["a"]来取得参数；

　　$.post()方法只可以通过Request["a"]来取得参数。

五、$.ajax()方法

1.概述

　　jQuery底层AJAX实现，$.ajax()返回其创建的XMLHttpRequest对象。

　　$.ajax()方法不仅能实现与$.load()、$.get()和$.post()方法同样的功能，而且还可以设定beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数可以给用户更多的Ajax提示信息。

　　写法：$.ajax(options)

2.参数

（1）url：String类型—（默认为当前地址）发送请求的地址

        type：String类型—请求方式，默认为GET。

　　  timeout：Number类型—设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置

        data：Object或String类型—发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。Get请求中将附加在URL后。例如：{foo1:"bar1", foo2:"bar2"}转换为&fool=bar1&foo2=bar2。

        dataType：String类型—预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。

　　　　　　　　　　　　　　 可用的类型如下：xml、html、script、json、jsonp、text

        global：Boolean类型—默认为true。表示是否出发全局Ajax事件。设置false将不会触发全局Ajax事件，AjaxStart或AjaxStop可用于控制各种Ajax事件。

（2）回调函数：Function类型

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

• beforeSend: 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。在beforSend中如果返回false可以取消本次Ajax请求

  • function(XMLHttpRequest) {
          this;//调用本次Ajax请求时传递的options参数  
    }　

• error: 在请求出错时调用。3个参数，传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）

  • function(XMLHttpRequest, textStatus, errorThrown) {
        //通常情况下textStatus和errorThown只有其中一个包含信息
        this;//调用本次ajax请求时传递的options参数  
    }　

• dataFilter: 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
• success: 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

  • function(data, textStatus) {
         //data由服务器返回，并根据dataType参数进行出后的数据。可能是xmlDoc、 jsonObj、html、text等类型。
         this;//调用本次Ajax请求时传递的options参数  
    }　　

    　
• complete: 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

  • function(XMLHttpRequest, textStatus) {      
         this;//调用本次Ajax请求时传递的options参数  
    }　　
    

六、序列化元素

1.serialize()方法

　　提交表单时，序列化表单内容为字符串。 　  

$("#send").click(function(){
     $.get("get1.php", $("#form1").serialize(), functiuon(data, textStatus){
             $("#restText").html(data);
     });
});　　

2.serializeArray()方法

　　序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

     注意：此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

　  返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）

　  eg:

　　[ 
         {name: 'firstname', value: 'Hello'}, 
         {name: 'lastname', value: 'World'}
    ]

3.$.param()方法

　　它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

　　eg:

var obj = {a:1, b:2, c:3};
var k = $.param(obj);
alert(K);//输出a=1&b=2&c=3

七、jQuery中的Ajax全局事件

1.概述

　　通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

2.典型应用

　　读取远程图片时速度可能会比较忙，如果加载的过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信心。此时就需要为网页添加一个提示信息“加载中...”,代码如下：　　

<div id="loading">加载中...</div>

$("#loading").ajaxStart(function(){
   $(this).show();
 });

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

3.另外几个方法

ajaxComplete：Ajax请求完成时执行的函数。

ajaxError：Ajax请求错误时执行的函数，捕捉到的错误可以作为最后一个参数传递。

ajaxSend：Ajax请求发送前执行的函数。

ajaxSuccess：Ajax请求成功时执行的函数。