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) 用户添加成功要下载上面演示的源代码，请遵循以下给定的下载链接。 **祝您学习愉快！**