jQuery学习笔记（3）之Ajax下

二. 请求服务器数据

前面介绍的是如何在HTML页面中加载异步数据的方法，即如何从服务器上取得静态的数据。但页面的应用远不仅局限于此，Ajax技术最终体现在与服务器的动态数据实现人机交互中，即客户端传递带有参数的请求，服务器接收后，分析所传递来的请求，并做出相应的响应，发送对应数据至客户端，客户端接收请求返回的数据，从而实现了数据的双向传递。

1. jQuery中的get( )方法

上一遍中通过调用全局函数 $.get()，实现了XML文档的加载。除加载数据外， $.get()函数还可以实现数据的请求。

下面举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getScript函数获取数据</title>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
           .divFrame .divTitle span{float:left;padding:2px}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .txt{border:#666 1px solid;padding:2px;width:118px;float:left;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:80px;float:left;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              <span>姓名：</span>
              <input id="txtName" type="text" class="txt" />
              <input id="Button1" type="button" 
                     class="btn" value="请求数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
    </script>
</body>
</html>

UserInfo.aspx文件中

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<% 
    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
    string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
    if (strName == "缘灭")
    {
        strHTML += "姓名：缘灭<br>";
        strHTML += "性别：男<br>";
        strHTML += "邮箱：[email protected]<hr>";
    }
    else if (strName == "李xx")
    {
        strHTML += "姓名：李xx<br>";
        strHTML += "性别：女<br>";
        strHTML += "邮箱：[email protected]<hr>";
    }
    strHTML += "</div>";
    Response.Write(strHTML);
%>

注意：客户端向服务器传递参数时，使用的格式是
{key0:value0,key1:value1,…},
"key0"为参数名称，"value0"为参数的值。如果参数的值是中文格式，必须通过使用encodeURI() 进行转码，当然，在客户端接收时，使用decodeURI()进行解码即可。

2. jQuery中的post( )方法

$.post()，也是带参数向服务器发出数据请求，本质上与 $.get()没有太大的区别。所不同的是get方式不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风险。而以post方式则不存在这两个方面的不足。

3. jQuery中的$.ajax()方法

在jQuery中，$.ajax()是最底层的方法，也是功能最强的方法。其调用的语法格式为：

$.ajax( [options] )

其中可选项参数[options]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应后回调的数据，其部分名称如下表所示：

参数名	类型	描述
url	String	发送请求的地址（默认为当前页面）
type	String	数据请求方式（post或get）默认为get
data	String或Object	发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么该字符串将附在url的后面。
dataType	String	服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为：html，script，text，xml，json。
success	Function	请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，另一个是strStatus，用于描述状态的字符串。
error	Function	请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。

下面举例说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/template.js"></script>
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .clearfix:after{display: block;clear: both;content: "";visibility: hidden;height: 0;}
        .clearfix{zoom:1;} 
        .fl{float: left;}
        .fr{float: right;}

        .touzi_free_list {height: 400px;overflow-y: auto;width: 330px;margin: 50px auto;border: 1px solid #eaeae2;}
        .touzi_free_list ul li {border-bottom: 1px solid #eaeae2;overflow: hidden;clear: both;}
        .touzi_free_list ul li a {display: block;padding: 16px 10px 12px;}
        .touzi_free_list .audi_tt .audi_h3 {font-size: 14px;color: #333333;font-weight: normal;line-height: 22px;margin-bottom: 5px;}
        .touzi_free_list .audi_tt .audi_p {font-size: 12px;color: #666666;font-weight: bold;}
    </style>
</head>
<body>   
    <div class="touzi_free_list">
        <ul id="js_auditionBox"></ul>
    </div>
    <script id="js_tmpAuditionItem" type="text/html">
        <li class="{[ if active ]} active {[/if]} audition_li clearfix" data-type="{[format]}"  data-key="{[url]}">
            <a href="/videoplay?id={[id]}&tid={[teacher_id]}" class="clearfix" data-id="{[id]}">
                <div class="audi_tt fl">
                    <h3 class="audi_h3">{[updated_at]}</h3>
                    <p class="audi_p">讲师：{[product_title]}</p>
                </div>
            </a>
        </li>
    </script>
    <script>
        $.ajax({
            type: 'post',
            url: 'http://mapi.ktkt.com/mall/v1/skulist',
            dataType: 'json',
            success: function (data) {
                console.log(data.list);
                var a = data.list;
                var html = '';
                for (var i = 0; i < a.length; i++) {
                    html += template('js_tmpAuditionItem', a[i]);
                }
                $('#js_auditionBox').append(html);
            }
        }) 
    </script>
</body>
</html>