Question

我知道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，以便可以调用后端方法吗？

E.g。如果用户按下“获取详细信息”按钮，该按钮是否只是将它们重定向到此URL，并返回详细信息，然后调用后端功能？

Answer 1

与webapp类似，WebService实际上并未链接或绑定到前端。相反，webservice是一种服务，它根据请求类型（get，post，update，delete）以JSON / XML，纯文本格式的形式提供结果，因此，任何多个前端应用程序都可以使用该服务（不仅如此）网络应用程序，但也智能手机应用程序，桌面应用程此外，webservice可以在完全不同的服务器上。

让我给你一个场景：

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

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

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


现在，如果您只需输入浏览器www.xyzservice.com/api/product即可   所有产品列表将在浏览器中以json格式显示。这意味着，您也可以直接在没有前端系统的浏览器中从webservice读取数据，即web服务没有链接/绑定到任何前端。

现在，您希望在ABC-Website中使用此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.
}

Answer 2

让我们说你的客户是一个网站，你有一个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);
}

Answer 3

在javascript中，通常您希望在网页的后台执行这些请求。

我想用一个例子来解释这个：

想象一下，您有一个显示待售汽车列表的页面，可以从java后端提供的Web服务中获取。后端有一个url，它将使用JSON（或XML）对象响应GET方法。

你所拥有的是一个HTML文件，你可以在其中为显示的数据编写一个结构，还包括一个异步调用这个webservice的javascript文件，获取数据，解析JSON然后它可以将它操作到你想要的形式在页面上显示它。

在不同的示例中，您可以在后台验证表单，或保存表单或执行与Web服务API一起使用的任何其他内容。

为了进行这些异步请求，您可以使用不同的库。

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

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

3 个答案: