jquery对ajax的支持

前面详细介绍的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html，是采用纯js的方式来实现的，这样有助于我们对底层XMLHttpRequest的实现的了解，但也有缺点就是创建会比较的麻烦并且不够果断

今天就来说说jquery对于ajax的支持，jquery封装了XMLHttpRequest的底层实现，直接调用提供的方法即可

1.$.ajax(options)

这个方法是jquery对于ajax最为全面的支持，$.ajax(options)既可以发送GET请求，也可以发送POST请求等等，因此我们通过这个方法可以获得ajax交互的所有控制权。

该方法中包含了一个参数options，该参数的形式为{key1:val1,key2:val2,key3:val3....},如

{
        url:delTagAction,
        data:{
            sendTime:(new Date()).getTime(),
            idStr:idStr
        },
        type:"post",
        async:false,
        dataType:"json",
        success:function(data){
            if(data.success){
                $("#shield").fadeOut(400);
                $("#subDetailWrapper").fadeOut(400);
                $("#middle").load(listTagAction,
                        {
                            sendTime:(new Date()).getTime(),
                            currentPage:currentPage
                        }
                )
                alert("操作成功！！！");
            }else{
                alert("操作失败，请联系开发人员！！！");
            }
        }
    }

下面就介绍发送ajax请求可指定的各个选项：

常用的：
async-----------------------------------指定是否使用异步请求，默认值为true(使用异步)

beforeSend-----------------------------指定发送请求之前将触发指定的函数，通过该函数我们可以在请求前加一些自定义的请求头或者是请求状态条等，

complete-------------------------------指定ajax交互完成后的回调函数，该函数将在succes或error回调函数之后被调用。该选项指定的函数是形如：

function(xhr,textStatus){....},xhr表示本次交互的XMLHttpRequest对象,textStatus表示服务器端相应状态的描述。

data------------------------------------发送本次ajax请求的请求参数。指定的参数形如：{key1:val1,key2:val2,key3:val3....}

dataType------------------------------指定服务器响应的类型，如果不指定，jquery会根据响应头来返回responseXML或responseText,并将响应传给回调函数对应的参数，可选值有以下：

　　xml:返回可以使用jquery处理的XML文档

　　html:返回html文本

　　script:返回javascript脚本，要注意的是此时必须将读取浏览器缓存禁止掉

　　json:返回一个符合json格式的字符串

　　text:返回普通的文本响应

　　jsonp:指定使用jsonp加载json块，使用jsonp时应该在请求的url之后额外添加“？callback=?”,其中callback为回调函数

error-----------------------------------指定服务器响应出现错误的回调函数，指定的函数型形如function(xhr, textStatus, errorThrown){..},其中xhr参数表示请求的XMLHttpRequest对象，textStatus参数为关于错误的信息描述，errorThrown参数表示引起错误的错误对象

success---------------------------------指定服务器响应成功后的回调函数，指定的函数型形如function(xhr, textStatus){..},其中xhr参数表示请求XMLHttpRequest对象，textStatus参数为服务器响应状态的信息

timeout---------------------------------设置ajax请求超时时长

type-------------------------------------设置发送请求的方式，常用的就是“POST”与"GET",默认值为"GET"

url---------------------------------------指定发送ajax请求的目的URL地址

其他：

cache-----------------------------------是否从浏览器中读取缓存，默认为true(读取缓存)，我们一般是不希望读取缓存的，办法就是在发送的参数中添加时间戳来骗过浏览器

contentType---------------------------指定发送到服务器端的请求所使用的编码格式，默认值为“application/x-www-form-urlencoded”

dataFilter------------------------------执行一个回调函数，该回调函数会对服务器端的响应进行预处理，指定的函数如：function(data,type){....},data表示服务器端返回的响应，type表示服务器端响应的数据类型

global----------------------------------设置是否触发ajax的全局事件处理函数，默认值为true

ifModified------------------------------设置是否仅在服务器数据改变获取新数据，默认值为false

jsonp-----------------------------------该选型指定的值将会覆盖jsonp中请求的callback函数

username-------------------------------对目标url需要用户名的指定用户名

password-------------------------------对目标url需要密码的指定密码

processData----------------------------指定是否需要处理请求数据，默认为true(需要处理)

xhr--------------------------------------使用自己的方式来创建XMLHttpRequest对象

示例常用选项的ajax：

function update(delTagAction, listTagAction){
    var tagId = $("#examId").val(); 
    var currentPage=$("#currentPage").val();  //获取当前页
    //alert(currentPage);
    var ids=new Array();
    if($("input[name='id']:checked").size()==0){
        alert("请先勾取选项！");
        return false;
        
    }
    $("input[name='id']:checked").each(function(i,obj){
        ids[i]=$(obj).val();
    });
    var idStr=ids.join("-");
    $.ajax({
        url:delTagAction,
        data:{
            sendTime: (new Date()).getTime(),
            idStr: idStr,
            tagId: tagId
        },
        type:"post",
        async:false,
        dataType:"json",
        success:function(data){
            if(data.success){
                $("#middle").load(listTagAction,
                        {
                            sendTime:(new Date()).getTime(),
                            currentPage:currentPage
                        }
                )
                alert("操作成功！！！");
            }else{
                alert("操作失败，请联系开发人员！！！");
            }
        }
    });
}

看上面的代码大家可以看到一个load方法的使用：

$("#middle").load(listTagAction,
      {
       sendTime:(new Date()).getTime(),
       currentPage:currentPage
      }
)

load方法是一个非常便捷的ajax交互方法，它可以向一个远程URL发送一个异步请求，可以不需要指定回调函数，可以指定一个制定id的css来自动加载服务器的html响应

方法说明如下：load(url, [,data][,callback]),data是一个形如{key1:val2,key2:val2,key3:val3...}的js对象，callback为回调函数，两个参数都是可选的

下面示例：

//根据省份来进行显示
function show(tagAction, city){
    $("#detail").empty();
    $("#detail").load(tagAction,
        {
            sendTime:(new Date()).getTime(),
            city: city
        }
    );
}

交互后，服务器端返回的数据将加载到id为detail的元素的位置

2.上面介绍的$.ajax(options)为我们提供了全面控制ajax的请求细节，但另一个方面就会显得比较的复杂，因此jquery提供了几个简单的方法来发送请求

(1)$.get(url, [data], [callback], [type]):向服务器端发送GET请求，参数表示分别是：url：访问的服务器的地址；data:一个js对象，同于指定请求参数；

callback:指服务器响应成功后的回调函数，该函数形如：function(data, statusText){...}函数，其中data表示服务器端的响应，statusText表示服务器端

响应类型的描述信息；type:表示服务器端响应的数据类型

(2)$.post(url, [data], [callback], [type]):用于向服务器端发送Post请求，用法与$.get()一样

(3)$.getJSON(url, [data], [callback]):与$.get()一样，只是默认指定type方式为json

(4)$.getScript(url, [callback])：与$.get()一样，只是默认指定type方式为script

这四个方法都比较相似：以$.getJSON(url, [data], [callback])方法示例代码

function startExam() {
    //这里通过ajax进行交互
    $.getJSON("../adminPath/startExamAction.action", 
            {
                sendTime:(new Date()).getTime()
            }, 
            function(json) {
            if (json.success == true) {
                //alert(json.responseMsg);
                $("#rightContent").load("../adminPath/settingExam.action", 
                        {
                            sendTime: (new Date()).getTime(), 
                            pid: json.pid, 
                            tskid: json.tskid, 
                            examId: 0
                        });
            } else {
                alert("\u64cd\u4f5c\u5931\u8d25\uff01");
        }
    });
}