آموزش AJAX در PHP

erfan molaei
3 سال پیش

آموزش 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`)
)

 

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

 

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

URL?variable1=value1;&variable2=value2;

 

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

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

بنابراین اکنون اسکریپت سمت مشتری شما آماده است. اکنون ما باید اسکریپت سمت سرور خود را بنویسیم که سن، wpm و جنسیت را از پایگاه داده دریافت کرده و برای مشتری ارسال می کند. کد زیر را در پرونده “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;
?>

 

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

 

منبع.

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

  1. آموزش PHP
  2. معرفی PHP
  3. آموزش تنظیمات محیط PHP
  4. آموزش نحو PHP
  5. آموزش انواع متغیر در PHP
  6. آموزش انواع ثابت ها در PHP
  7. آموزش انواع عملگرها در PHP
  8. آموزش تصمیم گیری در PHP
  9. آموزش انواع حلقه در PHP
  10. آموزش آرایه ها در PHP
  11. آموزش رشته ها در PHP
  12. آموزش مفاهیم وب در PHP
  13. آموزش روش های  GET & POST در PHP
  14. آموزش Inclusion فایل در PHP
  15. آموزش پرونده ها و I / O در PHP
  16. آموزش توابع در PHP
  17. آموزش کوکی ها در PHP
  18. آموزش جلسات در PHP
  19. آموزش ارسال ایمیل با استفاده از PHP
  20. آموزش بارگذاری پرونده در PHP
  21. آموزش استاندارد کدگذاری در PHP
  22. آموزش متغیرهای از پیش تعریف شده در PHP
  23. آموزش عبارات منظم در PHP
  24. آموزش مدیریت خطا و استثنا در PHP
  25. آموزش اشکال زدایی در PHP
  26. آموزش تاریخ و زمان در PHP
  27. آموزش MySQL در PHP
0
0
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه