jQuary中ajax的簡單應用

xiri_發表於2020-11-10

jQuary中ajax的簡單應用

ajax

簡介：

​ Ajax = Asynchronous Javascript And XML （非同步 JavaScript 和 XML）

​ Ajax 是指一種建立互動式、快速動態網頁應用的網頁開發技術，無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

​ 通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

工作原理：

​ Ajax的工作原理相當於在使用者和伺服器之間加了—箇中間層(AJAX引擎)，使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器。像—些資料驗證和資料處理等都交給Ajax引擎自己來做,，只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。

​ 和傳統的jsp頁面直接連線servlet進行整個頁面的跳轉和重新整理相對比，ajax能夠在不重新整理整個頁面的前提下直接連線後臺的servlet。

​ 使用ajax方式與servlet進行互動，可以減少jsp頁面中小指令碼的使用，減少前後端的耦合度。

傳統方式：（瀏覽器的普通互動，即普通情況下jsp/html和servlet的互動）
在這裡插入圖片描述

Ajax方式：（瀏覽器的ajax互動，即jsp/html中使用ajax與servlet進行非同步互動，實現頁面的區域性更新）

在這裡插入圖片描述

從上圖可直觀見到，採用ajax方式進行互動，多個請求非同步進行，互不干擾。

ajax( )方法的實現方式：

$.ajax({ 
	url:請求地址,
	type:"get | post | put | delete " 預設是get, 
	data:請求引數 {"id":"123","pwd":"123456"}, 
	dataType:請求資料型別"html | text | json | xml | script | jsonp ",
    success:function(data,dataTextStatus,jqxhr){ },//請求成功時
    error:function(jqxhr,textStatus,error)//請求失敗時 
})

//編寫上述程式碼時，注意ajax中每一項引數需要採用逗號隔開
//url:請求的路徑  
//type：傳送請求的方式
//data:傳送的資料  
//datatype 返回的資料型別
//success:成功時執行的方法  error：失敗時執行的方法（要麼成功，要麼失敗，兩者必須執行其一）
請求方式type中，我們較為常用的是get和post，兩者的區別：

  • 與傳統方式下 jsp頁面中表單提交中的get和post方式相似，ajax方式採用get方式傳送資料時，在控制檯中可以看到我們傳輸給後臺的資料，而使用post方式則看不到傳輸的資料

  • 與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：

    無法使用快取檔案（更新伺服器上的檔案或資料庫）；

    向伺服器傳送大量資料（POST 沒有資料量限制）；

    傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠。

什麼時候會進入error方法，主要有以下幾種情況：
  1. url出錯：url路徑不能出現中文，以及必須要是可以跳轉到的地址
  2. dataType錯誤：後臺返回的資料型別和前臺需要接收的不一致，或者後臺返回的資料不符合規範都會跳入error，例如json格式返回時寫的是{id:1,name:“張三”}（錯），正確的格式應該為{“id”:1,“name”:“張三”}
  3. data錯誤：前臺向後臺發出請求的資料不能不寫，就算不傳送資料也要傳{}，不然就會返回xml格式，並提示parsererror.data:"{}"；前臺和後臺之間傳遞的引數必須遵循ajax支援的編碼格式，引數中不能含有特殊字元
  4. async請求同步非同步錯誤：async預設為true，即支援非同步請求，若想同步請求（一個ajax執行後再進行寫一個ajax的執行），則要將async設定為false
get()或post() 方法通過遠端 HTTP 請求載入資訊(可簡化書寫方式):
//get()方法
$.get(url,data,function(result) { //省略將伺服器返回的資料顯示到頁面的程式碼 });

//post()方法
$.post(url,data,function(result) { //省略將伺服器返回的資料顯示到頁面的程式碼 });

//url:請求的路徑  
//data:傳送的資料  
//function(result){}: success時執行的方法

//上面兩種方法預設接受的返回資料型別為text型別
//當我們要接受其他形式的資料時，可直接在function方法後加上要接受的資料型別，例：
$.post(url,data,function(result) { //省略將伺服器返回的資料顯示到頁面的程式碼 }，datatype);

如果後臺返回的資料為json格式，則在後臺需要物件轉換成json，否則會報錯。在專案中大多的方法接收的還是String型別的資料，此時就涉及到使用GSON將物件轉換成String型別的json物件，此處不詳細展開。

最後，引進一個簡單事例（jsp頁面），實現的是模仿微博的點讚的後臺功能：

</head>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#zan").click(function (){
                const uid = ${requestScope.uid};
                const zan = $("#zan").val();
                $.ajax({
                    url:"/GreatAjax",
                    type:"post",
                    data:{"uid":uid,"zan":zan},
                    dataType:"JSON",
                    success:function (result){
                        $("#zan").val(result.zan);
                        $("#ag").html(result.allGreat);
                    },
                    error:function (result){
                    	console.log("出錯了出錯了");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form>
        使用者編號：<span>${requestScope.uid}</span><br><br>
        使用者姓名：<span>${requestScope.uname}</span><br><br>
        <input type="button" value="${requestScope.zan}" id="zan"><br><br>
        總點贊數：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>
${requestScope.zan}" id="zan"><br><br>
        總點贊數：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>

相關文章