When the application is loaded on the browser, we can see 'SignUp' link on the top right corner.
When this link is clicked, the 'SignUp' form is displayed. It contains 3 fields - 'Username', 'Email' and 'Password' and also a button 'Submit'.
When we enter data in the fields and click on the button, the data entered in the fields will be validated and accordingly, we see the next view. If data is invalid, an error message is displayed, if valid, the application navigates to homepage
How do we handle the user click, validate the user data and display the corresponding view?
To implement the requirement of handling user action like a click of a button or link and to respond to these requests by displaying the expected output, server-side languages like Java/JSP can be used as seen in the below diagram.
But server-side languages have certain limitations.
Multiple request-response cycles to handle multiple user requests
More network bandwidth consumption
Increased response time
When invoked on click of the link, this code executes on the client-side itself to validate the user-entered data and accordingly display the corresponding view.
This approach offers the following advantages:
No need for back and forth request-response cycles
Less network bandwidth consumption