עזרה בAJAX

[zoharesh]

שלום,
לא מזמן התחלתי ללמוד להשתמש בAJAX.
יצרתי לי עמוד (בדיקה), עם טופס התחברות.

יש שם משתמש וסיסמא.
ברגע שמזינים פרטים יש הודעה בAJAX שרושמת האם הפרטים נכונים או לא.
שזה בעצם דבר דיי פשוט.

מה שאני רוצה לעשות זה לעשות שהשדה שבו מזינים את שם המשתמש ישתנה (צבע שונה, וכו').

ויש לי עוד שאלה, אני עובד בשיטת GET, משמע יש קובץ login.php וקובץ ajax.php שאיתו בעצם אני בודק את הפרטים במסד ומחזיר פלט (נכון / לא נכון), השאלה שלי אם חייב את הקובץ ajax.php או שניתן לעשות את זה בצורה דומה עם קובץ אחד בלבד (login.php).

אם צריכים פרטים נוספים תגידו ואני אוסיף.
תודה מראש

[mlnn]

אפשר בקובץ אחד. תשתמש ב eval בשביל הצבעים.

אתה יכול לפרט יותר בבקשה?

eval הופכת את הטקסט לקוד, אז אם ה ajax יחזיר "alert(123)" ותעשה לזה eval תקבל הודעה 123.
אז תחזיר פלט כזה שישנה את הצבע (=dhtml), תשתמש בנתיים ב getDocumentById. לעוד מידע, תתחיל לחפש google.co.il

[zoharesh]

נכתב במקור על ידי mlnn

אפשר בקובץ אחד. תשתמש ב eval בשביל הצבעים.

אתה יכול לפרט יותר בבקשה?

[DvirCohen]

אתה פשוט יכול לעשות דבר כזה
נגיד אתה מקבל ok אם הפרטים נכונים או bad אם הפרטים שגויים.

<script type="text/javascript">
  // some ajax code...
  var response = ajaxobj.responseText;

  if ( response == 'ok' )
  {
    text = "<span style='color:green'>הפרטים שהזנת נכונים</span>";
  }
  else
  {
    text = "<span style='color:red'>הפרטים שהזנת שגויים</span>";
  }
   
  document.getElementById('answer').innerHTML = text;
</script>

<form...>
<input...>
</form>
<div id="answer"></div>

בקשר לשאלה השנייה, אתה יכול להשתמש בקובץ אחד.

PHP קוד:

$user = $_GET['user'];
$pass = $_GET['pass'];

$q = mysql_query(...);

print mysql_num_rows() ? "ok" : "bad";
exit(); 


[intercooler3819]

this is an sample ajax request:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script>
$("div#validate_information").click( function() {
   username = $("div#username");
   password = $("div#password");
     $.get("a.php", { user: username.text(), pass: password.text() }, function(returnedValue){
      class = "ohboy";
          if (returnedValue == "okay")
             class = "okay";
      username.addClass(class);
          password.addClass(class);
     });
});
</script>

i really don't know why i wrote it in JQUERY but im not going to rewrite it (;
btw
i would use JSON to serialize the variables i want to send in this stream

[zoharesh]

טוב אפשר להגיד שקצת הסתבכתי עם כל הפתרונות.
אני מחפש משהו פשוט שגם יהיה לי קל להבין אותו (רק לפני מספר ימים התחלתי ללמוד AJAX).

הנה הJS שבטופס התחברות עצמו:

<script type="text/javascript">
function ajaxFunction()
{
var ajaxRequest;
try
  {
  // Firefox, Opera 8.0+, Safari
  ajaxRequest=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    ajaxRequest=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var name = document.getElementById('username').value;
	var pass = document.getElementById('password').value;
	var queryString = "?username=" + name + "&password=" + pass;
	ajaxRequest.open("GET", "ajax.php" + queryString, true);
	ajaxRequest.send(null); 
}
</script>

זה הטופס:

<form method="post" action="">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td><strong>שם משתמש:</strong></td>
<td style="text-align: center;"><input size="16" onblur='ajaxFunction()' name="username" type="text" id="username" value="" style="font-family: Arial;" />
</td>
</tr>
<tr>
<td><strong>סיסמא:</strong></td>
<td style="text-align: center;"><input size="16" onblur='ajaxFunction()' name="password" type="password" id="password" value='' style="font-family: Arial;" /></td>
</tr>
<tr>
<td colspan="2">
<br /><br />
<input type="submit" name="submit" value="התחבר" />
</td>
</tr>
</table>
</form>

וזה הקובץ ajax.php

PHP קוד:

<?
ob_start();
header("Content-type: text/html; charset=windows-1255");
ob_end_clean();
$name = $_GET['username'];
$pass = $_GET['password'];

$ok=1;
    require_once('db.php');
    if($ok==1)
    {
        $passhash=md5($pass);
        $query = "SELECT username, password FROM `users` WHERE `username` = '$name' AND `password` = '$passhash'";
        //$query = "SELECT username FROM `users` WHERE `username` = '$name'";
        $result = mysql_query($query , $link);
        if(mysql_num_rows($result) == 1) {
            echo '<p class="ok">הפרטים שהזנת נכונים =]</p>';
        } else {
            echo '<p class="error">הפרטים שהזנת שגויים!</p>';
        }
    }
?>

אני רק רוצה שהשדה username ישנה את הצבע לכחול (או כל צבע אחר, סתם בשביל הדוגמה) ברגע שהפרטים נכונים.

כרגע ההצעה שנראית לי הכי פשוטה זה של DvirCohen, אבל לא הבנתי איך להחזיר תשובה לקובץ login.

תודה על העזרה

[daMn]

תבדוק את התגובה שקיבלת מהקובץ ajax, ואז תבצע תנאי שאם למשל קיבלת true אז תשנה את צבע המסגרת של השדה.
לשנות צבע מסגרת של שדה הולך ככה:

document.getElementById('username').style.borderColor = 'SomeColor';

הנה לינק לשאר האובייקטים הקימיים בDOM:
http://www.w3schools.com/htmldom/dom_obj_style.asp

ד"א, תאבטח את הנתונים שקיבלת בGET לפני שאתה משווה בשאילתא.

[zoharesh]

נכתב במקור על ידי daMn

תבדוק את התגובה שקיבלת מהקובץ ajax, ואז תבצע תנאי שאם למשל קיבלת true אז תשנה את צבע המסגרת של השדה.
לשנות צבע מסגרת של שדה הולך ככה:

document.getElementById('username').style.borderColor = 'SomeColor';

הנה לינק לשאר האובייקטים הקימיים בDOM:
http://www.w3schools.com/htmldom/dom_obj_style.asp

ד"א, תאבטח את הנתונים שקיבלת בGET לפני שאתה משווה בשאילתא.

תודה רבה
הצלחתי =]

[intercooler3819]

i still can't figure out why you are ignoring my comment?
jquery will save you a lot of time and will make things easier than ever (;

[daMn]

נכתב במקור על ידי nitsanbn

i still can't figure out why you are ignoring my comment?
jquery will save you a lot of time and will make things easier than ever (;

אני מסכים איתך שJQuery מקצר את הדברים ומייעל את הקוד בכמה רמות, אני אישית מעריץ לא קטן של הFW הזה, יחד עם זאת אני חושב שלפני שניגשים לעבודה עם FW כלשהו קודם צריך להבין איך הכול עובד או לפחות רובו, ולפי התיאור הבנאדם צריך לצבור עוד ידע בJS וDOM.