Every time when I look at the capabilities of Ajax, I get amazed. JQuery, Dojo etc all just advanced flavour of this but back end its Ajax, same plane JavaScript and XML. Uses to are too impressive like Google Map, RSS feeds or many Asynchronous calls application. I tried to learn JQuery many times. Here I’ll discuss and show my small understanding of Ajax.
Ajax is supported by all major browser with some variation. For using ajax object in IE ActiveXObject is used otherwise XMLHttpRequest is used.
function Ajax(obj_id){
var x = document.getElementById(obj_id);
if(x != null )
{
var link = x.childNodes[0].getAttribute("href")+'?queryid='+Math.random()*Math.random();
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var http = req;
http.open("GET",link,true);
http.onreadystatechange = function(){
//alert(link+'===='+http.readyState);
if(http.readyState==4){
//alert(link+'===='+http.status);
if(http.status==200 ){
x.style.backgroundColor='#00FF00';
}else{
x.style.backgroundColor='#0000FF';
}
}else{
x.style.backgroundColor='#FF0000';
}
}
http.send(null);
}
}
This function do the major work of connecting to source and fetch the status whether up or down. Now automatic checking need to be put while page loads.
function LoadAjax(){
//alert("loadajax");
Ajax("gmail");
Ajax("technospire");
Ajax("google");
Ajax("crap");
setTimeout('LoadAjax()',10000);
}
window.onload=LoadAjx();
Full code will be like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-16">
<script language="javascript">
function LoadAjax(){
//alert("loadajax");
Ajax("gmail");
Ajax("google");
Ajax("technospire");
Ajax("crap");
setTimeout('LoadAjax()',10000);
}
function Ajax(obj_id){
var x = document.getElementById(obj_id);
if(x != null )
{
var link = x.childNodes[0].getAttribute("href");//+'?queryid='+Math.random()*Math.random();
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var http = req;
http.open("GET",link,true);
http.onreadystatechange = function(){
//alert(link+'===='+http.readyState);
x.childNodes[0].style.color='#000000';
if(http.readyState==4){
//alert(link+'===='+x.style.color+"-----"+http.status);
var s= document.getElementById(obj_id+"res");
if(s!=null)s.innerText=http.status;
if(http.status==200 ){
x.style.backgroundColor='#00FF00';
}else{
x.childNodes[0].style.color='#FFFFFF';
x.style.backgroundColor='#0000FF';
}
}else{
x.childNodes[0].style.color='#FFFFFF';
x.style.backgroundColor='#FF0000';
}
}
http.send(null);
}
}
window.onload=LoadAjax;
</script>
<style>
a{TEXT-DECORATION: NONE}
table.sub{BACKGROUND-COLOR:#CCCCCC}
th{BACKGROUND-COLOR:#BBBBBB}
</style>
</head>
<body style="font-family:sans-serif;text-align=center">
<center>
<h2>Automatic Link Checker</h2>
<table class="sub" style="font-family:sans-serif;text-align=center" frame="void" width=250px >
<tr>
<td id="gmail" bgcolor="#DDDDDD" ><a href="http://mail.google.com">Gmail</a>
<td id="google" bgcolor="#DDDDDD" ><a href="http://www.google.co.in">Google</a>
<tr>
<td id="technospire" bgcolor="#DDDDDD" ><a href="http://technospire.blogspot.com">Blog</a>
<td id="crap" bgcolor="#DDDDDD" ><a href="http://localhostlist.site.com">Crap Site</a>
</table>
<br>
</center>
</body>
<footer style="bottom=0">
<br>
<hr>
Copywright(c) 2011 by Ankur Gupta
</footer>
</html>
Ajax is supported by all major browser with some variation. For using ajax object in IE ActiveXObject is used otherwise XMLHttpRequest is used.
function Ajax(obj_id){
var x = document.getElementById(obj_id);
if(x != null )
{
var link = x.childNodes[0].getAttribute("href")+'?queryid='+Math.random()*Math.random();
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var http = req;
http.open("GET",link,true);
http.onreadystatechange = function(){
//alert(link+'===='+http.readyState);
if(http.readyState==4){
//alert(link+'===='+http.status);
if(http.status==200 ){
x.style.backgroundColor='#00FF00';
}else{
x.style.backgroundColor='#0000FF';
}
}else{
x.style.backgroundColor='#FF0000';
}
}
http.send(null);
}
}
This function do the major work of connecting to source and fetch the status whether up or down. Now automatic checking need to be put while page loads.
function LoadAjax(){
//alert("loadajax");
Ajax("gmail");
Ajax("technospire");
Ajax("google");
Ajax("crap");
setTimeout('LoadAjax()',10000);
}
window.onload=LoadAjx();
Full code will be like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-16">
<script language="javascript">
function LoadAjax(){
//alert("loadajax");
Ajax("gmail");
Ajax("google");
Ajax("technospire");
Ajax("crap");
setTimeout('LoadAjax()',10000);
}
function Ajax(obj_id){
var x = document.getElementById(obj_id);
if(x != null )
{
var link = x.childNodes[0].getAttribute("href");//+'?queryid='+Math.random()*Math.random();
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var http = req;
http.open("GET",link,true);
http.onreadystatechange = function(){
//alert(link+'===='+http.readyState);
x.childNodes[0].style.color='#000000';
if(http.readyState==4){
//alert(link+'===='+x.style.color+"-----"+http.status);
var s= document.getElementById(obj_id+"res");
if(s!=null)s.innerText=http.status;
if(http.status==200 ){
x.style.backgroundColor='#00FF00';
}else{
x.childNodes[0].style.color='#FFFFFF';
x.style.backgroundColor='#0000FF';
}
}else{
x.childNodes[0].style.color='#FFFFFF';
x.style.backgroundColor='#FF0000';
}
}
http.send(null);
}
}
window.onload=LoadAjax;
</script>
<style>
a{TEXT-DECORATION: NONE}
table.sub{BACKGROUND-COLOR:#CCCCCC}
th{BACKGROUND-COLOR:#BBBBBB}
</style>
</head>
<body style="font-family:sans-serif;text-align=center">
<center>
<h2>Automatic Link Checker</h2>
<table class="sub" style="font-family:sans-serif;text-align=center" frame="void" width=250px >
<tr>
<td id="gmail" bgcolor="#DDDDDD" ><a href="http://mail.google.com">Gmail</a>
<td id="google" bgcolor="#DDDDDD" ><a href="http://www.google.co.in">Google</a>
<tr>
<td id="technospire" bgcolor="#DDDDDD" ><a href="http://technospire.blogspot.com">Blog</a>
<td id="crap" bgcolor="#DDDDDD" ><a href="http://localhostlist.site.com">Crap Site</a>
</table>
<br>
</center>
</body>
<footer style="bottom=0">
<br>
<hr>
Copywright(c) 2011 by Ankur Gupta
</footer>
</html>
