How does the system manage state in stateless HTTP? Design a page to show client side validation for login page using jquery or angular or react.
HTTP is called a stateless protocol because each command request is executed independently, without any knowledge of the requests that were executed before it.
A few techniques can be used to maintain state information across multiple HTTP requests:
1. Cookies: A web server can assign a unique session ID as a cookie to each web client and for subsequent requests from the client they can be recognized using the received cookie.
2. Hidden fields of the HTML form: Web server can send a hidden HTML form field along with a unique session ID as follows:
<input type = "hidden" name = "sessionid" value = "12345">
This entry means that, when the form is submitted, the specified name and value are automatically included in the GET or the POST data. Each time the web browser sends the request back, the session_id value can be used to keep the track of different web browsers.
3. URL rewriting: We can append some extra data at the end of each URL. This data identifies the session; the server can associate that session identifier with the data it has stored about that session. For example, with https://collegenote.com/file.htm;sessionid=12345, the session identifier is attached as sessionid = 12345 which can be accessed at the web server to identify the client.
Client Side Validation using jQuery
<html>
<head>
<title>Jquery login page validation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var username=$('#user').val();
var password=$('#pass').val();
if(username=="")
{
$('#dis').slideDown().html("<span>Please type Username</span>");
return false;
}
if(password=="")
{
$('#dis').slideDown().html('<span id="error">Please type Password</span>');
return false;
}
});
});
</script>
</head>
<body>
<fieldset style="width:250px;">
<form method="post" action="">
<label id="dis"></label><br>
Username: <input type="text" name="user" id="user" /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<center><input type="submit" name="submit" id="submit" /></center>
</form>
</fieldset>
</body>
</html>
Comments
Post a Comment