Create a program to change the content of the web page using
AJAX. (or) Create a program in AJAX using Javascript, DHTML
and the XMLHttpRequest object to perform a GET or POST and
return a result without reloading the HTML page.
PROGRAM:
Hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello AJAX</title>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","rec.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Welcome</h2></div>
<button type="button" onclick="loadXMLDoc()">
Get Message
</button>
</body>
</html>
rec.txt
Hello Ajax World
BHUVANESWARAN B / AP (SS) / CSE / REC - 2
OUTPUT:
BHUVANESWARAN B / AP (SS) / CSE / REC - 3
Create a program to implement the concept of asynchronous java
script XML for webpage login process.
PROGRAM:
Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login</title>
<script>
function postRequest(strURL)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
updatePage(xmlhttp.responseText);
}
}
xmlhttp.open("GET", strURL, true);
xmlhttp.send(strURL);
}
function updatePage(str)
{
if(str == "yes")
{
alert("Welcome User");
}
else
{
alert("Invalid Login! Please try again!");
}
}
BHUVANESWARAN B / AP (SS) / CSE / REC - 4
function calllogin()
{
var username = window.document.frmlogin.username.value;
var password = window.document.frmlogin.password.value;
var url = "Login?username="+username+"&password=" + password;
postRequest(url);
}
</script>
</head>
<body>
<form name="frmlogin" onsubmit="return calllogin()">
<h1>Login</h1>
User Name :
<input type="text" name="username">
Password :
<input type="password" name="password">
<input type="submit" value="Login">
</form>
</body>
</html>
BHUVANESWARAN B / AP (SS) / CSE / REC - 5
Login.java
import java.io.IOException;
import java.io.PrintWriter;
import
import
import
import
import
javax.servlet.ServletException;
javax.servlet.annotation.WebServlet;
javax.servlet.http.HttpServlet;
javax.servlet.http.HttpServletRequest;
javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Login
*/
@WebServlet("/Login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request,
HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
if(username.equals("admin") && password.equals("admin"))
out.print("yes");
else
out.print("no");
}
}
BHUVANESWARAN B / AP (SS) / CSE / REC - 6
OUTPUT:
BHUVANESWARAN B / AP (SS) / CSE / REC - 7
BHUVANESWARAN B / AP (SS) / CSE / REC - 8
BHUVANESWARAN B / AP (SS) / CSE / REC - 9
BHUVANESWARAN B / AP (SS) / CSE / REC - 10