初学Ajax(三)

$.ajax()

$.ajax()是所有ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。

$.ajax()方法对象参数表

参数	类型	说明
url	String	发送请求的地址
type	String	请求方式：POST或GET，默认GET
timeout	Number	设置请求超时的时间(毫秒)
data	Object或String	发送到服务器的数据，键值对字符串或对象
dataType	String	返回的数据类型，比如html、xml、json等
beforeSend	Function	发送请求前可修改XMLHttpRequest对象的函数
complete	Function	请求完成后调用的回调函数
success	Function	请求成功后调用的回调函数
error	Function	请求失败时调用的回调函数
global	Boolean	默认为true，表示是否触发全局Ajax
cache	Boolean	设置浏览器缓存响应，默认true。如果dataType类型为script或jsonp则为false
content	DOM	指定某个元素为与这个请求相关的所有回调函数的上下文
contentType	String	指定请求内容的类型，默认为application/x-www-form-urlencoded
async	Boolean	是否异步处理。默认为true，false为同步处理
processData	Boolean	默认为true，数据被处理为URL编码格式。如果为false，则阻止将传入的数据处理为URL编码的格式
dataFilter	Function	用来筛选响应数据的回调函数
ifModified	Boolean	默认为false，不进行头检测。如果为true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的
jsonp	String	指定一个查询参数名称来覆盖默认的jsonp回调参数名callback
username	String	在HTTP认证请求中使用的用户名
password	String	在HTTP认证请求中使用的密码
scriptCharset	String	当远程和本地内容使用不同的字符集时，用来设置script和jsonp请求所使用的字符集
xhr	Function	用来提供XHR实例自定义实现的回调函数
traditional	Boolean	默认为false，不使用传统风格的参数序列化。如果为true，则使用。

html(部分)代码如下：

<input type="button" value="异步加载数据" />

post方式接受的test.php：

<?php
    if($_POST['url'] == 'ycku') {
        echo "瓢城Web俱乐部";
    } else {
        echo "木有！";
    }
?>

jQuery代码如下：

$("input").click(function() {
    $.ajax({
        type:"post", //这里可以换成GET
        url:"test.php",
        data:{
            url:"ycku"
        },
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

注意：对于data属性，如果是GET模式，可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。

表单序列化

Ajax用的最多的地方莫过于表单操作，而传统的表单操作是通过submit提交将数据传输到服务器端。如果使用Ajax异步处理的话，我们需要将每个表单元素逐个获取方才能提
交，这样工作效率就大大降低。

有html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>

    <form>
        用户名：<input type="text" name="user" />
        邮　件：<input type="text" name="email" />
        <input type="button" value="提交" />
    </form>

    <div id="box">
        
    </div>
</body>
</html>

post方式接受的user.php：

<?php
    echo $_POST['user'].' - '.$_POST['email'];
?>

常规形式的表单提交：

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:{
            user:$("form input[name=user]").val(),
            email:$("form input[name=email]").val()
        },
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

以上方法的缺点：表单元素特别多的情况下，写起来非常麻烦，容易出错，复制提交的JS内容时，data属性需要修改的非常多。而使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax请求。

使用.serialize()序列化表单内容：

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:$("form").serialize(), //一句话搞定
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

alert($("form").serialize()); //字符串形式的键值对，并且还对url进行了编码

.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。

如html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>

    <form>
        用户名：<input type="text" name="user" />
        邮　件：<input type="text" name="email" />
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
        <input type="button" value="提交" />
    </form>

    <div id="box">
        
    </div>
</body>
</html>

使用序列化得到单选框中的元素内容：

$("form input[name=sex]").click(function() {
    $("#box").html(decodeURIComponent($(this).serialize())); //返回 sex=男/女
});

除了.serialize()方法，还有一个可以返回JSON数据的方法：.serializeArray()。这个方法可以直接把数据整合成键值对的JSON对象。

$("form input[name=sex]").click(function() {
    //console.log($(this).serializeArray()); //控制台输出Array[Object] 即{name:"sex",value:"男"}/{name:"sex",value:"女"}
    var json = $(this).serializeArray();
    $("#box").html(json[0].name + "=" + json[0].value);
});

有时，我们可能会在同一个程序中多次调用$.ajax()方法，而它们很多参数都相同，这个时候我们可以使用jQuery提供的$.ajaxSetup()方法请求默认值来初始化参数。

//初始化重复的属性
$.ajaxSetup({
    type:"post",
    url:"user.php",
    data:$("form").serialize()
});
$("form input[type=button]").click(function() {
    $.ajax({
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

在使用data属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式。

alert($.param({  // 返回，如：user=123&email=123%40163.com
    user:$("form input[name=user]").val(),
    email:$("form input[name=email]").val()
}));

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:$.param({
            user:$("form input[name=user]").val(),
            email:$("form input[name=email]").val()
        }),
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

注意：使用$.param()将对象形式的键值对转为URL地址的字符串键值对，可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递obj对象要谨慎。