RESTEasy Javascript/Ajax 客戶端演示 · HowToDoInJava 中文系列教程

# RESTEasy Javascript/Ajax 客戶端演示 > 原文： [https://howtodoinjava.com/resteasy/resteasy-javascriptajax-client-demo/](https://howtodoinjava.com/resteasy/resteasy-javascriptajax-client-demo/) 如果正在開發 Web 應用，則 [**RESTEasy**](//howtodoinjava.com/restful-web-service/ "Resteasy tutorials") 為構建 Ajax 驅動的客戶端提供了非常出色的支持。 RESTEasy 可以生成一個 JavaScript API，該 API 使用 AJAX 調用來調用 JAX-RS 操作。生成用于訪問 REST API 的 JavaScript 代碼與 Java 代碼非常相似，您會感覺自己正在用 Java 語言調用 REST API。這種方法的優點（或缺點？）是您的類名和方法名可以通過 javascript 代碼直接訪問。即使您不需要編寫自動嵌入在您的網頁中的 Ajax 處理代碼。 > 注意：在 JS 代碼中使用類和方法名稱可能會成為一個非常嚴重的安全漏洞。因此，請明智地使用它。在本教程中，我構建了一個普通的 HTML 表單，該表單是用于將用戶添加到系統中的用戶。我將使用 RESTEasy Ajax 客戶端來訪問 REST API，以添加用戶并獲取響應。 ## 步驟 1）添加對 RESTEasy JSAPI 的運行時支持 ```java <dependency> <groupId>org.jboss.resteasy</groupId> <artifactId>resteasy-jsapi</artifactId> <version>2.3.1.GA</version> </dependency> ``` 如果不使用 maven 構建工具，則可以將 jar 文件添加到 lib 文件夾中。 ## 步驟 2）添加 JSAPI Servlet 映射在`web.xml`文件中的 Servlet 聲明下方添加。必須將 JavaScript API Servlet 配置為啟用 JavaScript API。 ```java <servlet> <servlet-name>RESTEasy-JSAPI</servlet-name> <servlet-class>org.jboss.resteasy.jsapi.JSAPIServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>RESTEasy-JSAPI</servlet-name> <url-pattern>/js/*</url-pattern> </servlet-mapping> ``` ## 步驟 3）編寫需要從 javascript/ajax 中調用的 REST API 我正在編寫一個最小的 REST API，以使示例不復雜。 ```java @Path("/rest") public class UserService { @Path("/users") @POST public Response addUser(@QueryParam("firstName") String firstName, @QueryParam("lastName") String lastName) { //vaildate first name if(firstName == null || firstName.isEmpty()) { return Response.ok().entity("First name is mandatory dude").build(); } //vaildate last name if(lastName == null || lastName.isEmpty()) { return Response.ok().entity("Don't you have any last name? I will keep secret").build(); } //Add user and return the response return Response.ok().entity("User "" + firstName + "" added through JAX-RS JavaScript API").build(); } } ``` ## 步驟 4）在視圖層上構建 Ajax 客戶端我正在使用默認的`index.jsp`文件編寫客戶端代碼。 **示例 1：** ```java <html> <head>  <script lang="javascript" src="./js"></script>  <script lang="javascript"> function addUserForm() { //Collect input from html page var firstNameTxt = document.getElementById("firstName").value; var lastNameTxt = document.getElementById("lastName").value; //Call the REST APIs with directly method names var message = UserService.addUser({firstName:firstNameTxt,lastName:lastNameTxt}); //Use the REST API response document.getElementById("error").innerHTML = "<h2><span style='color:red'>" + message + " !!</span></h2>"; } </script> </head> <body> <h1>RESTEasy Ajax client demo</h1> <div id="error"></div> <form method="post"> <p>First Name : <input type="text" name="firstName" id="firstName"/></p> <p>LastName : <input type="text" name="lastName" id="lastName"/></p> <input type="button" value="Add User" onclick="addUserForm()" /> </form> Demo by : <b>https://www.howtodoinjava.com</b> </body> </html> ``` **示例 2：** 如果發現使用類名和方法名是不可管理的，因為它們可能在另一天得到更改。不用擔心，REST 隱式對象正在為您解救。演示 REST 調用如下： ```java //Example Two using REST object function addUserForm() { //Collect input from html page var firstNameTxt = document.getElementById("firstName").value; var lastNameTxt = document.getElementById("lastName").value; var req = new REST.Request(); req.setURI(REST.apiURL + "/rest/users"); req.setMethod("POST"); req.setEntity({firstName:firstNameTxt,lastName:lastNameTxt}); req.execute(function(status, request, entity){ document.getElementById("error").innerHTML = "<h2><span style='color:red'>" + entity + " !!</span></h2>"; }); } ``` ## 測試應用要測試該應用，請將其部署在任何 Web 服務器中。 1）輸入網址`http://localhost:8080/RESTfulValidation/` ![resteasy-ajax-demo](https://img.kancloud.cn/04/c5/04c55b7d6d03be8ce237802e79c5b014_463x220.png) 示例歡迎界面 2）僅填寫名字，然后按添加按鈕 ![Validation error for last name field](https://img.kancloud.cn/53/25/5325db7c36495ad75ceeb9af7fdaae05_580x265.png) 姓氏字段的驗證錯誤 3）填寫兩個字段，然后按添加按鈕 ![User added successfully](https://img.kancloud.cn/99/c3/99c3cb0e5f17a7c97290ad9cef5644c4_643x278.png) 用戶添加成功要下載上面演示的源代碼，請遵循以下給定的下載鏈接。 **祝您學習愉快！**