當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/3 编程问答 37 豆豆

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

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

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

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

該應(yīng)用程序的外觀是裸機(jī)越好 ，但其背后的代碼是你需要開始創(chuàng)建自己的動態(tài)Web應(yīng)用程序，這是最通常稱為CRUD應(yīng)用程序的一切（C reate，R EAD，U PDATE，d elete ）。之所以這樣稱呼它們是因?yàn)樗鼈兊乃泄δ芏伎梢猿橄鬄檫@些非常基本的命令。

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

蝕月神
Java 7
Tomcat 7（Web應(yīng)用程序服務(wù)器）
Gson 2.3（Google Java庫）
jQuery 2.1.1（JavaScript庫）

1.前端（JSP頁面）

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

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庫，它功能強(qiáng)大 。它使我們能夠輕松獲取有關(guān)頁面各個元素的信息，以及將事件綁定到這些元素。在此處獲取以下代碼段作為一個簡單示例：

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

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

這里有些事情要考慮：

我們已為將要使用的所有重要元素指定了ID。因此，按鈕， 輸入框和空的<div>元素都有唯一的ID。
我們創(chuàng)建了2個包含結(jié)果的空<div>元素。如果您需要一個容器來存放東西并且需要將該容器始終放置在特定位置，通常會遵循此設(shè)計(jì)模式。這樣，我們就無需檢查信息的放置位置，因?yàn)轫撁嬷袨榇吮Ａ袅艘粋€位置。同樣，第二個div（帶有專輯的樂隊(duì)）將始終位于第一個div（僅樂隊(duì)名稱）之下。當(dāng)我們按下僅樂隊(duì)信息的按鈕時，它將被添加到帶有專輯的樂隊(duì)頂部。

2.向服務(wù)器詢問數(shù)據(jù)（前端和后端）

2.1從前端使用Ajax發(fā)出GET請求。

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

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

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.");});}); });

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

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

2.2處理請求并將數(shù)據(jù)發(fā)送回客戶端。

那么，當(dāng)我們發(fā)出請求時，服務(wù)器會發(fā)生什么？我們在這里使用了許多類，因此讓我們再次記住，我們正在構(gòu)建一個包含兩種目錄的應(yīng)用程序：樂隊(duì)和帶有專輯的樂隊(duì)。因此，我們正在使用：

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

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

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;}} }

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

注意：單例模式

關(guān)于MusicDatabase實(shí)例…我們使用的是Singleton模式 ，這意味著因?yàn)槲覀冎幌Ｍ?個該類的實(shí)例，所以我們不會通過自己調(diào)用new關(guān)鍵字來創(chuàng)建新實(shí)例。相反，我們從MusicDatabase類本身調(diào)用一個方法，并要求一個實(shí)例。

如果尚未創(chuàng)建該實(shí)例，我們將創(chuàng)建一個實(shí)例并將其返回。

如果已創(chuàng)建，則返回現(xiàn)有實(shí)例。

無法從外部訪問構(gòu)造函數(shù) ，也無法意外創(chuàng)建另一個實(shí)例。您可以在線找到有關(guān)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() 。我們只需要這兩種方法，它們就非常簡單，因?yàn)檫@里有一些可以幫助我們的事情：

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

總而言之，使用命令new Gson().toJson(Object obj)的Gson庫可以將大多數(shù)對象和數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為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;} }

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

2.3將數(shù)據(jù)呈現(xiàn)給瀏覽器。

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

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>");});}); };

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

["The Beatles", "Metallica"]

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

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

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

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

結(jié)果顯示在瀏覽器中。

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

3.1使用Ajax發(fā)出POST請求。

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

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.");});}); });

如果您遵循了教程的上一部分，那么很容易理解我們在這里所做的事情。另一個單擊事件，現(xiàn)在僅針對“ 提交”按鈕的特定ID，該事件在檢查了兩個輸入框是否確實(shí)有輸入之后，發(fā)出POST請求（向?yàn)榇四康膶ｉT使用的新Servlet）發(fā)送數(shù)據(jù)我們想要的（樂隊(duì)名稱和專輯列表）。

3.2將用戶輸入保存在我們的“數(shù)據(jù)庫”中。

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(",")));} }

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

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

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

添加新樂隊(duì)。

這個新樂隊(duì)已經(jīng)在我的“數(shù)據(jù)庫”中，并要求再次查看該信息后，它就在那里！

4.下載項(xiàng)目

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：安卓手机怎么注册推特账号（安卓手机怎么注
下一篇：自定义汇编程序，Weaver和运行时的可