نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)

همانطور که در بخش آموزش های مقدماتی ای جکس (Ajax) اشاره شد، یکی از کاربردهای استفاده از این تکنیک در صفحات وب رد و بدل کردن اطلاعات بین مرورگر و سرور بدون نیاز به رفرش صفحه است، به عبارتی تمام فعل و انفعالات در پس زمینه انجام شده و در سمت کاربر (مرورگر) تقریبا جزء نمایش نتایج اتفاق خاصی رخ نمی دهد و کاربر در حالت معمول متوجه چگونگی این فرآیند نیز نمی شود و می تواند به ادامه پیمایش صفحه بپردازد که به این حالت در اصطلاح درخواست غیرهمزمان (Asynchronous) یا هم روند می گویند، در این مطلب نیز کدی کاربردی را قرار داده ایم که به کمک آن می توانیم به صورت غیرهمزمان پس از انتخاب گزینه ای از لیست باز شونده، تابعی جاوا اسکریپتی را در رویداد onchange اجرا کرده و درخواست مبتنی بر Ajax را به فایل PHP ارسال نمائیم، سپس نتیجه را از این فایل یا با اتصال به پایگاه داده MySQL دریافت کرده و در سمت کاربر به هر صورت که مورد نیاز برنامه باشد نمایش دهیم.
کد HTML و ای جکس (Ajax) سمت کاربر
پیشتر در بخش آموزش های مقدماتی Ajax گفتیم که برای ارسال درخواست از صفحه مرورگر (سمت کاربر) به فایل PHP (سمت سرور) ابتدا نیاز به کدهای HTML، دستورات جاوا اسکریپت و متدهای Ajax است، هرچند درخواست Ajax را می توان به صورت مستقیم نیز تنظیم کرد اما کدهای HTML سمت کاربر معمولا شامل عناصری مانند تگ های زیرمجموعه فرم (select, input و...) یا لینک ها هستند که با انتخاب یک گزینه توسط کاربر، یک تابع در جاوا اسکریپت فراخوانی و با اجرای تابع درخواست بر بستر Ajax شکل گرفته و به سرور ارسال می شود، در زیر یک نمونه از این دستورات را درج کرده ایم که مربوط به تگ select و رویداد onchange است:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش نتایج پرس و جو از دیتابیس با ای جکس</title>
<!-- Webgoo.ir -->
<script type="text/javascript">
function showList(str, id){
var xmlHttp;
if(str == ''){
document.getElementById(id).innerHTML = '';
return false;
}
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else{
//IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
document.getElementById(id).innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", "getlist.php?q=" + str, true);
xmlHttp.send();
}
</script>
<style type="text/css">
body{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
}
</style>
</head>
<body>
<form action="">
<select name="list" onchange="showList(this.value, 'show-text')">
<option value="">انتخاب یک کاربر</option>
<option value="user_1">کاربر 1</option>
<option value="user_2">کاربر 2</option>
<option value="user_3">کاربر 3</option>
</select>
</form>
<br>
<div id="show-text">پس از انتخاب یک کاربر، اندکی صبر نمائید تا پاسخ از سرور دریافت شود.</div>
</body>
</html>
توضیح:- برای شروع تابع showList را نوشته ایم تا درخواست های Ajax را از کاربر گرفته و توسط این تابع مدیریت کنیم.
- در فرم HTML و تگ select، با رویداد onchange مقادیر انتخابی کاربر به همراه آی دی بلاک div را به تابع showList ارسال می کنیم.
- متد getElementById عنصر HTML را بر اساس آی دی آن انتخاب می کند که در اینجا بلاک div با آی دی فرضی show-text به عنوان آرگیومنت به تابع و در نتیجه به این متد داده شده، در کنار این متد از متد innerHTML برای مقداردهی به بلاک هدف استفاده می کنیم.
- متغیری که در درخواست ما مقادیرش به سرور فرستاده می شود q نام دارد (=getlist.php?q)، متد استفاده شده نیز GET است که پیش از این در آموزش های مقدماتی Ajax در خصوص آن صحبت کرده ایم.
کد PHP و دستورات MySQL سمت سرور
پس از نوشتن کدهای HTML، دستورات جاوا اسکریپت و Ajax، فایلی با نام فرضی getlist.php ایجاد و کدنویسی مورد نظر جهت دریافت درخواست ارسال شده با متد GET را در آن تنظیم می نمائیم، این کد نویسی می تواند به صورت استاتیک و بدون پایگاه داده یا به صورت داینامیک و به همراه پرس جو از پایگاه داده MySQL باشد که این موضوع بستگی به هدف و نیاز برنامه ما دارد، در نمونه کدهای زیر هر دو صورت جهت راهنمایی بیشتر درج شده.
نمونه کد PHP بدون دیتابیس:
<?php
@$user = $_GET['q'];
if($user == 'user_1'){
echo '<table width="200" border="1">
<tr>
<th>کاربر یک</th>
<td>نام کاربر یک</td>
</tr>
</table>';
}
elseif($user == 'user_2'){
echo '<table width="200" border="1">
<tr>
<th>کاربر دو</th>
<td>نام کاربر دو</td>
</tr>
</table>';
}
elseif($user == 'user_3'){
echo '<table width="200" border="1">
<tr>
<th>کاربر سه</th>
<td>نام کاربر سه</td>
</tr>
</table>';
}
?>
توضیح:- در فایل getlist.php درخواست ارسال شده از سمت کاربر با متد GET را پردازش می کنیم.
- در اینجا صرفا به دلیل جنبه آموزشی و ساده تر شدن کدنویسی از دستورات شرطی استفاده شده، قاعدتا همین کد را می توانیم با دستور switch و case نیز بنویسیم.
نمونه کد PHP و استفاده از دستورات MySQL:
<?php
@$user = $_GET['user'];
$conn = mysqli_connect("localhost", "username", "password", "dbname");
if(!$conn){
echo "Error!: " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
exit;
} else{
$user = mysqli_real_escape_string($conn, $user);
$result = mysqli_query($conn, "SELECT id, name FROM users WHERE user = $user LIMIT 1");
//Error
if(!$result){
echo 'MySQL Error: ' . mysqli_error($conn);
die('بروز خطا در اجرای پرس و جوی MySQL');
} //Ok
else{
while ($row = mysqli_fetch_assoc($result)){
echo '<table width="200" border="1">
<tr>
<th>کاربر ' . $row['id'] . '</th>
<td>نام کاربری ' . $row['name'] . '</td>
</tr>
</table>';
}
}
}
mysqli_close($conn);
?>
توضیح:- در نمونه کد بالا از اکستنشن mysqli به شیوه کدنویسی معمولی (شکلی یا Procedural) استفاده کرده ایم.
- نام جدول و ستون ها فرضی و صرفا جهت نمونه است.
پیش نمایش

لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش
آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)
نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)


سوال:
فرضا ما صفحه ای داریم که توش دو تا جدول div داریم
صفحه php دیگری هم داریم که کار بررسی رو انجام میده
تغییرات و چاپ نتایج در فایل php در xmlhttp.respponseText
قرار میگیرن که ما بعدا توسط
document.getElementById(div1).innerHTML = xmlHttp.responseText;
اون را داخل div1 قرار میدمکل نتایج داخل div1 قرار میگیره
حالا بنده میخوام اگر فایل php دو تا echo داره یکیش در div 1 دیگری در div 2 قرار بگیره در حالت عادی همه نتایج فایل php در xmlHttp.responseText قرار میگیرن که نمیشه نتایج رو جدا جدا تفکیک کرد.
خلاصه: چطور میشه فایل php ما "دو خروجی متفاوت" رو در دو جای متفاوت چاپ کنه؟
(در ضمن بنده به html5 و css3 و php و js , jquery تسلط دارم، فقط یه اشاره کوچیک کنید که چطور میشه پاسخ ها رو تفکیک کرد ممنون میشم.)
میخواستم بدونم ایا راهی هست که تابع آژاکسی رو به یه تابع کوچکتر تبدیل کنیم که دیگه نیاز به نوشتن مراحل تکراریش نباشه چون من در اسکریپتم تعداد زیادی درخواست آژاکس دارم که میخواستم خلاصه اش کنم
<script type="text/javascript">
//تابع برای ایجاد شی ای جکسی
function setAjaxRequest(){
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else{
//IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function sendAjaxRequest(){
//مقدار دهی متغیر با شی
var xmlHttp = setAjaxRequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
document.getElementById("showtxt").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", "getlist.php?q=" + str, true);
xmlHttp.send();
}
</script>
- به جای علامت # از عبارت javascript:void استفاده کنید، به صورت نمونه زیر:
<a href="javascript:void(0)" onclick="function();">
- یا در انتهای فراخوانی تابع، عبارت return false را اضافه کنید:<a href="#" onclick="function(); return false;">
- یا آی دی بلاک هر کاربر را به انتهای علامت # اضافه کنید:<a href="#div-id" onclick="function();">
البته روش های بالا تفاوت هایی نیز با هم دارند، در روش اول در همه حال (چه جاوا اسکریپت فعال باشد یا خیر)، مرورگر موقعیت صفحه را تغییر نمی دهد، اما در روش دوم تنها زمانی موقعیت صفحه ثابت می ماند که جاوا اسکریپت در مرورگر کاربر فعال باشد و نهایتا در روش سوم مرورگر کاربر را به بلاکی که آی دی آن را مشخص کرده ایم هدایت می کند؛ در حالت عادی بهتر است روش اول را انتخاب کنید.پس با این حساب. باید در قسمت آخرین اخبار یا انجمن ها
و ... . نباید از ایجکس استفاده کرد چون حسابی ترافیک و کم میکنه و همینطور سرور و اشغال.
دلیلشم اینه که مثلا شما فرض کنید روزی 100 کاربر بازدید داشته باشیم بعدم بقول شما هر 5 دقیقه یه درخواست صورت بگیرد منهای بقیه درخواستهای ارسال شده و دریافت شده در صفحه، خودش به تنهایی کلی از قسمتهای سرور رو به خودش اختصاص میده و اصلا کار مفیدی نیست. در ضمن من 3 دقیقه رو مثال زدم و زمان زیادیست چه برسه به 5 دقیقه. اگر قرار بیشتر از 30 ثانیه باشه دیگه خود کاربر صفحه و رفرش میکنه.
البته این نظر من. (تازه اگه زمان موندن کاربرها هم کمتر از نیم ساعت باشه بازم زیاده)
ممنون بابت پاسخ گوییتون.
یه سوال دارم اگر با استفاده از این روش اطلاعات رو از دیتابیس دریافت کنیم اگر کاربری جاوا اسکریپتش غیر فعال باشه اونوقت باید چی کار کرد. (مثلا در آخرین اخبار از این روش استفاده کنیم)
بعد یه سوال دیگه دارم این کار در اشغال شدن سرور یا تو سرعت سایت تاثیر نداره؟ (مثلا هر 3 دقیقه قسمت آخرین اخبار رفرش بشه و یا در انجمن ها)
شما این کار رو توصیه میکنید؟
در مورد اینکه استفاده از Ajax چه تاثیری بر عملکرد سرور دارد، بستگی به میزان پارامتر ارسالی و دریافتی و همچنین بازه زمانی درخواست ها دارد، درخواست آژاکسی نیز مانند یک درخواست معمولی است ،منتها ترافیک کمتری از سرور اشغال می کند، لذا برای موارد جزئی و در فواصل زمانی بیشتر از یک دقیقه معمولا اختلالی ایجاد نمی شود (البته باید سعی کنید یک توازن منطقی بین قدرت سرور و میزان درخواست ها ایجاد شود)، همچنین هر چه پردازش ها به دیتابیس کمتر وابسته باشند، سرعت بهتری خواهید داشت، اما در کل توصیه می کنیم در استفاده از Ajax صرفا به موارد ضروری بسنده شود، به طور مثال برای بخش اخبار اگر هم می خواهید رفرش صورت گیرد، بازه زمانی را بیش از 5 دقیقه در نظر بگیرید (باز بستگی به قدرت سرور و تعداد کاربران دارد).
من خواستم از همین دو نمونه کد در سایتم استفاده کنم اما نشد
من ابتدا با کد دومی که دادین فایل getlist.php را ایجاد کردم
هم تو قالبم تست کردم و گذاشتم و هم توی public_html گذاشتم و تست کردم
و پس از آن کد اولی را در قالبم قرار دادم
وقتی در سایتم روی گزینه ها کلیک می کنم هیچ چیز نشان داده نمی شود و هیچ تغییری جز محو شدن جمله ی (پس از انتخاب یک کاربر، اندکی صبر نمائید...) نیز نمی بینم.
خیلی ممنون میشم راهنمایی کنید. باتشکر از سایت فوق العاده شما و عرض خسته نباشید
http://127.0.0.1:8888/login.php
تمام سایت من همین صفحه است حالا کدهای اژاکس رو در قسمت head می نویسم و میخوام با یه دکمه تو همین صفحه اتفاق بیفته ولی نمی دونم url مربوط به تابع open رو چی قرار بدم. ایا باید صفحه ای جداگانه بسازم یا راهی برای این ارتباط هست. با تشکراستفاده در Select ها
من می خواهم اطلاعات وارد شده از طریق فرم ثبت املاک را در یک سایت املاک بدون اینکه فرد در صفحه ی اصلی رفرش کند ببیند
یعنی اگر یک ملک در پایگاه داده یک سایت ثبت شد کاربران انلاین در صفحه ی اصلی بدون استفاده از بارگذاری مجدد ان اطلاعات را مشاهده نمایند
از کدام توابع اژاکس شما استفاده کنم تا این امکان برای من محقق شود با تشکر
بخشی از کدها به ای جکس مربوط می شود که آن ارسال درخواست و دریافت پاسخ از سرور است (آموزش حاضر و موارد مشابه)، بخش دیگر مربوط به فراخوانی نتایج از پایگاه داده و در واقع استفاده از PHP و MySQL است که باید به آموزش های مرتبط با آن (و ترجیحا شروع از آموزش های مقدماتی) مراجعه کنید.
ولی محتوای این دو باکس متفاوت است در صورتی که منبع فراخوانی یک فایل php است به زبان ساده 2 فایل php باید فراخوانی شود و محتوای هر فایل در یک باکس نمایش داده شود در این مورد باید چه کار انجام دهم
متاسفانه موفق نشدم ویرایش را به درستی انجام بدم اگه ممکنه لطف کنید یک لینک گذاشتم که نمونه کد درون ان قرار دارد ممنون می شوم تغییرات را اعمال کنید فرم برای ذخیره هم دارد لطفا بعد از ویرایش submit کنید که ذخیره بشه برام
پیشاپیش از لطف شما سپاسگذارم
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.