[h=2]کاربرد Ajax در پایگاه داده[/h] کاربرد Ajax در پایگاه داده : در این بخش قصد داریم ، تا با ارائه یک مثال عملی و تشریح گام به گام آن ، نحوه استفاده و کار با دستورات Ajax ، برای فراخوانی و دریافت اطلاعات از یک پایگاه داده و سپس نمایش آنها ، بر روی یک صفحه PHP را نمایش دهیم . در این مثال یک منوی کرکره ای قرار دارد که نام چندین مشتری در آن تعیین شده است . کاربر با انتخاب نام هر کدام از مشتریان ، به اطلاعات آن دسترسی پیدا خواهد کرد . هنگامی که کاربر گزینه ای را در منوی کرکره ای انتخاب می کند ، مجموعه ای از دستورات Ajax و PHP اجرا شده و در پس زمینه صفحه ، به پایگاه داده متصل می شوند . سپس اطلاعات درخواستی را دریافت کرده و پس از انتقال به صفحه در بخش مورد نظر ، به روز رسانی می نماید . 1 ) کد فایل html و تابع ( ) showUser : هنگامی که کاربر گزینه ای را از منوی کرکره ای بر روی صفحه انتخاب می کند ، رویداد ( ) onchnage کنترل اجرا شده و تابع ( ) showUser را فراخوانی می کند . این رویداد مقدار انتخاب شده در کنترل را به وسیله دستور this.value به پارامتر str در تابع ارسال می کند ، تا به تابع اعلام کند ، کاربر کدام گزینه را انتخاب کرده است . جدول زیر ، کد فایل HTML و کد تابع ( ) showUser را نمایش می دهد . کد آن را مرور نمایید . سپس به توضیح گام به گام آن پرداخته ایم . این پروژه دارای یک فایل PHP نیز می باشد که کد آن ، عملیات اتصال به پایگاه داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید . [TABLE="class: ex"] [TR] [TD="class: prname"] کد صفحه HTML و کد تابع ShowUser ( ) [/TD] [TD="class: prdes, align: left"] <html> <head> <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } 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 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "getuser.php?q=" + str, true); xmlhttp.send ( ); } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Ali</option> <option value="2">Reza</option> <option value="3">Mohsen</option> </select> </form> <br> <div id="txtHint"> <b>اطلاعات مشتری:</b> </div> </body> </html> [/TD] [/TR] [TR] [TD="class: header"] خروجی [/TD] [TD="class: body, align: left"] : اطلاعات مشتری [/TD] [/TR] [/TABLE] 2 ) توضیح گام به گام کد مثال : هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم : این بخش کد مثال ، بررسی می کند اگر کادر متن خالی نبوده و کاربر گزینه ای را انتخاب کرده باشد ، ( " "== str ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود . این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم . این بخش از کد ، بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد . این بخش از کد ، شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی getuser.php ارسال می کند . همچنین توجه داشته باشید ، که متغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد . فرم HTML موجود بر روی صفحه نیز ، کنترل کرکره ای را نمایش می دهد ، که کاربر می تواند از آن انتخاب نماید . همچنین تگ div با id برابر txtHint ، پاسخ Ajax ارسالی را از سرور دریافت کرده و با یک عملیات به روز رسانی نمایش می دهد . [HR][/HR] 3 ) نمایش و توضیح کد فایل PHP : این پروژه دارای یک فایل PHP هم می باشد ، که عملیات اتصال و دریافت از پایگاه داده را انجام می دهد . نام این فایل getuser.php است که دستور Ajax صفحه HTML ، فایل PHP را با پاس دادن متغیر str به آن ، فراخوانی و اجرا می کند . این صفحه مقدار پارامتر str ، که همان گزینه انتخاب شده در منوی کرکره ای است را دریافت کرده و به پایگاه داده متصل می شود . سپس اطلاعات فرد انتخاب شده را از پایگاه داده استخراج کرده و به صفحه HTML بر می گرداند . جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های مختلف آن پرداخته ایم : ( توضیحات کوتاه با // ) [TABLE="class: ex"] [TR] [TD="class: prname"] کد فایل PHP [/TD] [TD="class: prdes, align: left"] < ?php $q=$_GET["q"]; // این دستور مقدار پارامتر ارسالی از دستور ای جکس را دریافت می کند $con = mysql_connect('localhost', 'Developer ' , 'abc123'); // ایج اد ارتباط با پایگاه داده مورد نظر mysql_select_db("ajax_demo", $con); // انتخاب جدول مورد نظر $sql="SELECT * FROM user WHERE id = '".$q."'"; // q دریافت اطلاعات از جدول مورد نظر بر مبنای پارامتر $result = mysql_query($sql); // result ریختن نتیجه عملیات انتخاب اطلاعات از پایگاه داده در متغیر echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>"; while($row = mysql_fetch_array($result)) // ساخت جدول در خروجی با نتیجه دریافتی از پایگاه داده { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); // قطع ارتباط با پایگاه داده ?> [/TD] [/TR] [/TABLE] [HR][/HR] منبع: developer1
