AJAX reuse xmlhttprequest object

[wdean]

I am experienced with PHP and JavaScript, but I'm new to AJAX. I'm having a bit of trouble getting this code to work right. It will run option 1 just fine, but it never makes it to the onstatechange function when I try option 2. What do I need to do to make this thing work?

 

function ajaxFunction(x)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
	alert("Your browser does not support XMLHTTP!");
}

xmlhttp.open("POST",ajaxSelector(x),true);

xmlhttp.onreadystatechange=function()
{
	if(xmlhttp.readyState==4)
	{
	  ajaxResponse(x,xmlhttp.responseText);
	}
}

xmlhttp.send(null);
}

function ajaxSelector(x)
{
var page;

if (x == 1)
{
	page = "includes/header_panel/login_form.php";
}
else if (x == 2)
{
	page = "includes/scripts/login.php";
}

return page;
}

function ajaxResponse(x,str)
{
if (x == 1)
{
	var link = document.getElementById('loginLink');
	var headerboard = document.getElementById("headerboard");

	if (link.innerHTML == 'Login')
	{
		link.innerHTML = 'Close';
		headerboard.innerHTML = str;
	} else {
		link.innerHTML = 'Login';
		headerboard.innerHTML = '';
	}
}
else if (x == 2)
{
	document.getElementById('headerboard').innerHTML = 'test';
}
}

[rhodesa]

if you reuse the same object, you will run into issues. I would recommend using a JS library like jQuery for you AJAX (and all JS needs). It will save you hours upon hours of sanity.

[wdean]

Thanks, I'll look into jQuery.

[rhodesa]

for instance...with jQuery, the code to get a page and insert it into a DIV is:

 

$('#headerboard').load("includes/scripts/login.php");

...that's it...no other code needed