مثال پایگاه داده در AJAX

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

از AJAX می‌توان برای تبادل اطلاعات با یک پایگاه داده استفاده کرد. [۱]

مثال زیر به شما نشان خواهد داد که چگونه یک صفحه وب می‌تواند از یک دیتابیس با استفاده از AJAX اطلاعات را استخراج کند:

یک مشتری را انتخاب کنید:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


توضیح مثال – تابع showCustomer()

زمانی که کاربر یک مشتری را از طریق منوی کشویی بالا انتخاب می‌کند، تابعی به نام showCustomer() اجرا می‌شود. این تابع توسط رویداد onchange اجرا می‌شود:

showCustomer

 1 function showCustomer(str) {
 2   var xhttp;
 3   if (str == "") {
 4     document.getElementById("txtHint").innerHTML = "";
 5     return;
 6   }
 7   xhttp = new XMLHttpRequest();
 8   xhttp.onreadystatechange = function() {
 9     if (this.readyState == 4 && this.status == 200) {
10     document.getElementById("txtHint").innerHTML = this.responseText;
11     }
12   };
13   xhttp.open("GET", "getcustomer.php?q="+str, true);
14   xhttp.send();
15 }


مشاهدهٔ نتیجه


تابع showCustomer() کارهای زیر را به ترتیب انجام می‌دهد:

  • بررسی می‌کند که آیا مشتری انتخاب شده‌است
  • یک شیء XMLHttpRequest می‌سازد
  • تابعی که می‌بایست زمانی که پاسخ سرور آماده است اجرا شود را می‌سازد
  • درخواست را به یک فایل روی سرور ارسال می‌کند
  • توجه داشته باشید که یک پارامتر (q) (با محتوای انتخاب شده منوی کشویی) به URL اضافه می‌شود

صفحه سرور AJAX

صفحه روی سرور توسط کد جاوا اسکریپت که در مثال بالا "getcustomer.php" نامیده می‌شود، فراخوانی می‌شود.

کد موجود در فایل "getcustomer.php" یک درخواست (به انگلیسی: query) را در پایگاه داده اجرا می‌کند و نتیجه را در یک جدول HTML برمی‌گرداند:

 1 <?php
 2 $mysqli = new mysqli("servername", "username", "password", "dbname");
 3 if($mysqli->connect_error) {
 4   exit('Could not connect');
 5 }
 6 
 7 $sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
 8 FROM customers WHERE customerid = ?";
 9 
10 $stmt = $mysqli->prepare($sql);
11 $stmt->bind_param("s", $_GET['q']);
12 $stmt->execute();
13 $stmt->store_result();
14 $stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
15 $stmt->fetch();
16 $stmt->close();
17 
18 echo "<table>";
19 echo "<tr>";
20 echo "<th>CustomerID</th>";
21 echo "<td>" . $cid . "</td>";
22 echo "<th>CompanyName</th>";
23 echo "<td>" . $cname . "</td>";
24 echo "<th>ContactName</th>";
25 echo "<td>" . $name . "</td>";
26 echo "<th>Address</th>";
27 echo "<td>" . $adr . "</td>";
28 echo "<th>City</th>";
29 echo "<td>" . $city . "</td>";
30 echo "<th>PostalCode</th>";
31 echo "<td>" . $pcode . "</td>";
32 echo "<th>Country</th>";
33 echo "<td>" . $country . "</td>";
34 echo "</tr>";
35 echo "</table>";
36 ?>


منابع آموزشی