Need help in ajax tabs

doforumda · January 29, 2010

hi i just created ajax tabs. it works fine but it contains too many functions for just three tabs. I want to know any other way to reduce these amount of functions. i am new to ajax. my code is below

data.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="script.js" type="text/javascript"></script>
<style>
.tab {
width: 100px;
height: 25px;
cursor: pointer;
background-color: #069;
}

.tab:hover, .tab:active {
background-color: #0FF;
}
</style>
</head>

<body>
<p><div class="tab" onclick="homePage()">Home</div></p>
<p><div class="tab" onclick="contactPage()">Contact</div></p>
<p><div class="tab" onclick="portfolioPage()">Portfolio</div></p>
<div id="updateArea"></div>
</body>
</html>

and script.js is here

window.onload = initAll;
var xhr = false;

function initAll() {
if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
}
else {
	if(window.ActiveXObject) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) { }
	}
}
}
function homePage() {
if(xhr) {
	xhr.onreadystatechange = showHomeContents;
	xhr.open("GET","pageHome.txt", true);
	xhr.send(null);
}
else {
	document.getElementById("updateArea").innerHTML = "Sorry but the XHR could not be created.";
}
}

function contactPage() {
if(xhr) {
	xhr.onreadystatechange = showContactContents;
	xhr.open("GET","pageContact.txt", true);
	xhr.send(null);
}
else {
	document.getElementById("updateArea").innerHTML = "Sorry but the XHR could not be created.";
}
}

function portfolioPage() {
if(xhr) {
	xhr.onreadystatechange = showPortfolioContents;
	xhr.open("GET","pagePortfolio.txt", true);
	xhr.send(null);
}
}

function showHomeContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
			var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

function showContactContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
			var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

function showPortfolioContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
		var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

please help me how can i make this more efficient. i dont want to use jquery. I need this without jquery.

doforumda · January 29, 2010

anybody who can help i am still waiting

Sign In

Need help in ajax tabs

Recommended Posts

doforumda

Link to comment

Share on other sites

doforumda

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information