Jquery重新学习之九[Ajax运用总结C]

前两篇文章主要介绍Jquery如何利用Ajax进行操作数据，主要介绍调用的方法；其中Jquery.ajax()是Jquery中最底层的方法；Jquery还定义的一个方法跟几个事件为Jquery.ajax ()进行简化跟扩展；

1：其中全局方法jQuery.ajaxSetup([options])则是为了在使用$.ajax(),有时一个页面需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是一件十分麻烦的事。可以一次设置，全局有效，这样大大简化了$.ajax()方法中细节的编写；

实例代码（只需要设置一个$.ajaxSetup(),其它几个地方调用就不用再编写相同的代码）：

<head>
    <title>$.ajaxSetup()方法全局设置Ajax</title>
    <script type="text/javascript" src="Jscript/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"); //显示"邮箱"部分
                    }
                })
            })
            /*
            *根据名称与值，获取请求响应数据中的某部分
            *@Param d为请求响应后的数据
            *@Param n为数据中文说明字符
            *@Param 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>
</head>
<body>
    <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>
</body>
</html>

2：在Jquery中，除了全局性的函数外，还有6个全局性的Ajax事件，由于在使用$.ajax()方法时，其中的选项参数global的值默认情况下为true,这也意味着所有在执行的Ajax的数据请求，都绑定了全局事件；也就是说6个全局性的开关是global属性决定；

2.1 ajaxStart(callback)和ajaxStop(callback)这两个使用的频率非常高，前者是当请求开始执行时触发，往往用于编写一些准备性的工作，后者是当请求结束时触发；

实例代码：

<head>
    <title>Ajax中的全局事件</title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
    </script>
    <script type="text/javascript">
        $(function() {

            //元素绑定全局ajaxStart事件
            $("#divMsg").ajaxStart(function() {
                $(this).show(); //显示元素
            })

            //元素绑定全局ajaxStop事件
            $("#divMsg").ajaxStop(function() {
                $(this).html("已成功获取数据。").hide();
            })

            $("#Button1").click(function() {
                $.ajax({ //带参数请求服务器
                    type: "GET",
                    url: "GetData.aspx",
                    //获取加码后的数据并作为参数传给服务器
                    data: { txtData: encodeURI($("#txtData").val()) },
                    dataType: "html",
                    success: function(data) { //显示解码后的返回数据
                        $("#divTip").html(decodeURI(data));
                    }
                })
            })
        })
         </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              <span>数据：<input id="txtData" type="text" class="txt" /></span>
              <span><input id="Button1" type="button" value="发送" class="btn" /></span>
         </div>
         <div class="divContent">
              <div id="divMsg" class="clsTip">正在发送数据请求…</div>
              <div id="divTip" class="clsShow"></div>
         </div>
    </div>
</body>
</html>


其中GetData.aspx代码：

    string strName = Request["txtData"]; //返回传回的参数
    Response.Write(strName); //返回传回的参数