درس التحقق من اسم المستخدم باستخدام الاجاكس [الأرشيف]

walid_8281500

03-23-2009, 05:03 AM

ان شاء الله فى الدرس دا
هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
اولا كود html

<div align='center' > User Name : <input name="username" type="****" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span> </div>

فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
وبين تاجى <head> <head/>
هنكتب جملة الاتصال بمكتبة الاجاكس

<****** src="jquery.js" type="****/**********" language="**********"></******>

والوقتى هنعمل خاصية focus out من مربع النص هنقوم باستدعاء الملفuser_availability.php
واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا ********** التالى

$("#username").blur(function()
{

$("#msgbox").removeClass().addClass('messagebox').****('Check ing...').fadeIn("slow");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //فى حالة اليوزر غير متاح
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</******>

والان مع ملف index.php مع بعض لمسات ال css البسيطة

<html>
<head>
<title>التحقق من اسم التسجيل بالاجكس</title>
<meta http-equiv="Content-Type" content="****/html; charset=windows-1252">
<****** src="jquery.js" type="****/**********" language="**********"></******>
<****** language="**********">

$(********).ready(function()
{
$("#username").blur(function()
{

$("#msgbox").removeClass().addClass('messagebox').****('Check ing...').fadeIn("slow");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //فى حالة اليوزر غير متاح
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</******>
<style type="****/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

</style>
</head>
<body>

<br>
<br>
<div align="center">
<div class="top" > التحقق من user name بالستخدام الاجاكس - <strong>username "traidnt", "egypt-it" ,"ayman" </strong><br>
من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
</div>
<div >
user name : <input name="username" type="****" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>

</div>
</body>
</html>

_____________________________
ملف user_availability.php
فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا

<?php
//هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
$existing_users=array('traidnt','egypt-it','ayman');
$user_name=$_POST['user_name'];
//فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
if (in_array($user_name, $existing_users))
{
//اسم المستخدم غير متاح للتسجيل
echo "no";
}
else
{
//اسم المستخدم متاخ للتسجيل
echo "yes";
}
?>

فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل
لتجربة الاسكربت اضغط هنا (http://www.egypt-it.com/ajax)
الاسكربت مرفق كامل