Ajax
Basic Example – responseText
Here
is a basic AJAX example which write to demonstrate get the response
by text.
Out
put -
Once
click the “Answer” button the AJAX response as follow.
Below
are the steps for the above example.
1.
AjaxBasicResponseText.html
<!DOCTYPE
html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>AJAX
Basic - ResponseText</title>
<style
type="text/css">@IMPORT
url("css/AjaxBasic.css");</style>
<script>
function
loadXMLDoc(){
var
xmlhttp;
if
(window.XMLHttpRequest){
//
code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new
XMLHttpRequest();
}else{
//
code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4
&& xmlhttp.status==200){
document.getElementById("whatAJAXDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","resource/AjaxBasic.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX
→ Asynchronous JavaScript and XML</h2>
<p>*
AJAX is a mechanism of exchanging data with a server, and updating
parts of a web page, without reloading the whole page.</p>
<p>*
What is AJAX ?.</p>
<div
id="whatAJAXDiv"
class="bluefont"></div>
<br>
<button
onclick="loadXMLDoc()">Answer</button>
</body>
</html>
2.
AjaxBasic.css
@CHARSET
"UTF-8";
body{
font-size:
12px;
font-family:
sans-serif;
}
.redfont{
color:
red;
}
.bluefont{
color:
blue;
}
.h1Gray{
color:
gray;
}
3.
AjaxBasic.txt
<p
class="redfont">AJAX is a technique for creating
fast and dynamic web pages</p>
Examples
of applications using AJAX:<br>
* Google
Maps,<br>
* Gmail,<br>
* Youtube<br>
