javascript - How do Java REST calls relate to the front end of a Web Application? - Stack Overflow

admin管理员组

文章数量:1287818

I am aware of how REST calls work from within a Java Web application. E.g. when a URL is reached its method will be called using HTTP.

For example:

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

      //return the person object with that Id

    }

What I am unsure of is how this links to the front end?

Is the role of the UI ( i.e. javascript ) just to take a user to the specific URLs so that the back end methods can be called?

E.g. if a user presses a "get details" button, does the button just redirect them to this URL that deails with returning the details, and the back end functionality is then called?

I am aware of how REST calls work from within a Java Web application. E.g. when a URL is reached its method will be called using HTTP.

For example:

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

      //return the person object with that Id

    }

What I am unsure of is how this links to the front end?

Is the role of the UI ( i.e. javascript ) just to take a user to the specific URLs so that the back end methods can be called?

E.g. if a user presses a "get details" button, does the button just redirect them to this URL that deails with returning the details, and the back end functionality is then called?

• javascript
• java
• rest
• http

Share Improve this question Follow asked Aug 4, 2016 at 10:20 java123999java123999 7,4043737 gold badges8282 silver badges129129 bronze badges 6

• When you press the getDetails button , you issue a HTTP GET to the URL you configured. And the method you wrote just returns an appropriate content type that will then be used for information display – Ramachandran.A.G Commented Aug 4, 2016 at 10:24
• It depends on the structure of your application. I like to separate my client and backend. This way, the API only sends data and the client knows how to present it. In your case getDetails would call a URL (optional with some data). Then the API returns the details (data) and the client presents this upon receiving. – Bram Commented Aug 4, 2016 at 10:25
• @Bram can you please give an example of this? – java123999 Commented Aug 4, 2016 at 10:26
• An example of what? Look at any simple Ajax tutorial: client-side JS makes a request and does something with the return value, e.g., inserts it into the DOM if HTML was returned, transforms JSON into DOM elements or inserts a value into an existing element, and so on. – Dave Newton Commented Aug 4, 2016 at 10:35
• @DaveNewton any particular AJAX tutorial you remend? – java123999 Commented Aug 4, 2016 at 10:37

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

WebService is not actually linked or tied to the front end similar to webapp. Instead, webservice is a service that provides result in the form of JSON/XML, Plain text Format according to request type(get, post, update, delete) and hence, the service can be used by any multiple front end application(not only web application but also smartphone app, desktop app etc.). Also, webservice can be on totally different server.

Let me give you a scenario:

Suppose, you have an front end web site ABC-Website and a backend webservice on host: www.xyzservice./api with following methods:

/product - get request that return all product as list in json format.

/product/id - get request return product detail given id in json format.

Now, if you simply type in browser www.xyzservice./api/product then all product list will displayed in json format in the browser. That means, You can also read data from webservice directly in browser without front end system and i.e. webservice is not linked/tied to any front end.

Now, you want to use this webservice in your ABC-Website to display all the product list:

You call www.xyzservice./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./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.
}

Lets say that your client is a website and you have a Java API.

In the javascript of your website you could do a request to the backend to retrieve the data and then present it to the user. Your javascript (using jQuery as an example) could look like the following:

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

As pointed out, jQuery is not necessary. Here is an example using regular 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);
}

in javascript, usually you want to do these request at the background your webpage.

Im gonna try to explain this with an example:

Imagine you have a page that displays a list of cars for sell which can be fetched from the web service provided by java back-end. The back-end have an url that will respond to GET method with a JSON (or XML) object.

What you have is a HTML file where you write a structure for the displayed data and also includes a javascript file that asynchronously calls this webservice, GETs the data, parses the JSON and then it can manipulate it to the form you want to display it on the page.

In different example you can validate forms on the background, or save the forms or do any other stuff that works with the web service API.

For making these asynchronous request you can use different libraries.

Most used is ajax included in jQuery framework or fetch as n standalone library.

本文标签： javascriptHow do Java REST calls relate to the front end of a Web ApplicationStack Overflow