AJAX یا ایجکس مخفف عبارت Asynchronous JavaScript and XML به معنای جاوا اسکریپت و XML ناهمگام است. روشی برای درخواست اسکریپت سمت سرور برای اجرا با جاوا اسکریپت است. این درخواست در یک تابع جاوا اسکریپت ایجاد شده و به یک فایل PHP ارسال می شود.
در سمت سرور، فایل PHP را دریافت می کند و درخواست ارسال شده از طریق فراخوانی AJAX را دریافت و سپس پردازش می کند و در نهایت یک پاسخ ارسال می کند. ارتباط کاربر و سرور به صورت غیر همزمان انجام می شود. پس از دریافت پاسخ از فایل PHP می توانیم بخش های خاصی از یک صفحه وب را به روزرسانی کنیم و از به روزرسانی کل صفحه جلوگیری می شود.
توی این پک فوق العاده، PHP رو جوری یاد میگیری که تو هیچ کلاس آموزشی یا پک دیگه ای نه دیدی نه شنیدی! بدون هیچ کلاسی، با PHP وبسایت بساز، پروژه محور یاد بگیر و حسابی پول در بیار!
AJAX را می توان با استفاده از کتابخانه ها و API های مختلف پیاده سازی کرد. در این آموزش از XMLHTTPRequest API برای ارسال درخواست AJAX برای اجرای اسکریپت به زبان PHP استفاده می کنیم.
اسکریپت برای صفحه ورود می باشد که پس از دریافت پاسخ از PHP، کد AJAX وضعیت را بررسی می کند و نتیجه احراز هویت (برای ورود) را بدون بارگزاری مجدد صفحه وب نشان می دهد.
فرم ورود با AJAX Button Handler
کد زیر برای یک فرم ورود حاوی فیلد های User Name برای نام کاربری و Password برای رمز عبور نوشته شده است. با کلیک روی دکمه Login یک تابع AJAX جاوا اسکریپت فراخوانی می شود. این تابع مقادیر فیلدهای ورود به PHP را برای پردازش احراز هویت کاربر ارسال می کند.
این شامل یک تگ DIV است که نتایج احراز هویت را بدون بارگزاری کامل صفحه با استفاده از تابع AJAX به کاربر نشان می دهد.
<div id=”output”>
<div id=”messageBoxId”></div>
<form action=”” method=”post” id=”frmLogin”>
<div class=”field-group”>
<div><label for=”login”>Username</label></div>
<div><input name=”userName” id=”userName” type=”text” class=”input-field”>
</div>
<div class=”field-group”>
<div><label for=”password”>Password</label></div>
<div><input name=”password” id=”password” type=”password” class=”input-field”>
</div>
<div class=”field-group”>
<div><input type=”button” name=”login” value=”Login” class=”form-submit-button” onClick=”callLogin();”></span></div>
</div>
</form>
</div>
</div>
ارسال درخواست ورود از طریق تابع AJAX جاوا اسکریپت
در این تابع جاوا اسکریپت با استفاده از نمونه XMLHttpRequest درخواست ورود AJAX را ایجاد می کنیم. چون مرورگرهای قدیمی از این API پشتیبانی نمی کنند، می توانیم ActiveXObject را ایجاد کنیم.
این تابع جزئیات ورود کاربر را به عنوان درخواست “GET” به login.php ارسال می کند. اگر احراز هویت کاربر با موفقیت انجام شود آنگاه این تابع یک پیام خوش آمدگویی به کاربر نشان خواهد داد. در غیر این صورت یک پیام خطا در بالای فرم ورود نشان داده می شود.
همه این تغییرات به جای بارگیری مجدد صفحه توسط AJAX انجام می شود.
<script>
function callLogin(){
var userName = document.getElementById(“userName”).value;
var password = document.getElementById(“password”).value;
xmlHttpRequest=new XMLHttpRequest();
// For Older browsers
// xmlHttpRequest=new ActiveXObject(“MSXML2.XmlHttp”);
xmlHttpRequest.onreadystatechange=function() {
if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
var response = xmlHttpRequest.responseText;
if(response > 0) {
var welcome_message = ‘<p class=”welcome-message”>Welcome, You have successfully loggedin!</p>’;
document.getElementById(“output”).innerHTML = welcome_message;
} else {
document.getElementById(“messageBoxId”).innerHTML=”Invalid Credentials”;
document.getElementById(“messageBoxId”).className=”error-message”;
}
}
}
xmlHttpRequest.open(“GET”,”login.php?userName=”+userName+”&password=”+password,true);
xmlHttpRequest.send();
}
</script>
اسکریپت ورود PHP با MySQL
کد PHP زیر درخواست های AJAX دریافت کرده و فرآیند هویت احراز را انجام می دهد. پایگاه داده کاربر را برای جزئیات ورود به سیستم با فراخوانی AJAX جستجو می کند. اگر مورد تطبیقی پیدا شود، آن را به عنوان پاسخ درست برمی گردد.
<?php
if(count($_GET)>0) {
$conn = mysqli_connect(“localhost”,”root”,””,”blog_samples”);
$result = mysqli_query($conn,”SELECT * FROM users WHERE userName='” . $_GET[“userName”] . “‘ and password = ‘”. $_GET[“password”].”‘”);
“SELECT * FROM users WHERE userName='” . $_GET[“userName”] . “‘ and password = ‘”. $_GET[“password”].”‘”;
$count = mysqli_num_rows($result);
print $count;
mysqli_close($conn);
}
?>
از دست ندهید: آموزش ajax در جاوا اسکریپت (مزایا و نحوه کار)
