آموزش AJAX در PHP

4 سال پیش

امتیاز دهید post

آموزش AJAX در PHP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش AJAX در PHP خواهیم پرداخت.

AJAX چیست؟

AJAX مخفف Asynchronous JavaScript و XML است. AJAX یک تکنیک جدید برای ایجاد برنامه های وب بهتر ، سریع تر و تعاملی با کمک XML ، HTML ، CSS و Java Script است.

برنامه وب معمولی با استفاده از درخواست های همزمان ، اطلاعات را به قطع کننده و از طریق آن انتقال می دهد. این بدان معنی است که شما یک فرم را پر می کنید ، ارسال را فشار می دهید و به صفحه جدیدی با اطلاعات جدید از سرور هدایت می شوید.

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

برای یادگیری کامل در مورد AJAX ، لطفاً به آموزش AJAX مراجعه کنید.

مثال PHP و AJAX

برای اینکه به روشنی نشان دهیم دسترسی به اطلاعات از یک پایگاه داده با استفاده از Ajax و PHP آسان است ، ما در حال ساخت کوئری های MySQL هستیم و نتایج را در “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`)
)

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);

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 است و دارای کد زیر خواهد بود

&lt;html&gt;
   &lt;body&gt;
      
      &lt;script language = "javascript" type = "text/javascript"&gt;
         &lt;!--
            //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 +=  "&amp;wpm=" + wpm + "&amp;sex=" + sex;
               ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
               ajaxRequest.send(null); 
            }
         //--&gt;
      &lt;/script&gt;
        
      &lt;form name = 'myForm'&gt;
         Max Age: &lt;input type = 'text' id = 'age' /&gt; &lt;br /&gt;
         Max WPM: &lt;input type = 'text' id = 'wpm' /&gt;
         &lt;br /&gt;
         
         Sex: &lt;select id = 'sex'&gt;
            &lt;option value = "m"&gt;m&lt;/option&gt;
            &lt;option value = "f"&gt;f&lt;/option&gt;
         &lt;/select&gt;
            
         &lt;input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/&gt;
            
      &lt;/form&gt;
      
      &lt;div id = 'ajaxDiv'&gt;Your result will display here&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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 id = 'sex'>

</select>

</form>

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

</body>

</html>

توجه – نحوه عبور متغیرها در Query مطابق با استاندارد HTTP و have formA است.

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

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

اکنون کد بالا صفحه ای را به شما می دهد که در زیر آورده شده است

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

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

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

<?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;

اگر این درس را با موفقیت به پایان رسانده اید، می دانید که چگونه از MySQL ، PHP ، HTML و Javascript به طور همزمان برای نوشتن برنامه های Ajax استفاده کنید.

منبع.

لیست جلسات قبل آموزش PHP

امتیاز دهید post

نویسنده مطلب saber

آموزش AJAX در PHP

آموزش AJAX در PHP

AJAX چیست؟

مثال PHP و AJAX

پرونده HTML سمت کاربر

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

لیست جلسات قبل آموزش PHP

دیدگاه شما

بدون دیدگاه

آموزش AJAX در PHP

AJAX چیست؟

مثال PHP و AJAX

پرونده HTML سمت کاربر

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

لیست جلسات قبل آموزش PHP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه