前端提高篇(118):了解jquery.ajax()的基本使用

手動封裝的ajax()與jquery.ajax()

之前在這篇文章中，手動封裝了Ajax，形參有：

• method：請求方法
• url：php代碼地址
• callback：回呼函式
• data：傳遞的資料
• flag：是否異步

jquery.ajax()中，對這些功能做了進一步的封裝，部分引數如下：

• type：請求方法 ，對應前面的method
• url：php代碼地址 與前面的url引數是同樣的功能
• success：請求成功時的回呼函式
• error：請求失敗時的回呼函式
• data：傳遞的資料
• async：是否異步，默認true
• cache：是否快取，默認true
• context：為所有 AJAX 相關的回呼函式規定 “this” 值

jquery.ajax()基本使用

GET請求

使用上面提到的那篇文章的案例，用GET請求，獲取后臺的新聞串列，并列印

$.ajax({
    type: "GET",
    url: "./getData.php",
    success: function(data){
        var data = JSON.parse(data);
        console.log(data);
    }
})

$.ajax()引數為物件形式
默認是異步請求，且在此案例，不用傳參，所以沒有寫data和async引數
另：jquery.get()是jquery專門發送get請求的簡易方法

POST請求

向后臺發送用戶名和年齡資料，后臺回傳兩者規范化后的字串并列印”成功“

$.ajax({
    type: "POST",
    url: "./postData.php",
    success: function(data){
        console.log(data);
        console.log('成功')
    },
    data:"username=ccy&age=18"
})

效果:

其中，data標準格式是字串，用&連接起多個引數，也可以寫成物件格式：

$.ajax({
    type: "POST",
    url: "./postData.php",
    success: function(data){
        console.log(data);
        console.log('成功')
    },
    // data:"username=ccy&age=18"
    data: {
        username: "ccy",
        age:18
    }
})

效果一致
另：jquery.post()是jquery專門發送post請求的簡易方法

快取cache

之前我們手動封裝ajax()時，為了避免資料的快取，在請求上增加了時間戳，即使請求同樣的引數，但每次都發送請求；jquery.ajax()中同樣對是否快取做了封裝
快取默認為true,即同一請求只發送一次：
第一次點擊：

第二次點擊：

點擊兩次，請求地址均一致
如果在jquery.ajax()的引數中添加上cache:false，就會給請求加上時間戳，每次請求均會發出
第一次點擊：

第二次點擊：

背景關系context

指的是回呼函式的this指向，默認是jquery.ajax()物件本身

效果：

可以修改this，指向ul，把獲取的新聞串列以li形式加入ul

此時this已指向ul，再把新聞串列插入：

$('button').on("click", function () {
    $.ajax({
        type: "GET",
        url: "./getData.php",
        success: function (data) {
            var data = JSON.parse(data);
            var str = '';
            $.each(data, function(index, ele){
                str += "<li>" + ele.title + "</li>";
            })
            $(this).append(str);
        },
        context:document.getElementsByTagName("ul")[0]
    })
})

請求頭headers

在控制臺的network中，找到Request Headers欄，就會有一個name:ccy

jquery.ajax()高級使用

JSONP使用

借用百度搜索詞功能，輸入關鍵字，在network找到Request URL，修改回呼函式名，去掉不必要的引數，將這個url做為案例

$('button').on("click", function () {
    $.ajax({
        type: "GET",
        url: "https://www.baidu.com/sugrec?prod=pc",
        data:"wd=d&cb=cbs",//拼接引數：關鍵詞和回呼函式名
        crossDomain: true,//跨域
        dataType: "jsonp"//預期服務器回應的資料型別為jsonp
    })
})
function cbs(data){
    console.log(data);
}

效果：

或者不把回呼函式名寫在data引數里，data引數只寫關鍵字：

$('button').on("click", function () {
    $.ajax({
        type: "GET",
        url: "https://www.baidu.com/sugrec?prod=pc",
        data:"wd=d",
        crossDomain: true,
        dataType: "jsonp",
        jsonp: "cb",//用cb引數接受回呼函式名
        jsonpCallback:"cb=cbs"//定義回呼函式名
    })
})
function cbs(data){
    console.log(data);
}

效果一致

再做一次淘寶聯想詞案例

// 給文本框系結input事件
$('input').on("input", function () {
    $.ajax({
        type: "GET",
        url: "https://www.baidu.com/sugrec?prod=pc",
        data: "wd=" + $("input").val(),
        crossDomain: true,
        dataType: "jsonp",
        jsonp: "cb",
        jsonpCallback: "cb=cbs"
    })
})
// 回呼函式
function cbs(data) {
    $("ul").html("").css("display", "none");
    if (data["g"]) {
        console.log(data["g"]);
        var str = '';
        $.each(data["g"], function (index, ele) {
            str += "<li>" + ele.q + "</li>";
        });
        $("ul").append(str);
        $("ul").css("display", "block")
    }
}

html結構：

<div class="wrapper">
    <input type="text" name="" id="">
    <div class="list">
        <ul></ul>
    </div>
</div>

另附：success引數和cb都是定義成功回呼函式，當請求成功，都會被呼叫

作為deferred使用

jquery.ajax()回傳的是deferred物件，可以支持done，always和fail方法的鏈式操作，
還可以使用then：順序呼叫，可以代替done和fail，或者用來確保一些請求的順序進行
1.done、fail的使用：

// 請求成功，執行done；請求失敗，執行fail
//用本地file路徑，即請求失敗
$('button').on('click',function(){
    $.ajax({
        type:"GET",
        url:"./getData.php"
    }).done(function(){
        console.log('success');
    }).fail(function(){
        console.log("fail")
    })
})

2.then的使用

// 請求成功，執行第一個匿名函式；請求失敗，執行第二個匿名函式
$('button').on('click',function(){
    $.ajax({
        type:"GET",
        url:"./getData.php"
    }).then(function(){
        console.log('666')
    },
    function(){
        console.log('nonono')
    })
})

3.always的使用

// 不論請求成功或者失敗，均執行此匿名函式
$('button').on('click',function(){
    $.ajax({
        type:"GET",
        url:"./getData.php"
    }).always(function(){
        console.log('發送了')
    })
})

好文鏈接
好文鏈接