آموزش Ajax > مثال های عملی کار با Ajax > کاربرد Ajax در پایگاه داده

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

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

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

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

این پروژه دارای یک فایل PHP نیز می باشد  که کد آن ، عملیات اتصال به پایگاه داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید .

کد صفحه
HTML
و کد تابع
 ShowUser ( )
<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>
خروجی

: اطلاعات مشتری

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

هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :

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

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

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

جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های مختلف آن پرداخته ایم : (  توضیحات کوتاه با // )

کد فایل
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);   //       قطع ارتباط با پایگاه داده
?>


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان بگذارید :

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

نام :                 
آدرس Email :    
 
نظر شما :        
سوال امنیتی : پایتخت ایران ؟