6，Ajax

推薦的學習資源來自：張子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

概要：

       在jQuery中使用ajax及儲存了js寫ajax的靈活性，又有像其他ajax類庫（asp ajax）的易編寫，易讀。

內容：

       核心的函數jQuery.ajax(options)。其他函數都是他的簡化調用，如get，post，load。

       Load（url,[data],[callback]）：

              最簡單，有局限。預設get方法，有參數時自動post方法

1， 用於直接返回html的ajax介面

2， 是jQuery封裝集，在封裝集上使用，並載入到對象中去

要時刻注意瀏覽器緩衝，當使用get時要添加事件參數（newData（））.getTime()

 

//發送Get請求

                $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "&timestamp=" + (new Date()).getTime());

            });

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

            {

                //發送Post請求

                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });

            });

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

            {

                //發送Post請求, 返回後執行回呼函數.

                $("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)

                {

                    responseText = " Add in the CallBack Function! <br/>" + responseText

                    $("#divResult").html(responseText); //或者: $(this).html(responseText);

                });

            });

            $("#btnAjaxFiltHtml").click(function(event)

            {

                //發送Get請求, 從結果中過濾掉 "鞍山" 這一項

                $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "&timestamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");

            });

 

 

Get(url,[data],[callback],[type]):

       返回xmlHttpRequest.

       此函數發送Get請求, 參數可以直接在url中拼接, 比如:

        $.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");

或者通過data參數傳遞:

$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });

 

              getJson(url,[data],[callback]):等同於get(url,[data],[callback],”json”)

              getScript(url,[callback]):等同於get(url,[callback],”script”)

              post(url,[data],[callback],[type])

             ajax(option)

 

       Ajax相關函數：

              ajaxSetup(options):無傳回值，設定全域ajax預設options選項

              serilalize():返回string，序列字串，用於ajax請求

              serilalizeArray():返回Array<object>，格式化，返回json對象，非json字串

 

       全域ajax事件：

       在jQuery.ajaxSetup( options ) 中的options參數屬性中, 有一個global屬性:

global

類型:布爾值

預設值: true

說明:是否觸發全域的Ajax事件.

主要有如下事件:

名稱	說明
ajaxComplete( callback )	AJAX 請求完成時執行函數
ajaxError( callback )	AJAX 請求發生錯誤時執行函數
ajaxSend( callback )	AJAX 請求發送前執行函數
ajaxStart( callback )	AJAX 請求開始時執行函數
ajaxStop( callback )	AJAX 請求結束時執行函數
ajaxSuccess( callback )	AJAX 請求成功時執行函數

 注意：

    如果在Get請求發送的url中有兩個同名參數, 比如兩個param參數:

http://localhost/AjaxGetMethod.aspx?param=Multiple&param=Multiple3

使用伺服器端方法擷取param參數:

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

        {

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

        }

此時擷取到得param是一個用","分隔多個值的字串:

Multiple,Multiple3