Refresh this page because I am probably still making changes to it.
Before doing this lesson, make sure you've completed the examples in the Intro to Web Services and Consuming Web Services lessons.
AJAX stands for Asynchronous Javascript And XML. It has been around since around 1998 but didn't really catch on until 2005: Google used it in two of their more popular applications, Google Maps and Google Suggest. Jesse James Garrett wrote the article Ajax: A New Approach to Web Applications, which created a lot of attention for AJAX.
The buzz about AJAX was that it would make a web application seem more like a computer application. Normally, when you use a web application, the browser makes requests of the server to perform processing tasks via HTTP. Eventually, the web server sends responses back to browser, which are then displayed for the user to see. During the request and response period, there is a period of time that the user must wait (not usually very long, but I'm sure you've experienced some interminable wait times while the server responds to your request!). When the response from the server does come back the browser must reload the page being viewed (refresh).
It is that refresh and wait time that makes a web application different not just in functionality, but in look-and-feel from a regular application.
With AJAX, the browser can work behind the scenes to make requests, receive responses. and then load them seamlessly on the page without a refresh occurring. This is accomplished because of the asynchronous nature of AJAX.
To explain it simply, when you make a telephone call, the communication is asynchronous: two people talking on the phone may speak at the same time. If you used "walkie-talkies", only one person could speak, and the other person would have to wait for the speaker to finish before they could begin to speak. This start-and-stop mode of communication is synchronous. AJAX is asynchronous, in that it can send and receive multiple requests at the same time, and do other things behind the scenes. This makes an application appear more like a regular, desktop application.
We can use AJAX to fetch data by consuming one of our ReSTful web services. We do this using JavaScript's fetch() method. The fetch() method will make a request to a specific URL and returns a Response. The Response, as you can guess, has a status code, response body, headers, etc.
We'll do a really basic demo, but you should spend some time exploring what else you can do with AJAX.
If you don't already have one, create a web service GET method that receives the container ID as a path variable and returns that container object from the database. Be careful with the @GetMapping path - you already have 2 GET service methods!
Now we're going to modify our containers.html output: We're going
to turn the name of the container into a link. When someone clicks
on the container name link it will perform an AJAX fetch()
to the controller handler method we just wrote (which performs the
GET request for the web service that retrieves the container by its
ID). The fetch() method will then make the response (whose body
will contain the container in JSON format) available in our HTML,
so we can display it on the page. It's not a great example in terms
of practicality, since we can already see the whole container in the
table, but imagine what else you could do with this functionality!
Update the table in the container.html page: In the cell where you display the container name:
<td th:text="${c.name}">name</td>
Change it to:
<td><a href="#" th:text="${c.name}" th:id="${c.id}" class="clink">name</a></td>
Also, add a DIV element below your table where we can display the container information:
<div id="display"></div>
We're not going to use the actual th:href as the clickable link, we're going to
assign a click-event unobtrusively using JavaScript. When the
user clicks the link element, the script will use fetch() to invoke
the handler method and then display the result in an extra div.
The next part you can copy and paste: Add a /scripts
or /js directory to your /static directory.
Make sure you add a SCRIPT element
referencing that script file to your containers.html page.
Add the following code to your script file:
Now save all your changes and run the project. You can click the container name link and see the container information appear in the DIV, and the page doesn't refresh!
If you wanted to, you could do this on a hover instead of with a click:
Add this new script and reference it in your containers.html page:
In your containers.html page, add this anywhere (or just edit the display div from earlier):
<div id="tooltip"></div>
I used the following styling, feel free to change it:
#tooltip {
background-color: yellow;
border: 2px solid red;
padding: 5px;
position: fixed;
visibility: hidden;
z-index: 3;
}
Save all your changes and then reload the page. You can now see the container information when you hover over the links. This doesn't have to be done with links: you could use these event handlers on anything.
As mentioned before, this isn't exactly a practical example. But imagine if you were doing this with the Book program or Inventory program: You could display just the ISBN and title of a book, and the user could click it to see all the book information, including a cover image! Or you could display a list of inventory IDs and make them clickable so that the user can click any one of them to see all the information about a particular inventory item!
Web services not only give you a service layer in your multi tiered application, but you can also make use of them in your HTML/Thymeleaf pages with JavaScript and AJAX! You should now have a good idea of some really cool programs you can write with these technologies!
In the next series of lessons we're going to learn how to create more re-usable applications with Thymeleaf fragments and persistent storage.
The demo in this lesson should have given you some cool ideas. Update one of your previous applications (books, players/teams, inventory, etc) to use AJAX to retrieve a response from a web service.