1. 程式人生 > >$.ajaxSetup()設定全域性Ajax(ajax在jQuery中的運用學習第十一天)

$.ajaxSetup()設定全域性Ajax(ajax在jQuery中的運用學習第十一天)

        在使用$.ajax()方法時,有時需要呼叫多個$.ajax()方法,如果每個方法都設定其中的請求細節,將是一件十分麻煩的事。為了簡化這種工作,在jQuery中,可以使用$.ajaxSetup()方法設定全域性性的ajax預設選項,一次設定,全域性有效,這樣大大簡化了$.ajax()方法中細節的編寫,該方法的呼叫格式為:

        $.ajaxSetup([options])

        其中,可選項引數[options]是一個物件,通過該物件可以設定$.ajax()方法中的引數。

示例:

        (1)功能描述

          在頁面中,設定三個按鈕,分別通過$.ajax()方法請求一個XML文件中的某部分資料,並回調的資料展示在頁面中。在請求前,使用$.ajaxSetup()方法進行一些引數項的全域性性設定。

       (2)實現程式碼

          <script  type="text/javascript"  src="text/jquery-1.8.2.min.js"></script>

          <script  type="text/javascript">

                    $(function()  {

                            $.ajaxSetup({        //設定全域性性的Ajax選項

                                    type:"GET",

                                    url:"UserInfo.xml",

                                    dataType:"xml"

                            })

                            $("$Button1").click(function()  {                            //"姓名"按鈕的單擊事件

                                    $.ajax({

                                           success:function(data)  {                        //傳回請求響應的資料

                                                ShowData(data,"姓名","name");        //顯示“姓名”部分

                                            }

                                    })

                            })                          

                            $("$Button2").click(function()  {                            //"性別"按鈕的單擊事件

                                    $.ajax({

                                           success:function(data)  {                        //傳回請求響應的資料

                                                ShowData(data,"性別","sex");        //顯示“性別”部分

                                            }

                                    })

                            })                          

                           $("$Button3").click(function()  {                            //"郵箱"按鈕的單擊事件

                                    $.ajax({

                                           success:function(data)  {                        //傳回請求響應的資料

                                                ShowData(data,"郵箱","email");        //顯示“郵箱”部分

                                            }

                                    })

                            })

                     /*

                            根據名稱與值,獲取請求響應資料中的某部分

                            @Parm  d為請求響應後的資料

                            @Parm  n為資料中文說明字元

                            @Parm  d為資料在響應資料中的元素名稱

                    */

                            function  ShowData(d, n, v){

                                    $("#divTip").empty();                //先清空標記中的內容

                                    var  strHTML  =  ""                   //初始化儲存內容變數

                                    $(d).find("User").each(function()  {      //遍歷獲取的資料

                                            var  $strUser  =  $(this);

                                            strHTML  +=  n  +  ": "  +  $strUser.find(v).text()  +  "<hr>"

                                    })

                                    $("#divTip").html(strHtML);       //處理後的資料

                            }

                    })

          </script>

<div  class="divFrame">

            <div  class="divTitle">

                        <span><input  id="Button1"  type="button"  value="姓名"  class="btn"  /></span>

                        <span><input  id="Button2"  type="button"  value="性別"  class="btn"  /></span>

                        <span><input  id="Button3"  type="button"  value="郵箱"  class="btn"  /></span>

            </div>

            <div  class="divContent">

                        <div  id="divTip"  class="clsShow"></div>

            </div>

</div>

程式碼分析:

       在js程式碼中,由於使用了$.ajaxSetup()方法設定部分全域性性的Ajax引數選項,使後續程式碼中的非同步資料請求非常簡單,避免了重複編寫相同程式碼。由於每次請求都要分析響應後的資料,因此通過一個自定義的函式ShowData,在每次呼叫時,根據不同的元素名稱,返回對應的資料。