淺談JQuery中的AJax使用

• 在切入正題之前，我希望大家能帶著問題去閱讀，比如：jQuery中AJax有哪些？？？

• 我們都知道，JQuery對AJax進行了封裝，但是你知道它究竟分成了幾種封裝，每種封裝的內容和用法又是什麼嗎？？

• 好了，帶著這些問題往下看，希望我的淺淺的認識能夠幫到和我一樣曾經困惑的人…

一、3層封裝概述

• 1. 第一層，也是最底層的封裝方法：$.ajax()

• 2. 第二層，我們平時使用頻率最高的一層：load()、$.get()、$.post()

• 3. 第三層，我們會在有些特殊情況下使用$.getScript()、$.getJSON()

二、詳情分述

首先我們要說是最常用的一層，也就是第二層。

1) load()
    作用：能載入遠端HTML程式碼並插入到DOM中。
    用法:load(url, [data], [callback])
    引數解析：
        1.url: string，請求html的URL地址
        2.data(可選): object，傳送至伺服器的資料
        3.callback(可選): function, 請求完成時 的回撥函式，無論請求成功或者失敗
    用例1:載入HTML文件

        $(function() {
            $(".className"
 
).load("test.html");
        })

    用例2:篩選載入的html文件

        $(function() {
            //divName是test.html中一個div的類名,使用id用#
            $(".className").load("test.html  .divName")
        })      

    用例3:請求方式

        //load方法會根據引數決定請求的方式，如果沒有引數面採用GET方式、有引數採用POST方式、

        $(function() {
            $(".className"
 
).load("test.php", {"username" : "admin", "password" : "pwd"}, 
                function()
                {
                    //TODO
                })
            }
        })

    用例4:回撥引數

        //在回撥函式中執行載入完成之後的操作、
        $(function() {
            $(".className").load("test.php", {...}, 
                function(responseText, textStatus, XMLHttpRequest) 
                {
                    //responseText:   請求返回的內容
                    //textStatus:     請求狀態:success、error、 motmodified、timeout 4種
                    //XMLHttpRequest: XMLHttpRequest物件
                });
        })      

注意：在load方法中，無論ajax請求是否成功，只要請求完成，回撥函式就會被觸發。

2) $.get() 和 $.post()

提醒：$.get() 和 $.post()方法都是JQuery中的全域性函式。

作用:通過GET方式來進行非同步請求
用法:$.get(url, [data], [callback], [type])
引數解析:
    前三個引數用法與load()方法一樣
    type(可選): string, 伺服器返回資料的格式,包括 xml、html、script、json、text、default

用例1:與load的回撥函式不同

    $(function() {
        $(".className").click(function() {
                $.get("getTest.php", {"username" : "admin", "password" : "pws"}, 
                    function(data, textStatus) {
                        //注意:get的回撥函式只有兩個引數，而且只有當資料成功返回之，才會呼叫，與load方法不同
                        //data:         返回的內容(可以是:XML、JSON、html片段)
                        //textStatus:   請求狀態(success、error、notmodified、timeout)
                    })
        })
    })  

用例2:post()方法

補充: 它與$.get()的結構和使用方式都相同，不過它們之間仍然有區別:
    1)GET請求會將引數跟在url後面，明文傳遞；而POST請求則是最為HTTP訊息的實體內容傳送給文字伺服器
    2)GET方式對傳遞的資料大小限制(通常不同大於2kb)，而使用post方式傳遞，資料量要比get大的多(理論上不受限制)
    3)GET方式請求的資料會被瀏覽器快取起來，因此其他人就可以從瀏覽器的歷史記錄中讀取到資料，例如賬號和密碼等。
    4)GET方式和POST方式傳遞的資料在伺服器端的獲取方式也不同。

未完待續…