當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery Ajax – Servlets集成：构建完整的应用程序

發布時間：2023/12/3 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery Ajax – Servlets集成：构建完整的应用程序小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網上有很多教程，它們解釋了有關使用servlet和JSP頁面進行Java Web開發的一些知識，但是，我從來沒有找到對于初學者來說足夠簡潔，簡單的教程。這樣的教程應該解釋創建一個簡單的Web應用程序的整個過程，包括前端，后端，最重要的是，人們可以用來與它們兩者交互的方式 。僅僅展示如何從服務器獲取信息還不夠，了解如何以結構化方式區分信息以及知道如何通過應用程序環境對后端進行更改也很重要。

我們在本文中希望實現的是指導創建完整的“玩具” Web應用程序的整個過程。從某種意義上說，它是一個“玩具”應用程序，它只做兩件事，并且我們沒有使用任何額外的功能來使環境變得漂亮。該應用程序的目的很簡單：

添加一個帶有專輯列表的樂隊名稱（用逗號分隔），然后按“提交”按鈕將其添加到數據庫中。
按“顯示樂隊！” 按鈕以獲取樂隊列表，或“顯示樂隊和專輯！” 按鈕以獲取帶有其專輯的樂隊列表。

該應用程序的外觀是裸機越好 ，但其背后的代碼是你需要開始創建自己的動態Web應用程序，這是最通常稱為CRUD應用程序的一切（C reate，R EAD，U PDATE，d elete ）。之所以這樣稱呼它們是因為它們的所有功能都可以抽象為這些非常基本的命令。

在逐步創建應用程序之前，讓我們看一下本示例中將要使用的所有工具：

蝕月神
Java 7
Tomcat 7（Web應用程序服務器）
Gson 2.3（Google Java庫）
jQuery 2.1.1（JavaScript庫）

1.前端（JSP頁面）

這里沒有太多要說的。如果遵循其他示例，您將知道如何在Eclipse中輕松創建Dynamic Web Project ，以及如何在文件夾WebContent內創建index.jsp頁面。這將是我們應用程序的主頁，并且我們將不會使用任何其他頁面。當然，它總是取決于您需要創建的應用程序的類型，但是對于我們的需求而言，一頁就足夠了。

index.jsp

<%@ page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Ajax - Servlets Integration Example</title><script type="text/javascript" src="resources/jquery-2.1.1.min.js"></script><script type="text/javascript" src="resources/buttonEventsInit.js"></script><script type="text/javascript" src="resources/resultsPrinter.js"></script><script type="text/javascript" src="resources/insertBandInfo.js"></script></head><body><h1>Ajax - Servlets Integration Example</h1><p>This is an example of how to use Ajax with a servlet backend.</p></br><h3>Select a button to get the relevant information.</h3><button id="bands" type="button">Show bands!</button><button id="bands-albums" type="button">Show bands and albums!</button><div id="band-results"></div></br></br><div id="bands-albums-results"></div></br></br><h3>Add the band information and press submit!</h3><h4>Band name: </h4><input type="text" id="band-name-input" value=""><br><h4>Albums: </h4><input type="text" id="album-input" value="">(Separated by commas)<br><input type="submit" id="submit-band-info" value="Submit"></body> </html>

因此，您可以看到非常簡單的東西。我們加載所需的javascript文件，其中只有一個是外部JQuery 。 JQuery是一個眾所周知的Javascript庫，它功能強大 。它使我們能夠輕松獲取有關頁面各個元素的信息，以及將事件綁定到這些元素。在此處獲取以下代碼段作為一個簡單示例：

$("#my-button").click(function() {alert("My button was clicked!"); });

此代碼段的意思是：“ 單擊ID為“ my-button”的元素時，我要觸發一個函數，該函數會創建一個警告彈出窗口，提示“我的按鈕已被單擊！”。 ”。因此，我們將執行某些操作的整個函數作為事件綁定的參數傳遞 。稍后我們將解釋有關JQuery的更多信息。您可以在此處下載JQuery 。

這里有些事情要考慮：

我們已為將要使用的所有重要元素指定了ID。因此，按鈕， 輸入框和空的<div>元素都有唯一的ID。
我們創建了2個包含結果的空<div>元素。如果您需要一個容器來存放東西并且需要將該容器始終放置在特定位置，通常會遵循此設計模式。這樣，我們就無需檢查信息的放置位置，因為頁面中為此保留了一個位置。同樣，第二個div（帶有專輯的樂隊）將始終位于第一個div（僅樂隊名稱）之下。當我們按下僅樂隊信息的按鈕時，它將被添加到帶有專輯的樂隊頂部。

2.向服務器詢問數據（前端和后端）

2.1從前端使用Ajax發出GET請求。

因此，我們需要做的第一件事是找到一種方法來詢問服務器所需的數據，在這種情況下為樂隊名稱或樂隊和專輯。我們已經在各自的按鈕上添加了兩個ID（ “樂隊”和“樂隊和專輯” ），因此我們需要將事件綁定到它們，以便每次按下按鈕時都可以調用服務器 。為此，我們將使用一些Javascript，包含在buttonEventsInit.js文件中。

注意：每個Javascipt文件都保存在目錄WebContent / resources下，以便授予訪問瀏覽器的權限。

buttonEventsInit.js

// When the page is fully loaded... $(document).ready(function() {// Add an event that triggers when ANY button// on the page is clicked...$("button").click(function(event) {// Get the button id, as we will pass it to the servlet// using a GET request and it will be used to get different// results (bands OR bands and albums).var buttonID = event.target.id;// Basic JQuery Ajax GET request. We need to pass 3 arguments:// 1. The servlet url that we will make the request to.// 2. The GET data (in our case just the button ID).// 3. A function that will be triggered as soon as the request is successful.// Optionally, you can also chain a method that will handle the possibility// of a failed request.$.get('DBRetrievalServlet', {"button-id": buttonID},function(resp) { // on sucess// We need 2 methods here due to the different ways of // handling a JSON object.if (buttonID === "bands")printBands(resp);else if (buttonID === "bands-albums")printBandsAndAlbums(resp); }).fail(function() { // on failurealert("Request failed.");});}); });

讓我們解釋一下這里發生的情況。 頁面加載后 （我們這樣做是為了確保所有元素都就位），我們將click事件綁定到頁面中的每個按鈕元素。從現在開始， 每單擊一個按鈕 ，GET請求就會發送到服務器，其中包含按下了哪個按鈕的信息。服務器將發送回正確的響應（以JSON對象的形式，稍后我們將對此進行說明），并且我們將根據所按下的按鈕對該對象執行不同的操作（因為每個按鈕將接收結構不同的 JSON）賓語）。

查看上面示例中有關向服務器發出GET請求的正確方法的注釋。您將需要提供URL（也可以是servlet的URL），數據和將被觸發的功能，并將服務器的響應（JSON對象）作為參數 。

2.2處理請求并將數據發送回客戶端。

那么，當我們發出請求時，服務器會發生什么？我們在這里使用了許多類，因此讓我們再次記住，我們正在構建一個包含兩種目錄的應用程序：樂隊和帶有專輯的樂隊。因此，我們正在使用：

MusicDatabase.java：使用Singleton模式以提供一個持久對象的類，該對象將包含需要發送回客戶端的信息。
DBRetrievalServlet.java：將用于處理GET請求和使用其他類的servlet，提供帶有查詢信息的響應 。
BandWithAlbums.java：一個用于創建新的“數據保存對象”的類，在我們的例子中，該類包含樂隊名稱和專輯列表。

因此，讓我們檢查這些類中的每一個并解釋它們的用法。

DBRetrievalServlet.java

package servlets; import informationClasses.MusicDatabase;import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;@WebServlet("/DBRetrievalServlet") public class DBRetrievalServlet extends HttpServlet {@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// We set a specific return type and encoding// in order to take advantage of the browser capabilities.response.setContentType("application/json");response.setCharacterEncoding("UTF-8");// Depending on the GET parameters, passed from the Ajax call,// we are able to differentiate the requests and call the appropriate// method. We can always use more classes for more use-cases.// The response object returns the information (as a JSON object in String form)// to the browser.String buttonID = request.getParameter("button-id");switch (buttonID) {case "bands":response.getWriter().write(MusicDatabase.getInstance().getBands());break;case "bands-albums":response.getWriter().write(MusicDatabase.getInstance().getBandsAndAlbums());break;}} }

我們得到參數“ button-id” ，該參數包含在從客戶端發送的信息中（在請求對象中），并且根據我們按下的按鈕的類型，我們需要通過調用MusicDatabase實例來獲得不同類型的信息。并每次調用不同的方法。

注意：單例模式

關于MusicDatabase實例…我們使用的是Singleton模式 ，這意味著因為我們只希望有1個該類的實例，所以我們不會通過自己調用new關鍵字來創建新實例。相反，我們從MusicDatabase類本身調用一個方法，并要求一個實例。

如果尚未創建該實例，我們將創建一個實例并將其返回。

如果已創建，則返回現有實例。

無法從外部訪問構造函數 ，也無法意外創建另一個實例。您可以在線找到有關Singleton模式的更多信息。

MusicDatabase.java

package informationClasses;import java.util.ArrayList; import java.util.List;import jsonObjects.BandWithAlbums;import com.google.gson.Gson;public class MusicDatabase {private List bandNames;private List bandsAndAlbums;// Singleton methodsprivate static MusicDatabase dbInstance = null;protected MusicDatabase() {bandNames = new ArrayList<>();bandsAndAlbums = new ArrayList<>();}public static MusicDatabase getInstance() {if(dbInstance == null) {dbInstance = new MusicDatabase();}return dbInstance;}public void setBandAndAlbums(String bandName, ArrayList bandAlbums) {bandNames.add(bandName);bandsAndAlbums.add(new BandWithAlbums(bandName, bandAlbums));}public String getBands() {return new Gson().toJson(bandNames);}public String getBandsAndAlbums() {return new Gson().toJson(bandsAndAlbums);} }

我們將在這里檢查的方法是getBands()和getBandsAndAlbums() 。我們只需要這兩種方法，它們就非常簡單，因為這里有一些可以幫助我們的事情：

Gson是Google的Java庫，它使我們能夠從Java對象輕松創建JSON對象。該對象可以是任何東西，從簡單的數據結構到包含信息的對象，其他數據結構等。在我們的例子中，我們有2個這樣的數據結構：
- A List<String> bandNames ，僅包含A List<String> bandNames形式的樂隊名稱。
BandWithAlbums類 ，它使我們能夠保存有關樂隊的更多信息。它是一個數據保存類，其中包含樂隊名稱作為String和其樂隊List<String>作為List<String> 。通過返回此對象，您還將返回所有關聯的信息。

總而言之，使用命令new Gson().toJson(Object obj)的Gson庫可以將大多數對象和數據結構轉換為JSON格式，瀏覽器可以通過Javascript輕松使用。

注意：您需要將Gson庫添加到類路徑中才能起作用。

BandWithAlbums.java

package jsonObjects;import java.util.ArrayList;public class BandWithAlbums {String bandName;ArrayList bandAlbums;public BandWithAlbums(String bandName, ArrayList bandAlbums) {this.bandName = bandName;this.bandAlbums = bandAlbums;} }

正如我們之前已經說過的，這是一個簡單的數據保存類。從某種意義上說，它代表“樂隊”，其中包含樂隊的名稱和專輯。

2.3將數據呈現給瀏覽器。

因此，一旦有了所需的數據，就可以在buttonEventsInit.js文件中看到，我們可以選擇調用兩種不同的方法，具體取決于進行調用的按鈕的ID。我們將展示這兩種方法在做什么，以及如何將數據展示給瀏覽器 。

resultsPrinter.js

// Both those functions get a json object as an argument, // which itself also holds other objects.// 1. The first function is supposed to get an object // containing just a list of band names. // 2. The second function is supposed to get an object containing // bands with albums, which essentially means a list of objects // which hold (1) a band name and (2) a list of albums.function printBands(json) {// First empty the <div> completely and add a title.$("#band-results").empty().append("<h3>Band Names</h3>");// Then add every band name contained in the list. $.each(json, function(i, name) {$("#band-results").append(i + 1, ". " + name + " </br>");}); };function printBandsAndAlbums(json) {// First empty the <div> completely and add a title.$("#bands-albums-results").empty().append("<h3>Band Names and Albums</h3>");// Get each band object...$.each(json, function(i, bandObject) {// Add to the <div> every band name...$("#bands-albums-results").append(i + 1, ". " + bandObject.bandName + " </br>");// And then for every band add a list of their albums.$.each(bandObject.bandAlbums, function(i, album) {$("#bands-albums-results").append("--" + album + "</br>");});}); };

為了了解這些功能如何工作，我們必須看一下服務器返回給客戶端的響應對象。在第一種情況下，我們期望僅列出樂隊名稱，因此期望的對象將只是列表：

["The Beatles", "Metallica"]

另一方面，在第二種情況下，我們希望接收全波段信息，在這種情況下，json對象將如下所示：

[{bandName: "The Beatles",bandAlbums: ["White Album", "Let it be"]},{bandName: "Metallica",bandAlbums: ["St Anger", "The Black Album"]} ]

因此，我們需要兩種不同的方式處理請求。但是，在每種情況下，我們將要使用的div empty() ，并使用一些非常方便的JQuery函數添加從服務器獲取的信息。

這樣，我們的應用程序的第一部分就完成了。查看屏幕快照以查看結果。

結果顯示在瀏覽器中。

3.從用戶輸入（前端和后端）更新服務器

3.1使用Ajax發出POST請求。

在這一部分中，我們將研究如何將數據發送到服務器 。在本教程的上半部分，我們已經通過處理GET請求獲得了工作方式的提示，并且這里的步驟實際上并沒有什么不同，唯一的例外是允許用戶為應用程序提供輸入 。讓我們看一下我們正在使用的代碼以及每個文件的功能。

insertBandInfo.js

$(document).ready(function() {// Add an event that triggers when the submit// button is pressed.$("#submit-band-info").click(function() {// Get the text from the two inputs.var bandName = $("#band-name-input").val();var albumName = $("#album-input").val();// Fail if one of the two inputs is empty, as we need// both a band name and albums to make an insertion.if (bandName === "" || albumName === "") {alert("Not enough information for an insertion!");return;}// Ajax POST request, similar to the GET request.$.post('DBInsertionServlet',{"bandName": bandName, "albumName": albumName},function() { // on successalert("Insertion successful!");}).fail(function() { //on failurealert("Insertion failed.");});}); });

如果您遵循了教程的上一部分，那么很容易理解我們在這里所做的事情。另一個單擊事件，現在僅針對“ 提交”按鈕的特定ID，該事件在檢查了兩個輸入框是否確實有輸入之后，發出POST請求（向為此目的專門使用的新Servlet）發送數據我們想要的（樂隊名稱和專輯列表）。

3.2將用戶輸入保存在我們的“數據庫”中。

DBInsertionServlet.java

package servlets;import informationClasses.MusicDatabase;import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; import java.util.Map;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;@WebServlet("/DBInsertionServlet") public class DBInsertionServlet extends HttpServlet {@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {Map<String, String[]> bandInfo = request.getParameterMap();// In this case here we are not using the data sent to just do different things.// Instead we are using them as information to make changes to the server,// in this case, adding more bands and albums.String bandName = Arrays.asList(bandInfo.get("bandName")).get(0);String albums = Arrays.asList(bandInfo.get("albumName")).get(0);MusicDatabase.getInstance().setBandAndAlbums(bandName, getAlbumNamesFromString(albums)); // return successresponse.setStatus(200); }// Split the album String in order to get a list of albums.private ArrayList getAlbumNamesFromString(String albums) {return new ArrayList(Arrays.asList(albums.split(",")));} }

當Servlet收到請求時，它將從請求映射中提取bandName，并包含包含唱片集名稱的String 。 當找到逗號時，我們通過將String分成多個部分來創建專輯列表。最后，我們調用MusicDatabase實例，在該實例中添加樂隊名稱和專輯列表，如果您從以前檢查一下類定義，則可以看到：

我們將樂隊名稱添加到bandNames列表中。
我們創建一個新的Band對象（使用名稱和專輯列表），并將其添加到bandsWithalbums列表中。

之后，該servlet完成，并將成功狀態響應發送回客戶端。我們已將所有內容添加到列表中，并且可以隨時按JSON格式發送。舉例來說，讓我們看看如果我自己添加一個新樂隊會發生什么。

添加新樂隊。

這個新樂隊已經在我的“數據庫”中，并要求再次查看該信息后，它就在那里！

4.下載項目

這是Ajax – Servlets集成的示例。我想想我可以幫助您全面了解如何實現Web應用程序的每個部分（前端-后端），以及將各個部分連接在一起以創建允許用戶在其上進行輸入和更改的軟件的最簡單方法。服務器以及客戶端！

您可以在此處下載此示例的完整源代碼： AjaxServletsIntegration

翻譯自: https://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html

總結

以上是生活随笔為你收集整理的jQuery Ajax – Servlets集成：构建完整的应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：安卓手机怎么注册推特账号（安卓手机怎么注
下一篇： linux赋权限命令chmod（linu