کد آژاکس برای ارسال اطلاعات فرم
قبل از هر چیز باید موتور پایه ی کارمان را برنامه نویسی کنیم، در اینجا کد ما مبتنی بر آژاکس (ajax) و XMLHttpRequest (برای تمام مرورگرها به جزء نسخه های قدیمی اینترنت اکسپلورر) یا ActiveXObject (برای اینترنت اکسپلورر نسخه 7 و ماقبل) خواهد بود، در مجموع ما به کدی نیاز داریم که اطلاعات فیلدهای فرم را دریافت کرده، به سرور ارسال کند و تا هنگام دریافت پاسخ سرور، یک پیام یا تصویر مبنی بر درحال پردازش بودن درخواست نشان و در نهایت نیز پاسخ سرور را در یک بلاک div خروجی دهد؛ از این رو از کد زیر استفاده می کنیم.
<script type="text/javascript">
//<![CDATA[
function AjaxRequest(inputname,divid,inputvalue){
var formvalue = inputname+"="+inputvalue.value;
var loadingmessage = <img src="loading.gif" alt="loading" height="16" width="16" />;
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState<4){
document.getElementById(divid).innerHTML=loadingmessage;
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(divid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","validate.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(formvalue);
}
//]]>
</script>
توضیح:
- تابع اصلی کد، AjaxRequest نام دارد که یک عنوان دلخواه و فرضی است، این تابع از سه آرگومان استفاده می کند که به ترتیب، نام فیلد مورد نظر، آی دی فیلد و مقادیر آن را در خود نگهداری می کنند.
- در متغیر formvalue، مقادیر را برای ارسال از طریق xmlhttp.send آماده می کنیم، به طور مثال اگر inputname برابر usertext باشد و inputvalue برابر 1، مقادیر متغیر formvalue به صورت usertext=1 خواهد بود، به این صورت در سمت سرور می توان به صورت زیر اطلاعات را دریافت کرد.
<?php
$usertext = $_POST[usertext];
?>
- متغیر loadingmessage برای نمایش یک تصویر، در حالتی که xmlhttp.readyState<4 است استفاده می شود.
- اطلاعات فیلدهای فرم با متد POST به فایل validate.php ارسال می شوند.
- در نهایت نیز پاسخ سرور با innerHTML و responseText در بلاک div خروجی داده می شود.
نحوه استفاده و فراخوانی تابع آژاکسی
برای اینکه موتور آژاکسی ما به کار بیفتد، لازم است که با استفاده از رویدادهای جاوا اسکریپت نظیر onkeyup یا onchange این کار را انجام دهیم، در نمونه زیر از onchange استفاده کرده ایم.
<form action="validate.php" method="post">
اعتبار سنجی عدد بودن مقادیر:<br /><br />
<input type="text" name="usertext" id="usertext" onchange="AjaxRequest(usertext,showresult-1,this);" />
<div class="inline" id="showresult-1"></div><br />
اعتبار سنجی معتبر بودن ایمیل:<br /><br />
<input type="text" name="usermail" id="usermail" onchange="AjaxRequest(usermail,showresult-2,this);" />
<div class="inline" id="showresult-2"></div><br />
اعتبار سنجی معتبر بودن آدرس سایت:<br /><br />
<input type="text" name="usersite" id="usersite" onchange="AjaxRequest(usersite,showresult-3,this);" />
<div class="inline" id="showresult-3"></div><br />
</form>
توضیح:
- اگر دقت کرده باشید، برای هر فیلد، تابع AjaxRequest را با سه آرگومان فراخوانی کرده ایم، آرگومان اول نام فیلد، آرگومان دوم آی دی بلاک div و آرگومان سوم مقادیر فرم را برمی گرداند؛ به این صورت مواد اولیه به تابع داده شده و تابع درخواست را به سرور ارسال می کند، در نهایت پاسخ سرور در آن بلاک div خروجی داده می شود.
- همان طور که گفتیم، در این مثال از رویداد onchange استفاده کرده ایم که بنا به نیاز خود می توانید از سایر رویدادها مانند onkeyup، onblur، onfocus و... نیز استفاده کنید.
کد php برای پردازش اطلاعات ارسالی
با توجه به هدف شما از اعتبار سنجی، برنامه نویسی شما نیز در سمت سرور متفاوت خواهد بود، برای نمونه در مثال زیر، سه فیلد را از لحاظ اینکه مقادیر ارسال شده یک عدد، یک آدرس ایمیل معتبر و یا آدرس یک وبسایت یا وبلاگ باشد، بررسی می کنیم.
<?php
@$usertext = $_POST[usertext];
@$usermail = $_POST[usermail];
@$usersite = $_POST[usersite];
if(isset($usertext) && is_numeric($usertext)){
echo "<div class=\"result-true\">عبارت وارد شده یک عدد است!</div>";
}
elseif(isset($usertext) && !is_numeric($usertext)){
echo "<div class=\"result-false\">عبارت وارد شده یک عدد نیست!</div>";
}
if(isset($usermail) && preg_match("|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$|i", $usermail) > 0){
echo "<div class=\"result-true\">ایمیل وارد شده معتبر است!</div>";
}
elseif(isset($usermail) && preg_match("|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$|i", $usermail) == 0){
echo "<div class=\"result-false\">ایمیل وارد شده معتبر نیست!</div>";
}
if(isset($usersite) && preg_match("|^\S+\.\S+.+$|", $usersite) > 0){
echo "<div class=\"result-true\">آدرس سایت وارد شده معتبر است!</div>";
}
elseif(isset($usersite) && preg_match("|^\S+\.\S+.+$|", $usersite) == 0){
echo "<div class=\"result-false\">آدرس سایت وارد شده معتبر نیست!</div>";
}
?>
توضیح:
- متغیر usertext به لحاظ اینکه یک مقدار عددی باشد یا خیر، بررسی می شود، در این بررسی از تابع is_numeric در php استفاده کرده ایم.
- متغیر usermail به لحاظ اینکه یک آدرس ایمیل معتبر باشد، بررسی می شود، در اینجا از تابع preg_match و یک الگو بر اساس عبارات باقاعده یا Regular Expression استفاده کرده ایم.
- متغیر usersite نیز به لحاظ پیروی کردن از الگوی صحیح یک آدرس وب بررسی می شود، در اینجا نیز از تابع preg_match و یک الگو بر اساس عبارات باقاعده یا Regular Expression استفاده کرده ایم.
نکته 1: تابع preg_match با توجه به الگو، رشته ارسالی را بررسی می کند، اگر مقادیر ارسال شده برابر با الگو باشد، مقادیر 1 و در غیر این صورت مقادیر صفر را برمی گرداند.
نکته 2: علامت @ در ابتدای متغیرها برای جلوگیری از نمایش خطاها و نادیده گرفته شدن آنها در php است.
کد و پیش نمایش آنلاین
در زیر کد نهایی و پیش نمایش آنلاین اعتبار سنجی با آژاکس (ajax) و php را ملاحظه می کنید.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | اعتبار سنجی فرم های وب با آژاکس</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.inline{
display:inline-block;
}
.result-true{
color:#090;
}
.result-false{
color:#C00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function AjaxRequest(inputname,divid,inputvalue){
var formvalue = inputname+"="+inputvalue.value;
var loadingmessage = <img src="loading.gif" alt="loading" height="16" width="16" />;
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState<4){
document.getElementById(divid).innerHTML=loadingmessage;
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(divid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","validate.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(formvalue);
}
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود!<br />
</noscript>
<form action="validate.php" method="post">
اعتبار سنجی عدد بودن مقادیر:<br /><br />
<input type="text" name="usertext" id="usertext" onchange="AjaxRequest(usertext,showresult-1,this);" />
<div class="inline" id="showresult-1"></div><br />
اعتبار سنجی معتبر بودن ایمیل:<br /><br />
<input type="text" name="usermail" id="usermail" onchange="AjaxRequest(usermail,showresult-2,this);" />
<div class="inline" id="showresult-2"></div><br />
اعتبار سنجی معتبر بودن آدرس سایت:<br /><br />
<input type="text" name="usersite" id="usersite" onchange="AjaxRequest(usersite,showresult-3,this);" />
<div class="inline" id="showresult-3"></div><br />
</form>
<hr />
پس از تایپ یک عبارت در هر فیلد، در فیلد بعدی کلیک کنید تا رویداد onchange اجرا شود.
</body>
</html>