Ajax Login

MrDarko · #1 (**permalink**) 02-23-06, 04:05 AM

have an ajax script i got from a tutoral, basiclly i have gotten the script to work just echo-ing dynamic info i am using a post methos to get info from a login form and query a database and login or give some error message. well i am new to the whole ajax thing and im not a good php programmer. below is my php script my ajax scritp calls, all iam trying to do now is have it echo the username and password fromt eh form just as a test i can fill in the rest later.

ajax.php

PHP Code:


			
<?PHP 

session_start();

include 'config.php';



if ($_POST['dob'] == "countPosts") { 



$username = $_POST['username'];

$password = $_POST['password'];

echo $username;

echo $password;

} 

?>

here is index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=javascript type=text/javascript>

	// Set path to PHP script
	var phpscript = 'ajax.php';
	
	function createRequestObject() {
	
		var req;
	
		if(window.XMLHttpRequest){
			// Firefox, Safari, Opera...
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			// Internet Explorer 5+
			req = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			// There is an error creating the object,
			// just as an old browser is being used.
			alert('There was a problem creating the XMLHttpRequest object');
		}
	
		return req;
	
	}
	
	// Make the XMLHttpRequest object
	var http = createRequestObject();
	
	function sendRequestGet(act) {
	
		// Open PHP script for requests
		http.open('get', phpscript+'?act='+act);
		http.onreadystatechange = handleResponseGet;
		http.send(null);
	
	}
	
	function sendRequestPost(dob) {
	
		// Open PHP script for requests
		http.open('post', phpscript);
		http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		http.onreadystatechange = handleResponsePost;
		http.send('dob='+dob);
	
	
	}
	
	function handleResponseGet() {
	
		if(http.readyState == 4 && http.status == 200){
	
			// Text returned from PHP script
			var response = http.responseText;
	
			if(response) {
				// Update ajaxTest content
				document.getElementById("ajaxTest").innerHTML = response;
			}
	
		}
	}
	
	function handleResponsePost() {
	if(http.readyState == 1){ 
			document.getElementById("countPosts").innerHTML = "Please wait, loading... <img src=loading.gif align=middle>" ; 
		} else if(http.readyState == 4 && http.status == 200){
	
			// Text returned from PHP script
			var response = http.responseText;
	
			if(response) {
				// Update ajaxTest2 content
				document.getElementById("countPosts").innerHTML = response;
			}
	
		}
	}
	
</SCRIPT>
<STYLE type=text/css>
H1 {
	FONT-SIZE: 22px; MARGIN: 0px 0px 5px; COLOR: #0099ff; FONT-FAMILY: "Trebuchet MS"; TEXT-ALIGN: justify
}
H2 {
	FONT-SIZE: 16px; MARGIN: 0px 0px 5px; COLOR: #000099; FONT-FAMILY: "Trebuchet MS"; TEXT-ALIGN: justify
}
BODY {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TD {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TH {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
INPUT {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
SELECT {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TEXTAREA {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
HR {
	MARGIN: 10px 0px; WIDTH: 100%; COLOR: #000000; HEIGHT: 1px
}
BODY {
	MARGIN: 25px 10px
}
#ajaxTest {
	BORDER-RIGHT: #333333 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #333333 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: justify
}
#ajaxTest2 {
	BORDER-RIGHT: #333333 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #333333 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: justify
}
#wrapper {
	WIDTH: 700px; TEXT-ALIGN: justify
}
#code {
	BORDER-RIGHT: #999999 1px dashed; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px dashed; PADDING-LEFT: 5px; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px dashed; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px dashed; FONT-FAMILY: "Courier New", Courier, mono; BACKGROUND-COLOR: #efefef
}
.code {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: "Courier New", Courier, mono
}
A:link {
	TEXT-DECORATION: none
}
A:visited {
	COLOR: #cc0000; TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: none
}
A:active {
	TEXT-DECORATION: none
}
</STYLE>

<META content="MSHTML 6.00.2800.1528" name=GENERATOR></HEAD>
<BODY>
<form method="post" action="">
<p>Username:<br>
  <input name="username" type="text" id="username">
  <p>Password:<br>
    <input name="password" type="password" id="password">
</p>
<p> 
  <input name="button" type="button" id="submit" onClick=sendRequestPost('countPosts'); value="Login" />
</p>
  </form>
<DIV id=countPosts>
</DIV>
<BR>
<br>
</BODY>
</HTML>

oh please help me or lead me in the right direction

Nico · #2 (**permalink**) 02-27-06, 04:42 AM

That's a real nice script! Thanks for posting it.

You weren't sending the username and password, and the "Get" request and handle aren't necessary in your case. This should work:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language="javascript" type="text/javascript">

	// Set path to PHP script
	var phpscript = 'ajax.php';
	
	function createRequestObject() {
	
		var req;
	
		if(window.XMLHttpRequest){
			// Firefox, Safari, Opera...
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			// Internet Explorer 5+
			req = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			// There is an error creating the object,
			// just as an old browser is being used.
			alert('There was a problem creating the XMLHttpRequest object');
		}
	
		return req;
	
	}
	
	// Make the XMLHttpRequest object
	var http = createRequestObject();
	
	
	function sendRequestPost() {
		
		var user = document.getElementById('username').value;
		var pass = document.getElementById('password').value;
	
		// Open PHP script for requests
		http.open('post', phpscript);
		http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		http.onreadystatechange = handleResponsePost;
		http.send('username='+ user +'&password='+ pass);
	
	}
	
	
	function handleResponsePost() {
	if(http.readyState == 1){ 
			document.getElementById("response").innerHTML = "Please wait, loading... <img src=loading.gif align=middle>" ; 
		} else if(http.readyState == 4 && http.status == 200){
	
			// Text returned from PHP script
			var response = http.responseText;
	
			if(response) {
				// Update ajaxTest2 content
				document.getElementById("response").innerHTML = response;
			}
	
		}
	}
	
</SCRIPT>
<STYLE type=text/css>
H1 {
	FONT-SIZE: 22px; MARGIN: 0px 0px 5px; COLOR: #0099ff; FONT-FAMILY: "Trebuchet MS"; TEXT-ALIGN: justify
}
H2 {
	FONT-SIZE: 16px; MARGIN: 0px 0px 5px; COLOR: #000099; FONT-FAMILY: "Trebuchet MS"; TEXT-ALIGN: justify
}
BODY {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TD {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TH {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
INPUT {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
SELECT {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
TEXTAREA {
	FONT-SIZE: 11px; COLOR: #454545; FONT-FAMILY: Verdana
}
HR {
	MARGIN: 10px 0px; WIDTH: 100%; COLOR: #000000; HEIGHT: 1px
}
BODY {
	MARGIN: 25px 10px
}
#ajaxTest {
	BORDER-RIGHT: #333333 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #333333 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: justify
}
#ajaxTest2 {
	BORDER-RIGHT: #333333 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #333333 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: justify
}
#wrapper {
	WIDTH: 700px; TEXT-ALIGN: justify
}
#code {
	BORDER-RIGHT: #999999 1px dashed; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px dashed; PADDING-LEFT: 5px; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px dashed; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px dashed; FONT-FAMILY: "Courier New", Courier, mono; BACKGROUND-COLOR: #efefef
}
.code {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: "Courier New", Courier, mono
}
A:link {
	TEXT-DECORATION: none
}
A:visited {
	COLOR: #cc0000; TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: none
}
A:active {
	TEXT-DECORATION: none
}
</STYLE>

<META content="MSHTML 6.00.2800.1528" name="GENERATOR"></HEAD>
<BODY>
<form method="post" action="">
<p>Username:<br>
  <input name="username" type="text" id="username">
  <p>Password:<br>
    <input name="password" type="password" id="password">
</p>
<p> 
  <input name="button" type="button" id="submit" onClick="sendRequestPost();" value="Login" />
</p>
  </form>
<DIV id="response"></DIV>
<BR>
<br>
</BODY>
</HTML>

PHP Code:


			
<?php 

session_start();

include ('config.php'); 



$username = $_POST['username'];

$password = md5($_POST['password']);



$query = mysql_query("SELECT * FROM users WHERE user='". $username ."' AND pass='". $password ."'");

$result = mysql_num_rows($query);

$row = mysql_fetch_array($query);



if ($result == 1)

{

    $_SESSION["user"] = $row["user"];

    

    echo 'Logged in, '. $row["user"];

}

else

{

    echo 'Wrong username or password.';

}



?>

MrDarko · #3 (**permalink**) 03-01-06, 07:12 PM

Thank You, Sorry, I should have noticed, but i do appreciate your help greatly

dlarez · #4 (**permalink**) 03-02-09, 05:12 PM

great code!
how could you make the jumpto page?
i mean, after successfully login, redirect the user to another page.

Shto · #5 (**permalink**) 03-03-09, 03:34 AM

Quote:

Originally Posted by dlarez

great code!
how could you make the jumpto page?
i mean, after successfully login, redirect the user to another page.

Either use the header function in PHP, or use document.location after a successful login in JavaScript. So if the function returns "Logged in", then you change the document.location to what you want to show for a successful login, otherwise you redirect to the unsuccessful login page.

Olojobnog · #6 (**permalink**) 03-03-09, 06:18 PM

My only issue with the document.location thing is that whats the point. Feels like Ajax for the sake of it. By all means validate your forms using Javascript but if you're just going to redirect anyway why not just naturally post back. Ajax is excellent and I love to see good uses of it around the web but its not accessible and people should always concentrate on a non-ajax version before they build Ajax on top. Look at reddit, i discovered today you can't delete your bookmarks without javascript on, ace if I want to use my phone or my PSP. Harmful for screen readers too. In my opinion (and thats exactly what it is and I'm not trying to cause an argument), Ajax logins should only be used if once its logged you in the page does not refresh or redirect, just plain renders what you are meant to see on the new page.