jQuery系列文章之jQuery Ajax快餐

本篇是我jQuery系列网摘之第八篇，谢谢关注，请持续关注我后面的文章:

使用原始Ajax请求会在我以前的博客中有所说明，在这里就不提了，我这里使用的

Ajax以及前面的某些文章都是摘自比较好的一些资料，这里只是摘要：

使用原始Ajax，我们需要做较多的事情，比如创建XmlHttpRequest对象，判断请求状态，

编写回调函数等，然而使用jQuery的Load方法，只需要一句话,比如：

$("#divTest").load("data/AjaxGetCityInfo.aspx",{"resultType":"html"});

jQuery提供了几个用于发送Ajax请求的函数，其中最核心也最复杂的是jQuery.ajax(options),

所有的其他Ajax函数都是它的一个简化调用，当我们想要完全控制Ajax时可以使用此函数，

否则还是使用简化方法如get,post,load等更加方便，所以jQuery.ajax(options)方法放到

最后一个介绍，先来介绍最简单的load方法：

load(url,[data],[callback])   Returns:jQuery包装集

说明：load方法能够载入远程HTML文件代码并插入至DOM中,默认使用Get方式，

如果传递了data参数则使用Post方式.

load是最简单的Ajax函数，但是使用具有局限性,

下面是一个关于jQuery的load方法js代码：

<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

            $("#btnAjaxGet").click(function(event){

                //发送Get方式的Ajax请求<a href="../testNo1.aspx">../testNo1.aspx</a>

                $("#divResult").load("../testNo1.aspx");

            });

            $("#btnAjaxPost").click(function(event){

                //发送Post方式的Ajax请求

                $("#divResult").load("../testNo1.aspx",{"param":"Hello World"});

            });

            $("#btnAjaxCallBack").click(function(event){

                //发送Post请求，返回后执行回调函数

                $("#divResult").load("../testNo1.aspx",{"param":"Hello World"},

                function(responseText,textStatus,XMLHttpRequest){

                    alert(responseText);

                    alert(textStatus);

                    alert(XMLHttpRequest.status);

                    alert(XMLHttpRequest.readyState)

                });

            });

        });

    </script>

get方式传递Ajax请求：

jQuery.get(url,[data],[callback],[type])

Returns:XMLHttpRequest

get请求的回调函数签名如下：

function(data,textStatus){

      this;

}

其中data是返回的数据，testStatus表示状态码，可能是如下值：

"timeout","error","notmodified","success","parsererror"在回调函数中的this

是获取options对象的有关引用，有关options的各种说明，请参见API,type参数是指

data数据的类型，可能是下面的值："xml","html","script","json","jsonp","text"

默认为"html"，注意：jQuery.getJSON(url,[data],[callback])方法就相当于

jQuery.get(url,[data],[callback],"json"),

getJSON函数应用举例：

$.getJSON("../data/AjaxGetCityInfo.aspx",{"resultType":"json"},function(data,textStatus)

{

      alert(data.length);

      if(data.length>=1){

             alert(data[0].CityName);

      }

});

服务器端返回的字符串如下：

[{"CityName":"阿克苏","isHotCity":false},{"CityName":"朱强","isHotCity":true}]

//JSON格式

getScript方法：jQuery.getScript(url,[callback])   Returns:XMLHttpRequest

与getJSON讲解差不多，但是使用该函数跨域调用测试时(主要针对(IE6和FireFox))

回调函数中的data何textStatus均为undifined,测试跨域调用的两个方法分别为：

$.getScript("../scripts/getScript.js",function(data,textStatus){...});

$.getScript("http://resource.elong.com/getScript.js",function(data,textStatus){});

post请求方法：jQuery.post(url,[data],[call],[type]); Returns:XMLHttpRequest

该方法具体用法和get相同，只是提交方式由"GET"改为"POST";

下面介绍最根本的jQuery.ajax(options)方法，其他jQuery ajax都是间接调用此方法的，

是jQuery底层AJAX实现,$.ajax()只有一个参数：参数key/value对象，包含各配置及回调

函数信息，options主要参数如下：

async默认值true,表示同步或异步请求,

beforeSend(XMLHTTPRequest),在修改XMLHttpRequest对象前发送，使用此方法来设置定义页眉等

XMLHttpRequest是传递的唯一理由，你可以在函数中返回false以取消该请求.

cache如果设置为false将迫使您请求的网页不被浏览器缓存.

complete(XMLHttpRequest,textStatus) function;当请求完成后发生.

type,请求方式("post"或"get"),默认为get,

data[Object]要发送的数据对象，

dataType [String]预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息

返回responseXML或responseText,并作为回调函数参数传递，可用值在上面$.get函数已经

说过

timeout:设置请求超时时间(毫秒),此设置将覆盖全局设置

global是否禁用全局Ajax事件，默认为true,不禁用

url:请求页面地址

error:请求失败时将调用此方法，这个方法有三个参数：XMLHttpRequest对象,textStatus

错误信息,errorThrown可能捕获的错误对象

ifModified:[boolean]仅在服务器数据改变时获取新数据，使用HTTP包Last-Modified

success:[function]请求成功后回调函数,这个方法有两个参数,服务器返回数据，返回

状态：function(data,textStatus){this;}

Ajax相关函数：

jQuery提供了一些相关函数能够辅助Ajax函数,

jQuery.ajaxSetup(options)无返回值,该函数用于设置全局Ajax默认options选项.

比如我们在页面加载时使用下面的代码设置Ajax的默认option选项：

$.ajaxSetup({

      url:"../data/AjaxGetMethod.aspx",

      data:{"param":"ziqiu.zhang"},

      global:true,

      type:"Post",

      success:function(data,textStatus){

             $("#divResult").html(data);

      }

});

serialize(),Returns:String,说明：序列表表格内容为字符串，用于Ajax请求,

序列化最常用在将表单数据发送到服务器端时，被序列化后的数据是标准格式，可以被

几乎所有的服务器端支持，为了尽可能正常工作，要求被序列化的表单字段都有name属性，

只有一个id是无法工作的，想这样写：

<input id="email" name="email" type="text"/>

serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串，便于我们使用

Ajax发送时获取表单数据，这个一个From按照Get方式提交时，自动将表单对象的名/值放到

url上提交差不多，

serializeArray(),Returns:Array<Object>说明：序列化表格元素(类似'serialize')返回

JSON数据结构数据,注意：此方法返回的是JSON对象而非JSON字符串，需要使用插件或者

第三方库进行字符串化操作.

jQuery还有全局Ajax事件，

ajaxComplete(callback),Ajax请求完成时执行函数

ajaxError(callback),Ajax请求发生错误时执行函数

ajaxSend(callback),Ajax请求发送前执行函数

ajaxStart(callback),Ajax请求开始时执行函数

ajaxStop(callback),Ajax请求结束时执行函数

ajaxSuccess(callback),Ajax请求成功时执行函数

注意事项：如果在Get请求发送的url中有两个同名参数，比如两个param参数：

url?param=..&param=...;

使用服务器端方法获取param参数：

if(!String.IsNullOrEmpty(HttpContext.Current.Request["Param"]))

{

      param = HttpContext.Current.Request["Param"];

}

此时获取到的param是一个用“,”分隔多个值的字符串：..,..;

至此jQuery Ajax简介基本结束.