طراحی سایت در شرکت طراحی سایت مبنا
طراحی سایت هدف نیست، ارتقا تجارت هدف است

کاربرد Ajax در پایگاه داده

10 / 10 از 1 کاربر

در این قسمت از آموزش Ajax می خواهیم به توضیح کاربرد Ajax در پایگاه داده بپردازیم . برای این کار می خواهیم با ارائه یک مثال عملی و تشریح گام به گام آن ، نحوه استفاده و کار با دستورات Ajax  ، برای فراخوانی و دریافت اطلاعات از یک پایگاه داده و سپس نمایش آنها ، بر روی یک صفحه PHP  را نمایش دهیم .
در این مثال یک منوی کرکره ای قرار دارد که نام چندین مشتری در آن تعیین شده است . کاربر با انتخاب نام هر کدام از مشتریان ، به اطلاعات آن دسترسی پیدا خواهد کرد .
هنگامی که کاربر گزینه ای را در منوی کرکره ای  انتخاب می کند ، مجموعه ای از دستورات Ajax و PHP اجرا شده و در پس زمینه صفحه ، به پایگاه داده متصل می شوند . سپس اطلاعات درخواستی را دریافت کرده و پس از انتقال به صفحه در بخش مورد نظر ، به روز رسانی می نماید . برای اطلاعات بیشتر، در این بخش از مقالات طراحی سایت با ما همراه باشید.

کد فایل html و  تابع ( ) showUser :

هنگامی که کاربر گزینه ای را از منوی کرکره ای بر روی صفحه انتخاب می کند ، رویداد ( ) onchnage کنترل اجرا شده و تابع ( ) showUser را فراخوانی می کند . این رویداد مقدار انتخاب شده در کنترل را به وسیله دستور this.value به پارامتر str در تابع ارسال می کند ، تا به تابع اعلام کند ، کاربر کدام گزینه را انتخاب کرده است .
جدول زیر ، کد فایل HTML و کد تابع ( ) showUser را نمایش می دهد . کد آن را مرور نمایید . سپس به توضیح گام به گام آن پرداخته ایم .
این پروژه دارای یک فایل PHP نیز می باشد  که کد آن ، عملیات اتصال به پایگاه داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید .

 <html>
<head>
  <script>
      function showUser(str) {
    if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
        return;
        }
     if (window.XMLHttpRequest) {              //  IE7+, Firefox, Chrome, Opera, Safari   کد لازم برای مرورگر های جدید 
     xmlhttp = new XMLHttpRequest();
                          }
    else {             //  IE6, IE5         کد برای مرورگرهای قدیمی
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
    xmlhttp.onreadystatechange = function  ( ) {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
   }
   }
    xmlhttp.open("GET", "getuser.php?q=" + str, true);
    xmlhttp.send ( );
   }
</script>
</head>
<body>
   <form>
    <select name="users" onchange="showUser(this.value)">
    <option value="">Select a person:</option>
    <option value="1">Ali</option>
    <option value="2">Reza</option>
    <option value="3">Mohsen</option>
   </select>
   </form>
  <br>
  <div id="txtHint">
  <b>اطلاعات مشتری:</b>
  </div>
</body>
</html>

توضیح گام به گام کد مثال :

هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :
√ این بخش کد مثال ، بررسی می کند اگر کادر متن خالی نبوده و کاربر گزینه ای را انتخاب کرده باشد ، ( " "== str  ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود .
√ این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم .
√ این بخش از کد ، بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد .
√ این بخش از کد ، شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی getuser.php ارسال می کند .
همچنین توجه داشته باشید ، که متغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد .
√ فرم HTML موجود بر روی صفحه نیز ، کنترل کرکره ای را نمایش می دهد ، که کاربر می تواند از آن انتخاب نماید .
√ همچنین تگ  div با id برابر  txtHint ، پاسخ Ajax ارسالی را از سرور دریافت کرده و با یک عملیات به روز رسانی نمایش می دهد .

نمایش و توضیح کد فایل PHP :

این پروژه دارای یک فایل PHP هم می باشد ، که عملیات اتصال و دریافت از پایگاه داده را انجام می دهد .
نام این فایل getuser.php است که دستور Ajax صفحه HTML ، فایل PHP را با پاس دادن متغیر str به آن ، فراخوانی و اجرا می کند .
این صفحه مقدار پارامتر str ، که همان گزینه انتخاب شده در منوی کرکره ای است را دریافت کرده و به پایگاه داده متصل می شود . سپس اطلاعات فرد انتخاب شده را از پایگاه داده استخراج کرده و به صفحه HTML بر می گرداند .
جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های مختلف آن پرداخته ایم : (  توضیحات کوتاه با // )

< ?php
   $q=$_GET["q"];                          //   این دستور مقدار پارامتر ارسالی از دستور ای جکس را دریافت می کند
   $con = mysql_connect('localhost', 'Developer ' , 'abc123');               // ایج اد ارتباط با پایگاه داده مورد نظر 
   mysql_select_db("ajax_demo", $con);      //      انتخاب جدول مورد نظر
   $sql="SELECT * FROM user WHERE id = '".$q."'";              //    q    دریافت اطلاعات از جدول مورد نظر بر مبنای پارامتر
   $result = mysql_query($sql);           //         result     ریختن نتیجه عملیات انتخاب اطلاعات از پایگاه داده در متغیر
   echo "<table border='1'>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>";
  while($row = mysql_fetch_array($result))           //    ساخت جدول در خروجی با نتیجه دریافتی از پایگاه داده
      {
       echo "<tr>";
       echo "<td>" . $row['FirstName'] . "</td>";
       echo "<td>" . $row['LastName'] . "</td>";
       echo "<td>" . $row['Age'] . "</td>";
       echo "</tr>";
      }
   echo "</table>";
   mysql_close($con);   //       قطع ارتباط با پایگاه داده
?>

ارسال نظر و نظرات ثبت شده
نام شما :
ایمیل :
تلفن تماس :
متن پیغام :