PROGRAM
TO IMPLEMENT AJAX TECHNOLOGY
AIM:
To implement AJAX technology
PROCEDURE
Step1 – Run XAMPP and Start Apache Web
Server
Step2 –Download this file(jquery.min.js)
from the url below
Step3 – Copy these three files
(Ajax.html, jquery.min.js and script.php)
in this Location(C:\xampp\htdocs)
Step4 – type localhost/Ajax.html in
address bar in any Web Browser( Eg. Firefox)
Step 5 – Do not reload the page.
Step
6- Press “Click Me” button
Step
7- Press JavaScript alert “OK” button to see the effect of AJAX.
Step
8- Repeat the Step 6 to visualize the current time without refreshing the whole
page.
Step
9- Close the browser. Exit.
Program
Code: script.php
<?php
date_default_timezone_set('Asia/Kolkata');
echo "The time is " .
date("h:i:sa");
?>
Program
Code: Ajax.html
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<script
src="jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
type: 'POST',
url:
'http://localhost/script.php',
success:
function(data) {
alert("Click
Again!!");
$("#results").append("<p>"
+ data + "</p>");
}
});
console.log("Clicked");
});
});
</script>
</head>
<body>
<p>Ajax is a client-side script that communicates
to a server without complete page refresh.</p>
<p>Click the below button to see the
effect of AJAX<p>
<button type="button"
id="button">Click Me</button>
<div
id="results"></div>
</body>
</html>
Program
Code: jquery.min.js
This is a jQuery library file. Download
this file(jquery.min.js) from the url below
Output:
RESULT
Thus the
implementation of AJAX technology was executed and verified successfully.
