How do I get out of ajax loop

JavaScript
1

Hi all,

I’ve successfully got the Ajax working with the POST method with the codes bellow. But in stead of taking a logged in user to the user area, it pulled the home.php to the <div id=“message”></div> block. So how do I take a logged in user to the user area directly.

Forgive me if the question stupid, I’ve just learned ajax and javascript seriously two days ago. But I have used javascript for years knowing only how to use something like <script src=“js/jquery.ajax.googleapi.1.4.2.js”></script> in the header section.


<html>
<head>
<title>PHP using AJAX</title>
<script type="text/javascript">
 
var time_variable;
 
function getXMLObject() { //XML OBJECT

	var xmlHttp = false;
	try {
		xmlHttp = new XMLHttpRequest();  //For Mozilla, Opera Browsers
	} catch (e) {
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
			} catch (e) {
				xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
			}
		}		
	}	
	return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
 
function ajaxFunction() {
	var getdate = new Date();  //Used to prevent caching during ajax call
	if(xmlhttp) { 
		var email = document.getElementById("email");
		var password = document.getElementById("password");
		xmlhttp.open("POST","check.php",true); //calling testing.php using POST method
		xmlhttp.onreadystatechange  = handleServerResponse;
		xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xmlhttp.send("email=" + email.value + "&password=" + password.value); //Posting email, password to PHP File
	}
}
 
function handleServerResponse() {
	if (xmlhttp.readyState == 4) {
		if(xmlhttp.status == 200) {
			document.getElementById("message").innerHTML = xmlhttp.responseText; //Update the HTML Form element 
		}
		else {
			alert("Error during AJAX call. Please try again");
		}
	}
}

</script>
<body>
<form method="post" name="myForm">
	<table>
		<tr>
			<td>Enter Email</td>
			<td><input type="text" name="email" id="email" /></td>
		</tr>
		<tr>
			<td>Password</td>
			<td><input type="password" name="password" id="password" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
		</tr> 
	</table>	
</form>
<div id="message" name="message"></div> 
</body>
</head>
</html>
2

So how do I take a logged in user to the user area directly.

You have 2 ways to do that:

  • Modify check.php to return related data if checking success.
  • Open user area page if checking success:

function handleServerResponse() {
	if (xmlhttp.readyState == 4) {
		if(xmlhttp.status == 200) {
                      [COLOR="Red"]location.replace('home.php');[/COLOR]
[COLOR="Silver"]			//document.getElementById("message").innerHTML = xmlhttp.responseText; //Update the HTML Form element 
[/COLOR]		}
		else {
			alert("Error during AJAX call. Please try again");
		}
	}
}
3

Can you please elaborate, I cannot figure out. My login check is quite simeple like bellow:

if($_POST[‘email’] == $row[‘email’] && $_POST[‘password’] == $row[‘password’]){
header(‘location: home.php’);
} else {
echo “The submit information is incorrect.”;
}

How do I modify from this?

4

Ajax requests work in the background so any headers you set won’t take effect, the easy solution is to return a small integer of either 1 or 0. 1 been true and 0 been false, doing this would allow you to use a function called parseInt() so you can do something like the below example.

PHP

if ($_POST['email'] == $row['email'] && $_POST['password'] == $row['password']) {
    exit(1);
} else {
    exit(0);
}

JavaScript

if (xmlhttp.status == 200) {
    var s = parseInt(xmlhttp.responseText);
    
    if (true === s) {
        window.location = 'home.php';
    } else {
        // Let the user know the credentials they entered are wrong
    }
}

On a side note and i say this every time i encounter users using Ajax for login scripts, unless you use SSL i don’t recommend SSL login’s as they are just too in-secure. It’s up to you whether you continue to use it but me personally i would never use Ajax for any time of form that requires a password as its too easy for hackers to jump in and take the password from thin air.

I know its not common but would you rather keep your users safe or risk them to been open for hackers to work there magic.

5

Thanks for suggestion. If it come with security concerns, I would definitely ditch this fancy features.

6

*Typo, i meant “unless you use SSL i don’t recommend Ajax login’s”