Javascript Java REST调用与Web应用程序前端的关系如何？

我知道

REST

调用如何在

Java

Web应用程序中工作。例如，当到达

URL

时，将使用

HTTP

调用其方法

例如：

 @GET
    @Path("people/{id}")
    public Response getPersonWithId(@PathParam("id") id) {

      //return the person object with that Id

    }

我不确定的是，这是如何链接到前端的

UI（即

javascript

）的角色是否只是将用户带到特定的url，以便可以调用后端方法

---

例如，如果用户按下“获取详细信息”按钮，该按钮是否只是将他们重定向到该URL，该URL将终止并返回详细信息，然后调用后端功能？

假设您的客户端是一个网站，您有一个Java API

在网站的javascript中，您可以请求后端检索数据，然后将其呈现给用户。您的javascript（以jQuery为例）可能如下所示：

    // here it prints the data retrieved from the backend route (/people/{id}     
    $.get('http://localhost:3000/people/3',function onDataReceived(data) {
         console.log(data);
    })

正如所指出的，jQuery不是必需的。下面是一个使用常规javascript的示例：

this.getRequest('http://localhost:3000/people/3', function onReceived(data) {

});

function getRequest(url, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null);
}

---

在javascript中，通常需要在网页的后台执行这些请求

我将试着用一个例子来解释这一点：

假设您有一个页面，其中显示了待售汽车的列表，可以从java后端提供的web服务获取这些汽车。后端有一个url，该url将使用JSON（或XML）对象响应GET方法

您拥有的是一个HTML文件，其中为显示的数据编写了一个结构，还包括一个javascript文件，该文件异步调用此Web服务，获取数据，解析JSON，然后它可以将其处理为您希望在页面上显示的形式

在不同的示例中，您可以在后台验证表单，或者保存表单，或者执行与web服务API一起工作的任何其他操作

为了发出这些异步请求，可以使用不同的库

---

最常用的是框架中包含的ajax或作为独立库的ajax。

与webapp类似，WebService实际上并没有链接或绑定到前端。相反，webservice是一种根据请求类型（get、post、update、delete）以JSON/XML格式提供结果的服务，因此，该服务可由任何多个前端应用程序（不仅是web应用程序，还包括智能手机应用程序、桌面应用程序等）使用。此外，webservice可以位于完全不同的服务器上

让我给你一个场景：

假设您有一个前端网站ABC网站和一个后端网站 主机上的webservice:www.xyzservice.com/api，方法如下：

/product-获取以json格式返回所有产品作为列表的请求

/product/id-获取json中给定id的请求返回产品详细信息 格式

现在，如果您只需在浏览器中键入

www.xyzservice.com/api/product

，那么 所有产品列表将以json格式显示在浏览器中。这意味着，您也可以在浏览器中直接从webservice读取数据，而无需前端系统，也就是说，webservice不链接/绑定到任何前端

现在，您希望在ABC网站中使用此Web服务来显示所有产品列表：

You call www.xyzservice.com/api/products and get JSON object that you can use to display in your html page.

<button type="button" onclick="getProducts()">Click Me!</button> 

function getProducts(){ 
$.ajax({
        type : "GET",
        contentType : "application/json",
        url : "http://www.xyzservice.com/api/product",
        dataType : 'json',
        timeout : 100000,
        success : function(data) {
            // now you have "data" which is in json format-same data that is displayed on browser.
            displayDate(date);      
        },
        error : function(e) {
            //do something
        },
        done : function(e) {
            //do something
        }
    });
}

function displayDate(){
    //your codes to parse and display json data  in html table in your page.
}

调用www.xyzservice.com/api/products并获取可用于在html页面中显示的JSON对象。
点击我！
函数getProducts（）{
$.ajax({
键入：“获取”，
contentType:“应用程序/json”，
url:“http://www.xyzservice.com/api/product",
数据类型：“json”，
超时：100000，
成功：功能（数据）{
//现在您有了json格式的“数据”，它和浏览器上显示的数据相同。
显示日期（日期）；
},
错误：函数（e）{
//做点什么
},
完成：功能（e）{
//做点什么
}
});
}
函数displayDate（）{
//在页面的html表中解析和显示json数据的代码。
}

当您按下getDetails按钮时，会向您配置的URL发出HTTP GET。您编写的方法只是返回一个适当的内容类型，然后用于信息显示，具体取决于应用程序的结构。我喜欢将我的客户端和后端分开。这样，API只发送数据，客户机知道如何显示数据。在您的情况下，getDetails将调用一个URL（对于某些数据是可选的）。然后API返回详细信息（数据），客户端在收到时显示。@Bram您能举个例子吗？举个什么例子？看看任何简单的Ajax教程：客户端JS发出请求并使用返回值执行某些操作，例如，如果返回HTML，则将其插入DOM，将JSON转换为DOM元素或将值插入现有元素，等等。@DaveNewton是否有任何您推荐的特定Ajax教程？谢谢，因此实际上不需要javascript，可以单独使用HTML？JavaScript为HTML带来了动态功能。HTML只是静态呈现。您可以使用javascript更改html。您必须从HTML调用javascript（例如，当单击按钮时）。@java123999需要一种浏览器能够理解的语言。HTML本身就是：HTML。您可能想退一步，找到一些关于动态网站如何工作的基本教程。谢谢您的回答和您的输入@DaveNewton。在REST中，我返回的资源是否来自数据库或xml文件等是否重要？@java123999 REST是一种资源命名约定，仅此而已。资源是什么是无关紧要的。谢谢，这让它更清楚了。在REST中，如果我返回的资源来自数据库或xml文件等，这是否重要？请谨慎地指出，跨站点Ajax请求需要CORS/etc。这并不重要。因为无论数据源（数据库、xml文件、硬盘中的文本文件等）是什么，您都将解析和验证数据，并从API返回JSON、xml或简单文本