今天汇总下Jquery的ajax请求，这是Ajax技术的第二篇。

语法

$(document).ready(function () {
    $.ajax({
        url: "http://jsonplaceholder.typicode.com/posts/1",
        type: "get",
        data: '',
        beforeSend(xhr) {
            console.log('数据请求前：', xhr)
        },
        success(result,status,xhr) {
            console.log(result.body)
        },
        error(xhr, status, error) {
            console.log('xhr：', xhr)
            console.log('状态：', status)
            console.log('报错信息：', error)
        }
    })
})

jquery的ajax()方法写入的参数是一个整合的对象，对象中有很多属性，我们常用的有如下：
type, url, data, dataType, contentType, timeout,
beforeSend(xhr) , success(result,status,xhr), error(xhr,status,error)

post

post与get请求类似，就是多了一个data对象的数据提交。

$.ajax({
    url: "postUrlAddress",
    type: "post",
    data: {
        userId: 25
    },
    async: true,
    beforeSend(xhr) {
        console.log('数据请求前')
    },
    success(res) {
        console.log(res)
    },
    error(error) {
        console.log('报错信息：', error)
    }
})

封装

$.ajax使用频繁，每次都写这么长的代码太啰嗦，于是我们自己封装下。

let postFetch = function (params) {
    $.ajax({
        url: params.url,
        type: "post",
        data: params.dataObj,
        async: true,
        headers: {
            "token": '_this.getLocalStorage("token")'
        },
        beforeSend(xhr) {
            console.log('数据请求前')
        },
        success(res) {
            if (res.code === 403) {
                return
            } else if (res.code === 0) {
                console.log(res.msg)
            } else {
                params.callback(res)
            }
        },
        error(error) {
            console.log('报错信息：', error)
        }
    })
}

调用方法

postFetch({
    url: 'requestUrl',
    dataObj: {
        name: 'mark'
    },
    callback(res) {
        $('#showTitle').html(res.name + res.id)
    }
})

$.when() 方法

.ajax()的callback(res)函数中，当业务比较复杂时，代码的可读性就变得非常差。$.when()的出现很好的解决了该问题。

$(function () { 
    var d1 = $.Deferred();
    var d2 = $.Deferred();
    $.when( d1, d2 ).done(function ( v1, v2 ) {
        alert( v1 ); // "Fish"
        alert( v2 ); // "Pizza"
    });
    d1.resolve( "Fish" );
    d2.resolve( "Pizza" );
})