رابطه بین AJAX و پایگاه داده در جاوا اسکریپت

AJAX و پایگاه داده

ما میتوانیم از AJAX برای برقراری ارتباطی تعاملی با پایگاه داده استفاده کنیم. به طور مثال کد زیر به ما نشان می دهد که چطور می توان با AJAX از پایگاه داده اطلاعاتی را دریافت کرد:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<form action=""> 
  <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</option>
    <option value="ALFKI">Alfreds Futterkiste</option>
    <option value="NORTS ">North/South</option>
    <option value="WOLZA">Wolski Zajazd</option>
  </select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  var xhttp;  
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}
</script>
</body>
</html>

مشاهده ی خروجی

بگذارید این مثال را قدم به قدم توضیح دهیم!

تابع ()showCustomer

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.php?q="+str, true);
  xhttp.send();
}

در این مثال از یک لیست drop down (آبشاری) استفاده کرده ایم و به آن رویداد onchange را داده ایم که در صورت تغییر یافتن یکی از گزینه ها اجرا می شود. چیزی که اجرا می کند تابعی به نام showCustomer می باشد. این تابع به صورت استاندارد و همیشگی یک درخواست AJAX می سازد؛ یعنی اگر رشته ی ما خالی بود چیزی برنگرداند اما اگر خالی نبود یک شیء XMLHttpRequest ساخته شود و پاسخ پایگاه داده را با خصوصیت responseText دریافت کنیم. به زبان ساده تر:

چک کن و ببین آیا مشتری خاصی انتخاب شده است؟
اگر جواب مثبت است یک شیء XMLHttpRequest بساز
یک تابع بساز تا زمانی که پاسخ سرور آماده شد اجرا شود
درخواست را به یک فایل اسکریپتی روی سرور بفرست
توجه داشته باشید که پارامتر q به آخر URL اضافه شده است (=getcustomer.php?q)

صفحه ی اسکریپتی (سمت سرور)

ما یک فایل به نام getcustomer.php نوشته و در سرور خود قرار داده ایم تا جاوا اسکریپت درخواست هایش را به آن بفرستد. سورس کد این فایل یک کوئری را میگیرد و آن را در پایگاه داده اجرا می کند. سورس کد این فایل از قرار زیر است:

<?php
$mysqli = new mysqli("servername", "username", "password", "dbname");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>

در این کد ابتدا با new mysqli یک اتصال جدید به پایگاه داده ساخته ایم و پارامترهای همیشگی را دریافت کرده ایم ("servername", "username", "password", "dbname") و گزارش خطاهای اتصال را نیز گرفته ایم:

if($mysqli->connect_error) {
  exit('Could not connect');
}

سپس کوئری مورد نظر را برای اجرا در پایگاه داده نوشته ایم:

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";

در آخر بعد از prepare کردن کوئری، پارامترها را به هم میچسبانیم و پس از انجام مراحل نهایی آن را به صورت یک جدول HTML نمایش می دهیم:

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";

در صورتی که با کدهای پایگاه داده آشنا نیستید به دوره های زیر مراجعه کنید:

آموزش زبان SQL

آموزش PDO

مثال از برنامه های AJAX

در مثال زیر می خواهیم در عنصر <CD> گردش کنیم و مقدار <ARTIST> و عناصر <TITLE> را به صورت یک جدول HTML نمایش دهیم:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

مشاهده خروجی

حالا بیایید یک مثال دیگر بزنیم. در مثال زیر می خواهیم با استفاده از یک تابع اولین عنصری که دارای "id="showCD است را بگیریم و نمایش دهیم:

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div>

<script>
displayCD(0);

function displayCD(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}

function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("CD");
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

مشاهده ی خروجی

حالا اگر بخواهیم در مثال بالا بین CD های مختلف حرکت کنیم باید توابعی به نام ()next و ()previous بسازیم:

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">

<script>
var i = 0, len;
displayCD(i);

function displayCD(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}

function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("CD");
  len = x.length;
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

function next() {
  if (i < len-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  if (i > 0) {
    i--;
    displayCD(i);
  }
}
</script>

</body>
</html>

مشاهده ی خروجی

حالا می خواهیم کاری کنیم که اگر روی یک CD کلیک کردیم، اطلاعات راجع به آن به نمایش در بیاید:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cd_catalog.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("CD");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) { 
  table += "<tr onclick='displayCD(" + i + ")'><td>";
  table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
  table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

مشاهده ی خروجی

این ها چند مثال کاربردی از استفاده های AJAX بود. امیدوارم از این قسمت لذت برده باشید.