آموزش PHP

آموزش PHP - آموزش AJAX

AJAX چیست؟

  • AJAX مخفف جاوا اسکریپت و XML بوده که با کمک XML، HTML، CSS و جاوا اسکریپت روشی جدید برای ایجاد برنامه های کاربردی بهتر، سریعتر و تعاملی محسوب می شود.
  • نرم افزار قرار دادی وب، اطلاعات و درخواست های همزمان را با استفاده از هماهنگی به سرور انتقال می دهد. این بدین معنی است که شما یک فرم را پر کرده، ارسال را زده و به یک صفحه جدید با اطلاعات جدید از سرور هدایت شوید.
  • با AJAX زمانی که ارسال می زنید، جاوا اسکریپت یک درخواست برای سرور ایجاد می کند، نتایج را تفسیر و صفحه فعلی را به روز می کند. در حقیقت، کاربر هرگز نمی داند که چیزی به سرور منتقل شده است.

مثال PHP و AJAX

این مثال دسترسی آسان به اطلاعات از پایگاه داده با استفاده از آژاکس و PHP را نشان می دهد، ما در حال ساخت کوئری های MySQL در زمان fly و نمایش نتایج بر روی ajax.html هستیم. اما قبل از انجام هر کاری، با استفاده از دستور زیر یک جدول ایجاد می کنیم.

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;

در حال حاضر کد بالا به شما یک صفحه به صورت زیر ارائه می دهد.

نکته:  این صفحه نمایش ساختگی است و کار نمی کند.

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

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

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

اکنون با وارد کردن یک مقدار معتبر در «حداکثر سن» یا هر جعبه دیگر سعی کنید دکمه Query MySQL را کلیک کنید.

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

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

خبـرنــامه

Newsletters

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

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

مبحث آموزشی

آموزش PHP

Learn PHP

سرفصل ها

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...