前言：

前面學了基礎的ajax感覺繁瑣的真的就只想貼上複製一鍵到位，本想著實現一個省市二級聯動的功能，google了一下程式碼，真的是跟裹腳布一樣又臭又長，就光那提取元素資料，建立元素，新增資料就看的煩人。
還好之前學過jquery，知道它是可以完美地封裝javascript的操作，果然嘿真簡單。
本來三十來行的建立ajax連接獲取後臺資料，就給我一行程式碼壓縮，真的是越發展越簡單。

我是直接看這個的：很好理解

注意下：

GET可能得到的是快取資料
POST每次都隨著請求提交到後臺，所以沒有資料殘留瀏覽器

GET一般都是得到txt之類的文字資料，是單方面的

要使用Jquery首先得載入它：

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

Jquery一般有四種方式的ajax：

第一種：load，從伺服器載入資料，並把返回的資料放入被選元素中

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton"
 
).click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失敗："+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
 
</script>

下面的例子把 "demo_test.txt" 檔案中 id="p1" 的元素的內容，  
載入到指定的 <div> 元素中：
例項：
$("#div1").load("demo_test.txt #p1");

第二種：GET方式：

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});
</script>

第三種：POST方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是誰",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

POST要和後臺Servlet互動：

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");

後臺輸出：

我是誰
12

要訪問後臺servlet也可以直接如此寫地址：

$.get("JsonServlet", 

第四種：getJSON方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是誰",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返回的就直接是json格式的物件，無需JSON.parse的方法轉換。

注意：不管是哪種方式後臺都有兩種方式和前臺互動：

第一種後臺互動：直接拼接字串。

response.getWriter().  
print("{\"name\":\"愛你\",\"age\":12}");

第二種 傳入JSON物件：

JSONObject jsonObject =  
new JSONObject("{'name':'愛你','age':12}");
response.getWriter().print(jsonObject);

相同的最終傳遞給前臺的時候都預設以字串的形式傳遞過去，
注意的是除了getJSON方式 前臺可以使用兩種方式來將字串轉換成js物件：

1. eval（）函式  ：不推薦，有隱患 會執行其他js操作
2. JSON.parse（）函式 ：推薦：只執行物件轉換操作

你們是不是還要問 不是有五種嗎 為啥子前面就講了四種？

沒錯 還有一種：

第五種：jQuery.ajax()：

執行非同步 HTTP (Ajax) 請求

該方法是 jQuery 底層 AJAX 實現，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。簡單易用的高層實現見 .get,$.get,$.post 等。$.ajax() 返回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函式，除非你需要操作不常用的選項，以獲得更多的靈活性。
可以這麼理解：
前四種是高階方法，是對ajax（）進行了封裝，更加簡潔。可以理解為Jquery和JavaScript之間的關係。
$.ajax的一般格式

$.ajax({

 type: 'POST',

 url: url ,

data: data ,

success: success ,

dataType: dataType

});

$.ajax的引數描述

引數 描述
url 必需。規定把請求傳送到哪個 URL。
data    可選。對映或字串值。規定連同請求傳送到伺服器的資料。
success(data, textStatus, jqXHR)    可選。請求成功時執行的回撥函式。
dataType    
可選。規定預期的伺服器響應的資料型別。

預設執行智慧判斷（xml、json、script 或 html）。

舉例：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.ajax({
                url : "/Json/JsonServlet",
                type : "POST",
                async : true,
                dataType : "json",
                data : {
                    name : "前臺資料",
                    age : 12
                },
                success : function(result) {
                    $("#mydiv").html(result.name);
                },
                error : function(xhr) {
                    alert("錯誤提示： " + xhr.status + " " + xhr.statusText);
                }
            });
        });
    });
</script>

後臺：

        request.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));

後臺輸出：

前臺資料
12

注意：
data還可以用字串拼接：一樣的效果 多個引數中間要用&分割

data : "name=前臺資料string&age=12",

那什麼時候使用呢？

$.post、$.get是一些簡單的方法，  
如果要處理複雜的邏輯，還是需要用到jQuery.ajax()

該方法通常用於其他方法不能完成的請求，比如網址錯誤。

如果是表單提交的 可以參照我開頭最後一個連結

·摘錄別人的資料：·

三、區別

• GET - 從指定的資源請求資料，傳送至伺服器的key/value資料會作為QueryString附加到請求URL中,伺服器返回資料的格式其實是字串形式，並不是我們想要的json資料格式
• POST - 向指定的資源提交要處理的資料,這個函式跟.get()參數差不多，多了一個type參數，type為返回的數據類型，可以是html,xml,json等類型，如果我們設置這個參數為：json，那麼返回的格式則是json格式的，如果沒有設置，就和$.get()參數差不多，多了一個type參數，type為返回的數據類型，可以是html,xml,json等類型，如果我們設置這個參數為：json，那麼返回的格式則是json格式的，如果沒有設置，就和$.get()返回的格式一樣，都是字串的
• getJSON-使用 AJAX 請求來獲得 JSON 資料,使用JSON相比傳統的通過 GET、POST直接傳送“裸體”資料，在結構上更為合理，也更為安全。至於jQuery的getJSON()函式，只是設定了JSON引數的
  ajax()函式的一個簡化版本。這個函式也是可以跨域使用的，相比get()、post()有一定優勢。另外這個函式可以通過把請求url寫 成”myurl?callback=X”這種格式，讓程式執行回撥函式X。
  
• ajax()-$.ajax()
  返回其建立的 XMLHttpRequest 物件

最後一種方式是依附於表單：表單的區域性重新整理
序列化表單方法：
serialize():將表單內容序列化成一個字串。

serializeArray()：將表單內容序列化成一個物件陣列

這裡只介紹：serialize()
看script：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            //var frm=$("#form1").serializeArray();
            var frm = $("#form1");
            $.ajax({
                url : frm.attr("action"),
                type : frm.attr("method"),
                async : true,
                data : frm.serialize(),
                //var data=$("#form1").serializeArray();

                success : function(data) {
                    alert("ok");
                },
                error : function(data) {
                    alert(data.status);
                }
            });
        });
    });
</script>

form表單：

    <form id="form1"
        action="${pageContext.request.contextPath}/ClassServlet" method="POST">
        <input type="text" name="name" /> <input type="password"
            name="password" /> <input type="button" id="mybutton" value="點我" />
    </form>

注意：
使用：serialize()

這時表單的按鈕的type不可以是submit，否則自提交資料，  
也就是自動重新整理； 用Ajax的serialize()提交表單，  
如果input的type為submit，提交時就會自動重新整理，  
所以，用serialize()提交表單的時候最好把type改為button.