jQuery入門筆記之（五）jQuery中的Ajax

轉載自我的博客

---

關於Ajax的概述就不說了，有興趣本身去找一下吧，而且建議去我博客看關於原生js實現Ajax函數的實現，但願有所幫助。服務器的配置，那篇文章也給出了地址。
Ajax入門（一）從0開始到一次成功的GET請求
Ajax入門（二）Ajax函數封裝

jQuery中的Ajax

jQuery 對 Ajax 作了大量的封裝，咱們使用起來也較爲方便，不須要去考慮瀏覽器兼容性。對於封裝的方式，jQuery採用了三層封裝：最底層的封裝方法爲：$.ajax()，而經過這層封裝了第二層有三種方法：.load()、$.get()和$.post()，最高層是$.getScript()和$.getJSON()方法。

Ajax中的load()方法

/**
 * Ajax中的load方法（局部方法，能夠直接綁定在須要獲取的元素上）
 * @param {String}        url  必須，獲取文件地址
 * @param {JSON or String}          可選，鍵值對方式的請求參數或者（使用鍵值對形式，請求將轉化成post）
 * @param {Function}      可選，請求成功的回調函數
 *   @config   {String}   responseText         得到字符串形式的響應數據
 *   @config   {String}   textStatus            文本方式返回HTTP狀態碼
 *   @config   {Object}   XMLHttpRequest        xhr對象，有多種屬性
 */
.load(url, data, complete(responseText, textStatus, XMLHttpRequest));

例以下面這段代碼

$('button').click(function () {
    $('#box').load('test.php', {url : 'guowen'});
});

在控制檯能夠看到請求爲POST，（注意：這裏第二個參數如果字符串的狀況，例如"url=guowen"，請求仍然爲GET。）
因此服務器端php文件應該如此設置：

<?php
if ($_POST["url"] == "guowen") {//get請求把POST更改一下就行了
    echo "<a href='http://guowenfh.github.io/'>三省吾身丶丶</a>";
} else {
    echo "其餘網站";
}
?>

關於XHR對象上的屬性，和HTTP狀態碼，參考我原來的博客。

$.get()和$.post()

.load()方法是局部方法，由於他須要一個包含元素的 jQuery 對象做爲前綴。而$.get()和$.post()是全局方法，無須指定某個元素。對於用途而言，.load()適合作靜態文件的異步獲取，而對於須要傳遞參數到服務器頁面的，$.get()和$.post()更加合適。

$.get()方法有四個參數，前面三個參數和.load()同樣，多了一個第四參數type，即服務器返回的內容格式：包括xml、html、script、json、jsonp和text。第一個參數爲必選參數，後面三個爲可選參數

GET方式請求會直接在html後以?Key=value跟隨，因此，有三種形式請求數據，

1. 直接跟在url後

2. 字符串形式的"url=guowen"

3. 鍵值對形式的{url:"guowen"}

POST請求方式除去不能直接跟在url後以外，剩餘兩個，使用方法同樣

注意: 與.load()方法不一樣的是：.load()方法根據第二個參數的不一樣類型，請求方式會改變，但這裏已是兩個獨立的方法了，因此請求類型不會進行轉換。

第四個參數通常都不進行設置，jQuery會自動轉換其類型。強制設置時，有可能會連標籤一塊兒返回。

至於POST與GET方式請求的差異，在我原來的博客中也有寫到，這裏就不贅述了。

$.getScript()和$.getJSON()

jQuery提供了一組用於特定異步加載的方法：$.getScript()，用於加載特定的JS文件；$.getJSON()，用於專門加載JSON文件。

$.getJSON()方法與以前的使用方法相似，就是把第四個參數，類型強制設置成了JSON。

有時咱們但願可以特定的狀況再加載JS文件，而不是一開始把全部JS文件都加載了，這時就可使用$.getScript()方法。

//點擊按鈕後再加載 JS 文件
$('input').click(function () {
    $.getScript('test.js');
});

$.ajax()

$.ajax()是全部 ajax 方法中最底層的方法，全部其餘方法都是基於$.ajax()方法的封裝。這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。

參數不少有興趣的本身去看jQuery.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，則使用

最經常使用的以下：

$('button').click(function () {
    $.ajax({
        type : 'POST', //這裏能夠換成 GET
        url : 'test.php',
        data : {
            url : 'guowen'
        },
        success : function (response, stutas, xhr) {
            $('#box').html(response);
        }
    });
});

注意：對於data屬性，若是是GET、模式，可使用三種以前說所的三種形式。若是是POST模式可使用以前所說的兩種形式。（這裏不須要考慮以前的data類型的問題了，由於指定了請求類型，不會轉化）

表單序列化

使用表單序列化方法.serialize()，會智能的獲取指定表單內的全部元素。這樣，在面對大量表單元素時，會把表單元素內容序列化爲字符串，而後再使用Ajax請求。
序列化表單內的元素：data : $('form').serialize()，其他部分相同。

除此以外還能夠直接獲取單選框、複選框和下拉列表框等內容

除了.serialize()方法，還有一個能夠返回 JSON 數據的方法：.serializeArray()。這個方法能夠直接把數據整合成鍵值對的 JSON 對象。
使用方法相同$('form').serializeArray().

有時，咱們可能會在同一個程序中屢次調用$.ajax()方法。而它們不少參數都相同，這
個時候咱們課時使用 jQuery 提供的$.ajaxSetup()請求默認值來初始化參數。

$('form input[type=button]').click(function () {
    $.ajaxSetup({//初始化多個ajax方法相同部分參數，後面再寫ajax的時候，就不用在寫了。
        type : 'POST',
        url : 'test.php',
        data : $('form').serialize()//表單序列化
    });
    $.ajax({
        success : function (response, status, xhr) {
                    alert(response);
                }
    });
});

在使用 data 屬性傳遞的時候，若是是以對象形式傳遞鍵值對，可使用$.param()方法將對象轉換爲字符串鍵值對格式。

主要是針對沒法直接使用表單序列化方法.serialize()的狀況，且傳遞參數爲對象，建議使用該方法進行解析後再進行傳遞。

Ajax進階

加載請求，及錯誤處理。

主要是處理網速較慢的狀況，出現請求時間較長的問題。而此時若沒有一點提示，用戶可能會認爲你的網頁出現了問題。如果能在請求過程當中給用戶一些提示，好比：正在努力加載中…… 。 可能會對用戶更加友好一些。
jQuery提供了兩個全局事件，jQuery 提供了兩個全局事件，.ajaxStart()和.ajaxStop()。
這兩個全局事件，只要用戶觸發了 Ajax，請求開始時（未完成其餘請求）激活.ajaxStart()，請求結束時（全部請求都結束了）激活.ajaxStop()。
值得注意的是，由於是全局事件，因此這兩個方法是直接須要直接綁定到document上的。例如：

$(document).ajaxStart(function(){
    $(".loading").show();
}).ajaxStop(function(){
    $(".loading").hide();
});

固然你也能夠自行在ajax內部進行一些設置,如請求超時時間，該ajax函數是否觸發全局事件等等。以鍵值對的方式寫明就能夠了。

錯誤處理也特別簡單

$.ajax({
    //…………
    timeout : 500,//若是請求時間太長，能夠設置超時
    global : false,//若是某個 ajax 不想觸發全局事件，能夠設置取消
    error : function(xhr,errorText,errorType){//通常都直接用xhr對象
                alert("發生錯誤："+xhr.status);//返回錯誤狀態碼
            }
});

除此以外$.get()、$.post()和.load(),能夠經過連綴處理使用局部.error()方法來處理錯誤，固然還有一個全局的方法：經過全局.ajaxError()事件方法來返回錯誤信息。便可

請求全局事件

jQuery 對於 Ajax 操做提供了不少全局事件方法，除去上面已經提到的.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他們都屬於請求時觸發的全局事件，除了這些，還有一些其餘全局事件：

1. .ajaxSuccess()，對應一個局部方法：.success()，請求成功完成時執行。

2. .ajaxComplete()，對應一個局部方法：.complete()，請求完成後註冊一個回調函數。

3. .ajaxSend()，沒有對應的局部方法，只有屬性 beforeSend，請求發送以前要綁定的函數。

注意：全局事件方法是全部 Ajax 請求都會觸發到，而且只能綁定在 document 上。而局部方法，則針對某個 Ajax。
對於一些全局事件方法的參數，大部分爲對象，而這些對象有哪些屬性或方法能調用，
能夠經過遍歷方法獲得。如：

//遍歷 settings 對象的屬性
$(document).ajaxSuccess(function (event, xhr, settings) {
    for (var i in settings) {
        console.log(i);
    }
});

這些全局方法，在$.ajax()方法中均可以直接以參數中的鍵值對的形式來完成

JSON和JSONP

其實在同一個域中時，只要url的後綴是json的文件的，默認就是json。固然你還可使用$.ajax()方法設置 dataType屬性加載 JSON 文件。

先來試試本地JSON:
php以下：

<?php
    $_arr= array('a'=>1,'b'=>2,'c'=>3);
    $_result = json_encode($_arr);
    echo $_result;
?>

js:

$.ajax({
    type:"post",
    url:"test.php",
    dataType:"json",//由於文件類型是php。可是返回的數據是json，因此必須設置類型，不然返回字符串
    success:function(response,staus,xhr){
        console.log(response.a);//打印出來1
    }
});

實現跨域：這部分須要服務器端配合。

<?php
    $_arr= array('a'=>1,'b'=>2,'c'=>3);
    $_result = json_encode($_arr);
    $_callback = $_GET['callback'];//關鍵在這。配合客戶端JS使用
    echo $_callback."($_result)";//php用點號實現字符串拼接
?>

客戶端實現：

$.ajax({//我本地地址爲http://127.0.0.1:8020/ajax.html
    type:"GET",
    url:"http://localhost/test.php?callback=?",//這樣就能夠實現跨域資源的訪問了，最後的？號，jQuery會自動轉化成字符串
    dataType:"json",//若這裏使用JSONP的話，能夠刪除上面url的「?callback=?」，jQuery會自動處理。
    success:function(response,staus,xhr){
        alert(response.a);
        console.log(response)
    }
});

固然咱們還能夠進行使用$.getJSON()。使用方式同上。

jqXHR對象

在以前，咱們使用了局部方法：.success()、.complete()和.error()。這三個局部方法並非 XMLHttpRequest 對象調用的，而是$.ajax()之類的全局方法返回的對象調用的。這個對象，就是 jqXHR 對象，它是原生對象 XHR 的一個超集。

//獲取 jqXHR 對象，查看屬性和方法
var jqXHR = $.ajax({
    type : 'POST',
    url : 'test.php',
    data : $('form').serialize()
});
for (var i in jqXHR) {
    document.write(i + '<br />');
}

注意：若是使用 jqXHR 對象的話，那麼建議用.done()、.always()和.fail()代
替.success()、.complete()和.error()。覺得在將來版本中，極可能將這三種方法廢棄取消。

//成功後回調函數
jqXHR.done(function (response) {
    $('#box').html(response);
});

使用 jqXHR 的連綴方式比$.ajax()的屬性方式有三大好處：

1. 可連綴操做，可讀性大大提升；

2. 能夠屢次執行同一個回調函數；

3. 爲多個操做指定回調函數；

PS：不少都只作了一下測試，並不能熟練應用，先過一遍吧，之後再來熟練掌握。