Learn Servlet-JSP By Building A Social Network Website — Part XIII

Learn AJAX and JSON by implementing loading friend list feature

Task 19: Reading: AJAX — JSON

For the next tasks, we are going to apply AJAX (short for Asynchronous JavaScript And XML) in some features, and also this is one of the most common techniques used in web development, encountering the AJAX technique is inevitable.

AJAX, which utilizes many web technologies, allows developers to build asynchronous web applications. The asynchronous web application is a term referring to the environment where the clients can send requests and receive responses asynchronously. That means when a client sends a request, while the request is being processed by the server, the client can send other requests to the server without waiting for the first request to be finished and returned.

Another advantage of AJAX is that it allows responses returned by the server to be updated on certain elements in the client, not necessarily to reload the whole web page.

Take some time and read more at https://en.wikipedia.org/wiki/Ajax_(programming)

Originally, data exchanged between client and server is XML format as implied in the name AJAX. However, modern web applications prefer to be applied to another data format called JSON — JavaScript Object Notation.

In simple words, JSON is JavaScript objects in text format. The advantage of JSON is that because it is basically text format in form of JS objects, JSON does not depend on any languages or technologies. Another convenience is that JSON data can be converted to language-specific objects.

You can dig more information about JSON at https://en.wikipedia.org/wiki/JSON

Task 20: Loading Friend List using AJAX

In this task, we are going to apply the AJAX technique to load the friend list asynchronously, instead of the traditional (synchronous) way as we have done previously. This will bring up two main benefits:

• Users do not need to wait for the whole news feed page to be loaded in order to be able to interact with. Waiting for all elements to be displayed can lead to a bad user experience since there are a lot of data needed to be shown on the news feed page. Applying AJAX for the friend list feature allows other UI components, such as posts and comments, to be loaded first, and the friend list can be displayed a bit later.
• It is easy to update the friend list. Because later on, we will implement the add a new friend feature. Once a new friend is added, we will need to reload the friend list only, not the entire news feed page.

Step 1:

Since we don’t load the friend list at the same time as other components in the news feed page, which means the code to load the friend list should not be in the NewsFeedController servlet.

We need a separate controller to return only the friend list data.

In the net.learnbyproject.controller package, create a new servlet called FriendListController with the URL pattern as “friend-list”.

Then, move the loading friend list code in the NewsFeedController servlet:

to the FriendListController servlet:

As you can see in the FriendListController servlet, once the friend list is loaded, we need to return the content of the file friend-list.jsp by also using the forwarding technique.

Note that the code in the NewsFeedController.processRequest() method now is just:

Step 2:

In the news-feed.jsp file, find the following <div> tags:

and replace with the following ones:

There are two things that have been changed:

• <div> tag has the attribute id = “friend-list”. The friend list data once loaded will be added to this <div> using the id of “friend-list”
• The <%include… %> has been removed since the friend list data will be loaded using AJAX

Step 3:

Also in the news-feed.jsp, scroll down to find the <script> tags and add the following AJAX code to load the friend list:

The $.ajax() is the jQuery function that informs the web browser to send the request asynchronously.

This function takes an object as a parameter with attributes:

• url: specifies the URL pattern that will receive the request, in our case it is the FriendListController since we have defined the mapping with “friend-list”
• type: specifies the method to be sent with the request, in our case, it is POST
• success: specifies the function will be executed in case the request has been performed successfully. The function takes a parameter (i.e data as we named it) which is the result returned by the one defining in the url attribute. Which, in our case, will be the content of the friend-list.jsp. That’s why we add the data parameter to the element with the id of “friend-list”:

$(‘#friend-list’).html(data);

• error: specifies the function will be executed in case the request has been failed due to some reason. The parameterize e of the function usually contains the error information.

And that should be all for applying AJAX to load the friend list.

Clean and build your project.

And if everything has been done correctly, you should be able to see the fiend list just like what we had done previously. It is just different in the way of loading the data.

Check out the complete source code if you get stuck:

https://github.com/stackera/learn-servlet-jsp/blob/main/Task20_FriendList_AJAX.zip

>> Read Part XIV