jQuery粗略源码解析9 Ajax请求

1 基础方法

1.1 $.ajax(options)方法

options常用参数解释：

• url :string 请求的地址
• type： string 请求的类型
• timeout: number 请求超时时间
• data: object/string 传给服务器的数据
• dataType:string 预期服务器返回数据的类型：xml,html,script,json,jsonp,text
• async:Boolean 是异步吗
• cache: Boolean 是缓存吗
• global：Boolean 是全局触发Ajax吗
• context:Object 改变作用域，默认是传入ajax的options参数
• contentType: string 内容编码类型
• jsonp:string jsonp请求中重写回调函数的名字
• beforeSend: Function 发送前调用
• complete: 请求完成后调用
• error:请求错误调用
• success: 请求成功调用

$.ajax({
        url:"data.php",
        type:"get",
        cache:false,
        success:function (data) {
            console.log(data);//模拟数据
        }
    }).done(function (data) {
        console.log("请求成功"+data)
    });

$.ajax({
    url:"data/Official-website.json",
    type:"get",
    cache:false,
    dataType:"json"
}).done(
    function (data) {
        data1 = data.websites;
        var html = "";
        $.each(data1, function (i, item) {
            html += " <li><a href='" + item.site + "'>" + item.name + "</a></li>"
        });
        $("p:contains('企业官网')").next("ul").append(html);

        data2 = data.works;
        html = "";
        $.each(data2, function (i, item) {
            html += " <li><a href='" + item.site + "'>" + item.name + "</a></li>"
        });
        $("p:contains('工作相关')").next("ul").append(html);

        data3 = data.source;
        html = "";
        $.each(data3, function (i, item) {
            html += " <li><a href='" + item.site + "'>" + item.name + "</a></li>"
        });
        $("p:contains('图片素材')").next("ul").append(html);

        data4 = data.other;
        html = "";
        $.each(data4, function (i, item) {
            html += " <li><a href='" + item.site + "'>" + item.name + "</a></li>"
        });
        $("p:contains('其他大站')").next("ul").append(html);
    }
);

---

2 便捷方法

2.1 load(url, [data], [callback])

载入远程 HTML 文件代码并插入至 DOM 中。

//.load请求页头页尾
$(".header").load("data/header.html");
$(".footer").load("data/footer.html");

2.2 $.get(url,[data],[fn],[type])

相当于：

$.ajax({
        url:"data.php",
        type:"get",
        data:{},
        success:function () {
            //some code
        },
        dataType:""
    })

2.3 $.post(url,[data],[fn],[type])

相当于：

$.ajax({
        url:"data.php",
        type:"post",
        data:{},
        success:function () {
            //some code
        },
        dataType:""
    })

2.4 $.getScript(url,[callback])

相当于：

$.ajax({
        url:"data.php",
        type:"get",
        data:undefined,
        success:function () {

        },
        dataType:"script"
    })

2.5 $.getJSON(url,[data],[fn])

相当于：

$.ajax({
        url:"data.php",
        type:"get",
        data:undefined,
        success:function () {

        },
        dataType:"json"
    })

---

3 全局事件

• ajaxStart(callback) 请求开始时执行函数

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

• ajaxSuccess(callback) 请求成功时执行函数
• ajaxComplete(callback) 请求完成时执行函数
• ajaxSend(callback) 请求发送前执行函数
• ajaxError(callback) 请求发生错误时执行函数
• ajaxStop(callback) 请求结束时执行函数。
  

  ---

4 工具函数

• serialize()序列表表格内容为字符串。
• serializearray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

<form action="">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="content"></label>
    <textarea id="content" name="content"></textarea>
    <input type="button" value="提交" id="send">
</form>
<script>
$("#send").click(function () {
    $.post("data.php",$("form").serialize(),function (data) {
        console.log($("form").serialize());
        //username=bolala&content=11
        console.log($("form").serializeArray());//对象数组

    })
})