ajax詳解

ajax詳細

 

1.概述

　　 ajax（Asynchronous JavaScript and XML）異步的javascript和xml。

　　ajax的出現我覺得是純粹為了滿足日益發展的社會的需要，沒有ajax之前，前台與后台的交互都是同步的，每次后台傳回來的數據要想更新在前台界面上，都需要刷新界面，例如做一個登錄功能，用戶輸入用戶名和密碼，傳到后台驗證，如果后台驗證完畢之后傳回賬戶名或密碼錯誤，那么前台就要刷新界面，再提示出錯誤信息，這種用戶體驗太過於刺激，目前的用戶絕對享受不了，於是，踏着輕快的步伐，ajax來了，第一個使用ajax的瀏覽器引擎是IE，是從IE5開始，沒錯，這個作為web開發的程序猿最仇恨的瀏覽器引領了好多新科技。這樣一來，用戶的體驗直接爆表了。

 

 

2.ajax解釋

　　ajax有兩種實現方式，其實原理都是應用的javascript。第一種是原生的ajax，就是用原生的javascript實現的，這種方式應用的很少，但是能體現出ajax的實現原理，我在這里就不做過多的陳述了，有興趣的小伙伴可以自己去查找一些資料。今天着重要說的是js的一個nb的封裝庫實現的ajax，沒錯，就是jqury，這個庫實在是太好了，愛不釋手啊，為什么這么多js的封裝庫，但是jquery最流行呢，因為它免費啊！免費的東西我們在用的時候，感覺到很爽，開個玩笑，jquery之所以流行主要的原因是因為它是一個輕量級的js封裝庫，而且封裝的也非常好，但是也跟免費有一點關系。還有一些常用的js封裝庫，例如ReactJS、Angular、vue.js、Meteor、Ember.js。

　　jquery實現的ajax有三種表現形式：

　　 (1)$.ajax({...})

　　(2)$.get(...)

　　(3)$.post(...)

　　 沒錯，$就是jquery中的萬能符號，以上是列出了三種實現方式，其實可以看出來，后面的兩個是根據請求方式命名的，在請求方式中，有七種請求，get、post、delete、head、put、trace、options、connet，除了get和post之外，有的瀏覽器就不支持其它，這里就不說其它的實現方式了。

　　開整......

 

3.ajax的各種實現方式中參數的講解

　　（1）$.ajax({...})

　　　　　　先來看一段代碼

$(function () {
    $.ajax({
        url: "test.json",
        type: "get",
        cache: false,
        async: false,
　　　　 data: null,
        beforeSend: function (request) {
            console.log(request);
            console.log("請求之前");
        },
        complete: function (request, testStatus) {
            console.log("\n");
            console.log("請求完成");
            console.log(request);
            console.log(testStatus);
        },
        success: function (data,textStatus, request) {
            console.log("\n");
            console.log("請求成功");
            console.log(data);
        },
        error: function (request, textStatus, errorThrown) {
            console.log("\n");
            console.log("請求出錯");
            console.log(request);
            console.log(textStatus);
            console.log(errorThrown);
        },
        dataType: "json",
        dataFilter: function (data, type) {
            console.log("\n");
            console.log("攔截成功");
            console.log("攔截的數據為："+data);
            console.log("攔截的數據類型為："+type);
        }
    })
});

　　　　　　這就是ajax請求的示例代碼，可以看到，好像參數很多啊，沒事，咱們慢慢來說

　　　　　 url：請求的地址，上面的代碼是我模擬的json數據，單獨擋在了test.json中，當我們向服務器進行請求時，把這個url換成對應的url就行，注意，url后面是一個字符串，我剛開始學習ajax的時候就是總忘寫那對雙引號。

　　　　   type：請求的類型，就是get請求還是post請求，當然，也可以為其它，但是前提是瀏覽器必須也得支持。默認為get。

　　　　   cache：請求時是否使用瀏覽器緩存的數據，默認為true，即開啟緩存。當dataType為xml時，默認為false。

　　　　   data: 請求的數據，如果是get方式請求，就是拼接在url問號后面的參數，post請求就是在請求參數中的內容。

　　　　   async：是否開啟異步請求，默認為true，我認為，把這個改為false的，都是腦袋里有炮，既然都用ajax了，尋求的就是異步的那種快感。

　　　　   beforeSend：這里的value為一個函數，就是當請求之前執行的函數，這個函數里有一個參數，就是XMLHttpRequest，這個是一些請求的信息，如果此函數返回false，此次請求就會被取消。

　　　　   complete：當請求處理完成之后（success執行完之后）執行的函數，參數為XMLHttpRequest和textStatus，第一個參數和之前的相同，第二個參數為請求的狀態，即error或者success。

　　　　   success：請求成功執行的函數，參數為data、textStatus、XMLHttpRequest，data就是請求回來的數據。

　　　　   error: 當請求失敗時執行的函數，參數為XMLHttpRequest， textStatus、errorThrown，error打印出來的信息就像是java拋出來異常的打印堆棧的信息。

　　　　   dataType：期望被請求方返回的數據類型，常見的有html、xml、json、jsoup、text、script。

　　　　   dataFilter：這個是攔截器，和servlet中的filter是一樣的，回攔截到被請求方返回的數據，data就是被攔截的數據，而type就是dataType中填寫的內容。

　　　　   關於第一種ajax的講解就有目前這些，其實這里面的參數不知這些，但是我列舉出來的都是一些常用的。

　　（2）$.get(...)

　　　　  這種ajax的實現方式就是將上一種的ajax進行了封裝。看一下參數。

　　　　  $.get(url, data，success)。

　　　　  不多介紹了，和上面的參數是一樣的，單數注意，這里的參數就不是對象了，就是一些類型的參數，回調函數等等。

　　（3）$.post(...)

　　　　直接看參數$.post(url, data, success)。

 

4.總結

　　ajax在處理這種異步交互的時候真的很好用，而且還特別靈活，當學會了$.ajax實現方式后，再學剩下的兩種實現方式真的很簡單，不管學習前台還是后台的程序猿都需要會使用。多看，多用吧。