AJAX و PHP
از AJAX می‌توان برای ارتباطات تعاملی با یک پایگاه داده استفاده کرد.[۱]
محتویات
مثال پایگاه داده در AJAX
مثال زیر نحوه دریافت اطلاعات از یک پایگاه داده با استفاده از AJAX را در یک صفحه وب توضیح می‌دهد:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
اطلاعات فرد در اینجا لیست خواهد شد…
توضیح مثال - پایگاه داده MySQL
جدول پایگاه داده‌ای که ما در مثال بالا استفاده می‌کنیم شبیه به جدول زیر است:
| شناسه | نام | نام خانوادگی | سن | شهر | شغل |
|---|---|---|---|---|---|
| ۱ | Peter | Griffin | ۴۱ | Quahog | نانوا |
| ۲ | Lois | Griffin | ۴۰ | Newport | معلم آموزشی |
| ۳ | Joseph | Swanson | ۳۹ | Quahog | افسر پلیس |
| ۴ | Glenn | Quagmire | ۴۱ | Quahog | خلبان |
توضیح مثال
در مثال بالا، زمانی که کاربر یک فرد را از منوی بازشوی بالا انتخاب می‌کند، تابعی به نام "showUser()" اجرا می‌شود.
رویداد onchange موجب فراخوانی این تابع می‌شود.
در اینجا کد HTML وجود دارد:
مثال
1 <html>
2 <head>
3 <script>
4 function showUser(str) {
5 if (str == "") {
6 document.getElementById("txtHint").innerHTML = "";
7 return;
8 } else {
9 if (window.XMLHttpRequest) {
10 // code for IE7+, Firefox, Chrome, Opera, Safari
11 xmlhttp = new XMLHttpRequest();
12 } else {
13 // code for IE6, IE5
14 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
15 }
16 xmlhttp.onreadystatechange = function() {
17 if (this.readyState == 4 && this.status == 200) {
18 document.getElementById("txtHint").innerHTML = this.responseText;
19 }
20 };
21 xmlhttp.open("GET","getuser.php?q="+str,true);
22 xmlhttp.send();
23 }
24 }
25 </script>
26 </head>
27 <body>
28
29 <form>
30 <select name="users" onchange="showUser(this.value)">
31 <option value="">Select a person:</option>
32 <option value="1">Peter Griffin</option>
33 <option value="2">Lois Griffin</option>
34 <option value="3">Joseph Swanson</option>
35 <option value="4">Glenn Quagmire</option>
36 </select>
37 </form>
38 <br>
39 <div id="txtHint"><b>Person info will be listed here...</b></div>
40
41 </body>
42 </html>
توضیح کد:
ابتدا، بررسی می‌شود که حتما کاربر فردی را انتخاب کرده باشد. در صورتی که فردی انتخاب نشده باشد (str == "")، محتوای txtHint را پاک می‌کند و از تابع خارج می‌شود. در صورتی که فردی انتخاب شده باشد، مراحل زیر اجرا می‌شود:
- ساخت یک شی XMLHttpRequest
- ساخت تابعی که می‌بایست در هنگامی که پاسخ سرور آماده است اجرا شود
- ارسال یک درخواست به فایل PHP روی سرور
- توجه کنید که یک پارامتر (q) (با محتوای لیست بازشو) به URL اضافه شده‌است
فایل PHP
صفحه‌ای که توسط کد جاوا اسکریپت بالا فراخوانی می‌شود یک فایل PHP به نام "getuser.php" است.
کدهای موجود در فایل "getuser.php" یک پرس و جو (به انگلیسی: query) را در یک پایگاه داده MySQL اجرا می‌کند، و نتیجه را در یک جدول HTML برمی‌گرداند:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 table {
6 width: 100%;
7 border-collapse: collapse;
8 }
9
10 table, td, th {
11 border: 1px solid black;
12 padding: 5px;
13 }
14
15 th {text-align: left;}
16 </style>
17 </head>
18 <body>
19
20 <?php
21 $q = intval($_GET['q']);
22
23 $con = mysqli_connect('localhost','peter','abc123','my_db');
24 if (!$con) {
25 die('Could not connect: ' . mysqli_error($con));
26 }
27
28 mysqli_select_db($con,"ajax_demo");
29 $sql="SELECT * FROM user WHERE id = '".$q."'";
30 $result = mysqli_query($con,$sql);
31
32 echo "<table>
33 <tr>
34 <th>Firstname</th>
35 <th>Lastname</th>
36 <th>Age</th>
37 <th>Hometown</th>
38 <th>Job</th>
39 </tr>";
40 while($row = mysqli_fetch_array($result)) {
41 echo "<tr>";
42 echo "<td>" . $row['FirstName'] . "</td>";
43 echo "<td>" . $row['LastName'] . "</td>";
44 echo "<td>" . $row['Age'] . "</td>";
45 echo "<td>" . $row['Hometown'] . "</td>";
46 echo "<td>" . $row['Job'] . "</td>";
47 echo "</tr>";
48 }
49 echo "</table>";
50 mysqli_close($con);
51 ?>
52 </body>
53 </html>
توضیح: زمانی که پرس و جو از جاوا اسکریپت به فایل PHP ارسال می‌شود، موارد زیر اتفاق می‌افتد:
- PHP یک اتصال با سرور MySQL برقرار می‌کند
- فرد مورد نظر پیدا می‌شود
- یک جدول HTML ساخته شده، با اطلاعات پر می‌شود، و به جای مقدار راهنمای "txtHint" می‌نشیند
منابع آموزشی