מדריך בדיקה האם שם המישתמש פנוי\תפוס בעזרת AJAX


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

יאלה נתחיל.

שלב אחד - יצירת הקבצים
בנו קובץ HTML שיש שם :
1.טופס
2.שדא לשם מישתמש
3.כפתור בדיקה.

שלב שני - קובץ ה JS ו HTML
צרו קובץ בשם AJAX.js וקשרו אותו לדף HTML.
זה ניראה כך:
קוד HTML:

קוד 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" lang="he" dir="rtl">    <head>        <title>מדריך - AJAX</title>        <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <meta name="generator" content="OnlyKid - Rafael Zilberman" />        <meta name="keywords" content="" />        <meta name="description" content="" />                <!-- JavaScript -->            <script type="text/javascript" src="AJAX.js"></script>        <!-- / JavaScript -->    </head>    <body>        <form action="">            <label for="user">שם מישתמש</label><input type="text" name="username" id="user" value="שם מישתמש" /> <input type="button" value="בדוק" /><br />            <div id="error">                            </div>        </form>    </body></html>
לאחר מיכן בקובץ JS שיצרתם כתבו את הקוד הבא:
קוד PHP:
PHP Code:
function showUser(str

var 
xmlhttp;     
if (
str==""
  { 
  
document.getElementById("txtHint").innerHTML="";//בודק האם הקידו שם מישתמש או לא 
  
return; 
  } 
if (
window.XMLHttpRequest
  {
// code for IE7+, Firefox, Chrome, Opera, Safari 
  
xmlhttp=new XMLHttpRequest();//יוצר HttpRequest חדש 
  

else 
  {
// code for IE6, IE5 
  
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
xmlhttp.onreadystatechange=function() 
  { 
  if (
xmlhttp.readyState==&& xmlhttp.status==200//בודק האם הקובץ החזיר תשובה 
    

    
document.getElementById("error").innerHTML=xmlhttp.responseText;//ממלא את ה DIV במה שהקובץ  החזיר 
    

  } 
xmlhttp.open("GET","user.php?u="+str,true);.//שולח ב GET את המידע לקובץ user.php 
xmlhttp.send(); 

יש קצת הסברים.

שלב שלישי - הPHP
אוקיי דבר אחרון ה SQL.
דבר ראשון צרו חיבור ל MYSQL:
קוד PHP:
PHP Code:
mysql_connect("localhost""root""") or die(mysql_error()); 
mysql_select_db("guides") or die(mysql_error()); 
לאחר מיכן בידקו אם יש GET["u"]:
קוד PHP:
PHP Code:
if(isset($_GET["u"])) 

     

בתוך ה IF צרו שאילה שתישלוף מהמסד נתונים אח וורק אם username שווה ל get["u"]:
קוד PHP:
PHP Code:
$query mysql_query("SELECT * FROM users WHERE `username` = '".$_GET["u"]."'"); 
אחר כך צרו IF שיבדוק האם NUM_ROWS שונה מ 0 - זה אומר ששם המישתמש תפוס.ותעשו גם ELSE:
קוד PHP:
PHP Code:
if(mysql_num_rows($query) != 0
        { 
             
        } 
    else 
        { 
             
        } 
דבר אחרון הוסיפו למקום המתאים מה אתם רוצים שיוצג במיקרה שה נכון\לא נכון:
קוד PHP:
PHP Code:
if(mysql_num_rows($query) != 0
        { 
            echo 
"שם המישתמש <b>".$_GET["u"]."</b> תפוס"
        } 
    else 
        { 
            echo 
"שם המישתמש <b>".$_GET["u"]."</b> פנוי"
        } 
שלב רביעי - דבר אחרון
דבר אחרון חביב.
נעשה שבלחיצה אל הכפתור ה יפנה ל FUNCTION שיצרנו:
קוד HTML:

onclick="showUser(user.value)"
קוד מלא
Index.php:
קוד PHP:
קוד 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" lang="he" dir="rtl"> 
    <head> 
        <title>מדריך - AJAX</title> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        <meta name="generator" content="OnlyKid - Rafael Zilberman" /> 

        <meta name="keywords" content="" /> 
        <meta name="description" content="" /> 
         
        <!-- JavaScript --> 
            <script type="text/javascript" src="AJAX.js"></script> 
        <!-- / JavaScript --> 
    </head> 
    <body> 
        <form action=""> 
            <label for="user">שם מישתמש</label><input type="text" name="username" id="user" value="שם מישתמש" /> <input type="button" value="בדוק" onclick="showUser(user.value)" /><br /> 
            <div id="error"> 
                 
            </div> 
        </form> 
    </body> 
</html>  
AJAX.js:
קוד HTML:

PHP Code:
function showUser(str){var xmlhttp;    if (str=="")  {  document.getElementById("txtHint").innerHTML="";//בודק האם הקידו שם מישתמש או לא  return;  }if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();//יוצר HttpRequest חדש  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200) //בודק האם הקובץ החזיר תשובה    {    document.getElementById("error").innerHTML=xmlhttp.responseText;//ממלא את ה DIV במה שהקובץ  החזיר    }  }xmlhttp.open("GET","user.php?u="+str,true);.//שולח ב GET את המידע לקובץ user.phpxmlhttp.send();} 
user.php:
קוד PHP:
PHP Code:
<?php 
mysql_connect
("localhost""root""") or die(mysql_error()); 
mysql_select_db("guides") or die(mysql_error()); 

if(isset(
$_GET["u"])) 

    
$query mysql_query("SELECT * FROM users WHERE `username` = '".$_GET["u"]."'"); 
    if(
mysql_num_rows($query) != 0
        { 
            echo 
"שם המישתמש <b>".$_GET["u"]."</b> תפוס"
        } 
    else 
        { 
            echo 
"שם המישתמש <b>".$_GET["u"]."</b> פנוי"
        } 

?>