Member Avatar for doforumda

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.

  • 2 Contributors
  • 1 Reply
  • 86 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Graphix
Member Avatar for Graphix

You can just make 1 general function that needs a parameter named "page". I made the following code snippet for you:

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 showPage(page) {
   if(xhr) {
   
      // Opening the url
	  
	  var url = "";
	  
	  switch (page) {
	  case "home" :
	  url = "pageHome.txt";
      break;
	  
	  case "contact" :
	  url = "pageContact.txt";
	  break;
	  
	  case "portfolio" :
	  url = "pagePortfolio.txt";
	  break;
	  
	  default:
	  url = "pageHome.txt";
	  break;
	  }
	  xhr.open("GET",url, true);
      xhr.send(null);
	  
       xhr.onreadystatechange=function(){
        // If everything is OK:
        if ( (myRequst.readyState == 4) && (myRequst.status == 200) ) {
		 // Showing the results int he updateArea
		 document.getElementById("updateArea").innerHTML = xhr.responseText;
        }
	   }
    } else {
	 document.getElementById("updateArea").innerHTML = "Sorry but the XHR could not be created.";
	}
}

~G

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.