استفاده از اطلاعات دیتابیس با Ajax – آموزش Ajax

یکشنبه ۲۱ مرداد ۱۳۹۷
بازدید ۲,۳۱۴ نفر
AmRo
(29 امتیاز از 6 رای)
Loading...

تصویر ajax-database_3174 استفاده از اطلاعات دیتابیس با Ajax - آموزش Ajax

استفاده از اطلاعات دیتابیس با Ajax

در این بخش نحوه دسترسی و استفاده از اطلاعات دیتابیس با AJAX را بررسی می کنیم. قبل از هر کاری باید یک جدول در دیتابیس خود ایجاد کنید. با استفاده از کوئری زیر می توانید این کار را انجام دهید (ajax_example1 نام جدولی است که ایجاد می شود).

توجه! فرض می کنیم که شما از دانش کافی برای کار با دستورات SQL را برخودارید.

CREATE TABLE ajax_example1(
   name varchar(50) NOT NULL,
   age int(11) NOT NULL,
   sex varchar(1) NOT NULL,
   wpm int(11) NOT NULL,
   PRIMARY KEY  (name)
)

CREATE TABLE ajax_example1(

name varchar(50) NOT NULL,

age int(11) NOT NULL,

sex varchar(1) NOT NULL,

wpm int(11) NOT NULL,

PRIMARY KEY (name)

)

حال با استفاده از دستور INSERT، چند رکورد به جدولی که ایجاد کرده ایم، اضافه می کنیم.

INSERT INTO ajax_example1 VALUES ('Regis', 75, 'm', 44);
INSERT INTO ajax_example1 VALUES ('Frank', 45, 'm', 87);
INSERT INTO ajax_example1 VALUES ('Jill', 22, 'f', 72);
INSERT INTO ajax_example1 VALUES ('Tracy', 27, 'f', 0);
INSERT INTO ajax_example1 VALUES ('Julie', 35, 'f', 90);

INSERT INTO ajax_example1 VALUES ('Regis', 75, 'm', 44);

INSERT INTO ajax_example1 VALUES ('Frank', 45, 'm', 87);

INSERT INTO ajax_example1 VALUES ('Jill', 22, 'f', 72);

INSERT INTO ajax_example1 VALUES ('Tracy', 27, 'f', 0);

INSERT INTO ajax_example1 VALUES ('Julie', 35, 'f', 90);

فایل HTML سمت کاربر

اکنون یک فایل HTML با نام ajax.html ایجاد کنید و کد زیر را در آن کپی کنید:

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age=" + age ;
            queryString +=  "&wpm=" + wpm + "&sex=" + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>
      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

<html>

<body>

<!--

//Browser Support Code

function ajaxFunction() {

var ajaxRequest; // The variable that makes Ajax possible!

try {

// Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e) {

// Internet Explorer Browsers

try {

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

// Something went wrong

alert("Your browser broke!");

return false;

}

// Create a function that will receive data

// sent from the server and will update

// div section in the same page.

ajaxRequest.onreadystatechange = function() {

if(ajaxRequest.readyState == 4) {

var ajaxDisplay = document.getElementById('ajaxDiv');

ajaxDisplay.innerHTML = ajaxRequest.responseText;

}

// Now get the value from user and pass it to

// server script.

var age = document.getElementById('age').value;

var wpm = document.getElementById('wpm').value;

var sex = document.getElementById('sex').value;

var queryString = "?age=" + age ;

queryString += "&wpm=" + wpm + "&sex=" + sex;

ajaxRequest.open("GET", "ajax-example.php" + queryString, true);

ajaxRequest.send(null);

}

//-->

</script>

Max Age: <input type = 'text' id = 'age' /> <br />

Max WPM: <input type = 'text' id = 'wpm' /> <br />

Sex:

</select>

</form>

<div id = 'ajaxDiv'>Your result will display here</div>

</body>

</html>

توجه! نحوه ارسال متغیرها در کوئری طبق استاندارد HTTP به صورت زیر می باشد.

URL?variable1 = value1;&variable2 = value2;

1	URL?variable1 = value1;&variable2 = value2;

فایل PHP سمت سرور

بعد از آماده سازی اسکریپت سمت کلاینت، حال باید اسکریپت سمت سرور را آماده کنید تا سن جنس و شغل از دیتابیس استخراج و به کلاینت ارسال می کند. کد زیر را در فایل “ajax-example.php” قرار دهید.

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "ajax_example";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example1 WHERE sex = '$sex'";
if(is_numeric($age))
   $query .= " AND age <= $age";

if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>

<?php

$dbhost = "localhost";

$dbuser = "root";

$dbpass = "";

$dbname = "ajax_example";

//Connect to MySQL Server

mysql_connect($dbhost, $dbuser, $dbpass);

//Select Database

mysql_select_db($dbname) or die(mysql_error());

// Retrieve data from Query String

$age = $_GET['age'];

$sex = $_GET['sex'];

$wpm = $_GET['wpm'];

// Escape User Input to help prevent SQL Injection

$age = mysql_real_escape_string($age);

$sex = mysql_real_escape_string($sex);

$wpm = mysql_real_escape_string($wpm);

//build query

$query = "SELECT * FROM ajax_example1 WHERE sex = '$sex'";

if(is_numeric($age))

$query .= " AND age <= $age";

if(is_numeric($wpm))

$query .= " AND wpm <= $wpm";

//Execute query

$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String

$display_string = "<table>";

$display_string .= "<tr>";

$display_string .= "<th>Name</th>";

$display_string .= "<th>Age</th>";

$display_string .= "<th>Sex</th>";

$display_string .= "<th>WPM</th>";

$display_string .= "</tr>";

// Insert a new row in the table for each person returned

while($row = mysql_fetch_array($qry_result)) {

$display_string .= "<tr>";

$display_string .= "<td>$row[name]</td>";

$display_string .= "<td>$row[age]</td>";

$display_string .= "<td>$row[sex]</td>";

$display_string .= "<td>$row[wpm]</td>";

$display_string .= "</tr>";

}

echo "Query: " . $query . "<br />";

$display_string .= "</table>";

echo $display_string;

اگر این بخش را با موفقیت یاد گرفته باشد، دیگر نحوه استفاده از MySQL، PHP، HTML و جاوا اسکریپت در کنار هم را می دانید و می توانید برنامه های AJAX خود را پیاده سازی کنید.