با سلام خدمت شما دوستان عزیز ،وب مستران گرامی آیا باajax آشنایی دارید؟ در واقع

AJAX مخفف Asynchronous JavaScript and XM است AJAX شیوه ای جدید برای ساختن برنامه های اجرایی {application} وِب هرچه سریعتر، بهتر و محاوره ای تر است، که به کمک XML، HTML، CSS  و Java Script  امکان پذیر می شود.

برنامه های متعارف وِب با استفاده از درخواست های همزمان {synchronous requests} اطلاعات را از سِروِر گرفته و همچنان به سِرور انتقال می دهد. به این معنا که شما یک فرمی را پر کرده، سپس submit را زده و به صحفه ی جدید با اطلاعات جدید از سِرور هدایت می شوید.

در AJAX هنگامی که گزینه ی submit را کلیک می کنید ، JavaScript یک درخواست جدید به سِرور می فرستد، نتایج به دست آمده را تفسیر می کند و صحفه ی نمایش را آپدیت می کند. به عبارت دقیق تر ، کاربر حتی نمی داند که چیزی به سِروِر فرستاده شده است.

مثال PHP و AJAX

برای اینکه  به طور واضح نشان دهیم که دستیابی به اطلاعات یک بانک اطلاعات با کمک   PHPو AJAX چقدر آسان است، پرس و جو های {query} MySQL  به صورت on the fly و بدون به تعویق در آوردن عملیات دیگر خواهیم ساخت و نتایج را در “ajax.html” به نمایش خواهیم گذاشت. اجازه دهید پیش از اقدام به این عملیات یک سری پیش زمینه و کارهای ابتدایی را انجام بدهیم. با فرمان {command} زیر جدولی بسازید.

توجه

شما باید برای اجرای عملیات 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`)‎
‎)‎

حال اطلاعات زیر را با دستورهای {statement} Mysql در داخل جدول زیر قرار دهید.

INSERT INTO `ajax_example` VALUES (‘Jerry’‎،‎ ۱۲۰‎،‎ ‘m’‎،‎ ۲۰);‎

INSERT INTO `ajax_example` VALUES (‘Regis’‎،‎ ۷۵‎،‎ ‘m’‎،‎ ۴۴);‎

INSERT INTO `ajax_example` VALUES (‘Frank’‎،‎ ۴۵‎،‎ ‘m’‎،‎ ۸۷);‎

INSERT INTO `ajax_example` VALUES (‘Jill’‎،‎ ۲۲‎،‎ ‘f’‎،‎ ۷۲);‎

INSERT INTO `ajax_example` VALUES (‘Tracy’‎،‎ ۲۷‎،‎ ‘f’‎،‎ ۰);‎

INSERT INTO `ajax_example` VALUES (‘Julie’‎،‎ ۳۵‎،‎ ‘f’‎،‎ ۹۰);‎

فایل Client Side HTML

حال اجازه دهید فایل HTML طرف سرویس گیرنده {Client Side 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>‎

توجه

شیوه ی ارسال کردن متغیرها {variable} در پرس و جو {Query} بر مبنای استاندارهای HTTP و formA هست.

URL?variable1=value1;&variable2=value2;

حال کُد بالا صحفه ای مانند صحفه ی نمایش زیر به نمایش می گذارد.

MAX AGE:

MAX WPM:

Sex : m   Query Mysql

نتایج کار شما این جا نمایش داده خواهد شد.

فایل server side PHP

بنابراین پردازه ی طرف سرویس گیرنده {Client side server script} اکنون آماده است.حال باید پردازه ی طرف سرویس گیرنده {server side script} را بنویسید که اطلاعات مربوط به سن {age}،wmp  وجنسیت را از پایگاه اطلاعاتی دریافت کنید و سپس آن ها را دوباره به سرویس گیرنده بفرستید. کُد زیر را در فایل  “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”  یا هر کادر دیگری قرار دهید.

سپس دکمه ی Query MySQL را فشار دهید.

نتایج کار شما این جا نمایش داده خواهد شد.

MAX AGE:

MAX WPM:

Sex: m     Query mysql

اکنون شما قادر هستید با MySQL،PHP ، HTML و  Javascript به طور همزمان برای نوشتن برنامه های   AJAX کار کنید.