Scribd
Upload
17 views3 pages

FST Experiment 1

Uploaded by

the.boys.of.cse.b
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views3 pages

FST Experiment 1

Uploaded by

the.boys.of.cse.b
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

FULL STACK TECHNOLOGIES LAB

EXPERIMENT-1: Create Web pages using AJAX


PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a ajax1.html file.
Step 2: Create a text file ajax1.txt
Step 3: Run the ajax1.html file
To run the ajax1.html file using Ctrl+1 or Right click on the ajax1.html file and
Click on the Open In Default Browser then output will be displayed on the web
page.

SOURCE CODE: ajax1.html

<!DOCTYPE html>
<html>
<head>
<br><br><br>
<center><img src="autonoms logo.jpg" width="200" height="200" alt="Welcome"></center>
<h1 style="font-size:45px;color: rgb(255, 0, 72);margin-top:5px;"><center><marquee>
<b>WELCOME TO ST.ANN's COLLEGE OF ENGINEERING &TECHNOLOGY</b>
</center></marquee></h1>
<font face="verdana" size="6" color="blue">
<h2 ><center><b>DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
</center></font></h2>
<script language ="javascript">
function loadDoc()
{
var xhttp = new XMLHttpRequest(); // create the XMLHttpRequest object.
//Opens the request specifying get or post method and url, but specifies asynchronous or not.
xhttp.open("GET","ajax1.txt", true);
xhttp.send(); //Sends GET request.
//onreadystatechange property defines a function to be executed when the readyState changes.
//A callback function is a function passed as a parameter to another function.
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200) //Holds the status of the XMLHttpRequest.
//When readyState is 4 and status is 200, the response is
ready
{
// getElementById() finds element with id 'demo' and returns an object of type element.
//The innerHTML property sets or returns the HTML content of an element div.
document.getElementById("demo").innerHTML = this.responseText;
}
};
}
</script>
</head>
<body>
<div id="demo">
<h2 style="font-size:40px;color: rgb(255, 0, 170);margin-top:5px;"><center>WELCOME TO
AJAX </center></h2>
<center><button type="button" onclick="loadDoc()"> <font face="verdana"
size="3"color="green"><h2>CHANGE CONTENT</button></h2></center></font>
</div>
</body>
</html>

Ajax1.txt
AJAX is a Group of inter-related Technologies like HTML, CSS, JavaScript, XML, DOM etc.

OUTPUT:
If we click on ‘CHANGE CONTENT’ button then ‘ajax1.txt’ file content will be displayed as
shown below.

You might also like