بخش های اصلی

آموزش AJAX

آموزش AJAX – عملیات های پایگاه داده

برای این که به وضوح نشان بدیم که دسترسی به اطلاعات پایگاه داده با استفاده از AJAX چقدر راحته، در ادامه کوئری هاِ MYSQL را در fly ساخته و نتایج را در "ajax.html" نمایش میدیم. فقط قبل از شروع، کارهای ابتدایی و مقدماتی را انجام میدیم. با استفاده از دستور زیر جدولی ایجاد کنین.

نکته: فرض می کنیم برای اجرای عملیات هایِ MySQL زیر از دانش کافی برخوردار هستین.

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

حالا با استفاده از عبارت هایِ SQL زیر، اطلاعات زیر را در جدول بریزین:

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' 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>

نکته: روش پاس دادن متغیرها به کوئری، بر اساس استانداردِ HTTP است و formA داره.

URL?variable1=value1;&variable2=value2;

کد بالا، صفحه ای به شکل زیر به شما نمایش میده:

نکته: این صفحه آزمایشیِه و کار نمی کنه.

Max Age: 

Max WPM:

Sex:

بعد از این که ورودی را وارد کردین، نتیجه در همین قسمت به شما نمایش داده میشه.

نکته: این صفحه آزمایشیِه.

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

اسکریپت سمت کلاینت آماده ست. حالا باید اسکریپت سمت سرور را بنویسیم که از پایگاه داده،  age، wpp و sex را  فراخوانی کرده و برای کلاینت میفرسته. کد زیر را در فایلِ "ajax-example.php" وارد کنین.

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
	
//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_example 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;
?>

حالا مقدار معتبری در جعبه ی ورودیِ Max Age یا جعبه ی ورودی دوم وارد کنین (مثل 120) و روی دکمه ی Query MySQL کلیک کنین.

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AJAX

Learn AJAX

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد