/
  • آموزش Ajax از ابتدا

  • صفحه‌ها (6):
  • ارسال پاسخ   امتیاز موضوع:
    • 10 رأی - میانگین امیتازات: 4.5
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی آموزش Ajax از ابتدا
    نویسنده پیام
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #1
    آموزش Ajax از ابتدا
    ابتدا قبل از اینکه شروع به اموختن ajax کنیم باید یک مطلب را یاد اور شوم و ان تلفظ درست این کلمه است در بیشتر سایت ها این کلمه را به صورت اجاکس یا اژاکس تلفظ می کنن اما تلفظ درست این کلمه (إی جَکس) است و این چیزیست که خیلی از افراد ان را اشتباه می کنند .

    ajax یک زیان برنامه نویسی جدید نیست بلکه ajax یک تکنیک برای جذاب تر کردن صفحات وب است به صورتی که زبان های برنامه نویسی شناخته شده وب را به گونی ای غیر معمول ترکیب میکند تا به برنامه نویس این امکان را بدهد برنامه های وب را جذابتر از ان چیزی که به صورت معمول رواج دارد به نمایش بگذارد .


    کار ajax چیست ؟

    همانطور که گفتم ajax یک تکنیک برای جذاب کردن صفحات وب و از طرف دیگر بالا بردن سرعت بروز رسانی صفحات است .
    دربازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی درخواست تمام عکسها , لوگوها و کدها از سرور می باشد اما شما با استفاده از این تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز کردن کل صفحه نیست این کار توسط فناوری ajax انجام میشود .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ خرداد ۲۸ ۰۹:۳۸ عصر، توسط php.)
    ۱۳۸۸ فروردين ۳۰ ۱۲:۲۱ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Y.P.Y molana oia admin zoghal parvane abedi98 parsig sajjilove aligilani1986 cyletech Maya bigane mahsanet amir.s farokh Alimokhlesi AloneStar2008 payam mehdi_bahari_63 AHMADBADPEY htarahi designer amird imanmoodi bcmodir javadt yones_safari h_qorbani emrooz Goback king_net 3enator sulduz Unknown_ dijavoo Sumaan mahtab. boBak miladr24 milyooner reza10wert javafa msasan1367 mostafa_sh YasFun.Ir Mohsen Neo dariush reza6966 Tiger game100 vahid83 mkj بیتا حکمت
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #2
    RE: اموزش ajax از ابتدا
    شروع اولین کار

    خوب بهتره به جای بحث الکی بر روی نحوه ی به وجود امدن این تکنیک و توضیحات بی مورد یک کار عملی رو با هم تجربه کنیم .

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

    خوب طرح کلی کار از این قرار هست که ما یک فرم داریم که کاربر برای ثبت نام در سایت از اون استفاده می کنه .
    حالا من می خوام قبل از ارسال اطلاعات وکلیک روی دکمه send بدون رفرش صفحه نام کاربری کاربر رو چک کنم و در صورت تکراری بودن نام وارد شده کاربر رو از این خبر مطلع کنم تا قبل از ارسال اطلاعات این مشکل رو رفع کنه .


    کار رو از طراحی صفحه html شروع می کنیم .ابتدا یک جدول برای قرار گرفتن فرممون در داخل اون طراحی میکنیم و فرم رو داخل اون قرار میدم .
    تا اینجا یک صفحه داریم که فقط ظاهر صفحه مورد نظرمون رو در بر گرفته و یک دکمه هم با عنوان check داریم که فعلا هیچ عملی رو انجام نمیده ولی بعدا قراره با کلیک بر روی این دکمه نام کاربری کاربر رو چک کنه .


    کد:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <form action="index.php" method="post">
    <table width="300" border="0">
      <tr>
        <td><label for="name">name </label></td>
        <td><input type="text" id="name" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><label for="user">user </label></td>
        <td><input type="text" id="user" /></td>
        <td style="text-align:left"><input type="button" value="check" /></td>
      </tr>
      <tr>
        <td><label for="pass">password</label></td>
        <td><input type="password" id="pass" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
          <td></td>
        <td colspan="2"><input type="submit" id="send" /></td>
      </tr>
    </table>
    </form>
    </body>
    </html>


    ادامه کار رو بزودی قرار میدم .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ خرداد ۲۸ ۰۹:۴۳ عصر، توسط php.)
    ۱۳۸۸ ارديبهشت ۶ ۰۲:۴۶ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : oia molana parvane cyletech Maya mahsanet AloneStar2008 mehdi.gpr htarahi mostafanastary RaminMT yones_safari emrooz bcmodir king_net 3enator sulduz Unknown_ dijavoo Sumaan boBak javafa msasan1367 ramtin2025 tameshk20 game100 vahid83 mkj
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #3
    RE: آموزش Ajax از ابتدا
    تا اینجا ظاهر کار رو داریم .

    حالا باید کاری کنیم که با کلیک روی دکمه check وجود یا عدم وجود نام کاربری در بانک اطلاعاتی برسی بشه .

    تنها کاری که ما باید انجام بدیم ارسال نام کاربری به سرور و چک اون هست که باید مرحله ارسال رو از طریق جاوااسکریپت و چک اون رو از طریق php انجام بدیم .

    برای این کار باید یک مقدماتی رو فراهم کنیم که با هم تک تک کارهای لازم برای انجام این کار رو انجام خواهیم داد.

    در این قسمت به نوشتن کدهای سمت کلاینت یا همون کدهای جاوااسکریپت لازم برای ارسال دادها می پردازیم .

    برای ایجاد ارتباط باید از پروتکل http استفاده کنیم باید یک شی از نوع xml http request بسازیم که از طریق اون در خواست های خودمون به وسیله ی این پروتکل ارسال و پاسخ های ارسالی رو کنترل کنیم .

    به خاطر تفاوت هایی که در مرورگرهای مختلف وجود داره نمیشه از یک روش مشخص برای ساخت این شی استفاده کرد برای همین باید این کار رو به صورت زیر انجام بدیم .


    کد PHP:
    //AJAX ,اجاکس , ایجکس , اژاکس
    function GetXmlHttpObject()
    {
    var 
    xmlHttp=null;
    try
     {
     
    // Firefox, Opera 8.0+, Safari
     
    xmlHttp=new XMLHttpRequest();
     }
    catch (
    e)
     {
     
    //Internet Explorer
     
    try
      {
      
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
     catch (
    e)
      {
      
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
    return 
    xmlHttp;



    روش اول ساخت نمونه روشی است که در تمام مرورگر های استاندارد پشتیبانی می شود ولی باز مشکل در ie پیش میاد که مجبوریم در ie ابرای هر کدوم از نسخه ها از یک روش استفاده کنیم .

    این مشکل به دلیل این هست که ie این شی رو به صورت اکتیوکس پیاده سازی کرده در حالی که در مرورگرهای معروف دیگه مانند firefox,opera,safari این شی به صورت اشیاء داخلی کتابخانه های جاوااسکریپت پیاده سازی شده .به خاطر همین تعارض مجبوریم کدی که برای ساخت xmlhttprequest استفاده میکنیم شرطی برای ساخت از طریق اکتیوکس و یا اشیاء داخلی جاوااسکریپت داشته باشه .

    بعد از تعریف تابعی برای ساخت شی XmlHttpRequest در داخل جاوااسکریپت حالا یک تابع برای ارسال نام کاربری به سرور می سازیم .


    اسم تابع رو checkuser میزاریم .

    کد PHP:
    function checkUser()

    xmlHttp=GetXmlHttpObject();
    if (
    xmlHttp==null)
     {
     
    alert ("Browser does not support HTTP Request");
     return;
     }



    تا اینجا توسط تابع یک نمونه از شی xmlHttpRequest رو ساختیم و در خط بعد متغییر مون رو با null چک کردیم این کار به خطر این هست که اگر مروگری این شی رو پشتیبانی نکرد پیام مناسبی برای کاربر نمایش داده بشه .

    حالا فرض رو بر این میگیریم که نمونه ای از اون کلاس ساخته شده حالا این شی دارای یک متدهایی هست که برای ادامه کارمون باید از این متدها استفاده کنیم .

    برای ارسال نام کاربری به صورت Get باید نام کاربری رو در کنار ادرس صفحه قرار بدیم و اون رو به سرور ارسال کنیم .

    ابتدا ادامه کد رو قرار میدم و سپس متدهای این شی رو توضیح میدم .

    کد PHP:
    function checkUser()

      
    xmlHttp=GetXmlHttpObject();
      if (
    xmlHttp==null)
      {
        
    alert ("Browser does not support HTTP Request");
        return;
      }

      
    url='index.php?user='+document.getElementById('user').value;
      
    xmlHttp.onreadystatechange=stateChanged;
      
    xmlHttp.open("GET",url,true);
      
    xmlHttp.send(null);
      return 
    false;



    در ادامه بزودی هر یک از این متدها و استفاده انها رو توضیح خواهم داد .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ شهريور ۵ ۱۱:۲۳ صبح، توسط php.)
    ۱۳۸۸ ارديبهشت ۱۰ ۰۳:۵۸ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Y.P.Y admin cyletech Maya mahsanet AloneStar2008 bitanaz htarahi mostafanastary yones_safari emrooz 3enator dijavoo javafa reza10wert vahid83
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #4
    RE: آموزش Ajax از ابتدا
    تابع onreadystatechange با تغییر وضعیت تابع متناضر با خودش رو فراخونی می کنه .

    5 وضعیت مختلف برای ارسال اطلاعات ممکن است پیش بیاد که عبارتند از صفر=هیچ عملیاتی صورت نگرفته , 1=درحال بارگذاری ,2=عملیات بارگذاری به اتمام رسیده ,3=خاتمه دادن عملیات , 4=کامل شدن اطلاعات ارسالی

    اسم تابع نوشته شده در مقابل تابع onreadystatechange در صورت تغییر هر کدام از این وضعیت ها فراخوانی می شود .

    تابع open سه پارامتر می گیره که پارامتر اول نوع ارسال داده ها رو مشخص میکنه پارامتر دوم ادرس صفحه ای رو که می خوایم اطلاعات رو برای اون ارسال کنیم چون در اینجا ما اطلاعات رو به صورت get ارسال می کنیم فیلد user رو هم در url قرار داده و ارسال می کنیم و پارامتر سوم هم نشان دهنده همگام یا ناهمگام بودن فراخوانی است .

    مقدار متغییر url در صورتی که هنگام پر کردن فرم مقدار عبارت user رو برابر hossein بدیم مقدار متغییر url برابر با مقدار زیر خواهد بود .
    کد:
    index.php?user=hossein

    تابع send اگر اطلاعات ارسالی به صورت data وجود داشته باشه از این تابع برای ارسال استفاده می کنیم اما چون ما در اینجا اطلاعات رو به صورت get ارسال کردیم مقدار این تابع رو برابر null قرار میدیم .

    تا اینجا کارای هر یک از توابع رو توضیح دادیم و حالا یک بار برنامه رو تا اینجا چک میکنیم .

    کاربر وارد سایت میشه اطلاعات خودش رو پر میکنه و برای چک نام کاربری بر روی دکمه check کلیک می کنه در این هنگام ما باید تابع checkUser رو فراخونی کنیم بنابراین دکمه check رو به صورت زیر تغییر میدیم .

    کد PHP:
    <input type="button" value="check"  onclick="checkUser()"/> 

    تابع checkUser فراخونی میشه و در ابتدا یه نمونه از شی XmlHttp ساخته میشه و بعد در صورت درست نشدن این نمونه از شی XmlHttp یک پیام به کاربر نمایش میده و از ادامه اجرای تابع صرف نظر میکنه اما در صورت رد کردن این مرحله و ادامه کار متغییری که تعریف کردیم , ادرس صفحه ای رو که نام کاربری باید به اون ارسال بشه همراه با پارامتر نام کاربریمون در بر میگیره .
    توسط تابع open فراخونی مورد نظرمون رو تنظیم می کنیم .در خواست هنگامی ارسال میشه که متد send اجرا بشه و در انتها متد send رو با مقدار null فراخونی کردیم یعنی هیچ مقداری رو به صورت post نمی خوایم ارسال کنیم . در ادامه کار در صورت تغییر هر کدوم از وضعیت ها , تابع stateChanged فراخونی میشه که البته هنوز این تابع رو تعریف نکردیم


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

    این تابع رو به صورت زیر تعریف می کنیم .

    کد PHP:
        function stateChanged() 
        { 
        if (
    xmlHttp.readyState==|| xmlHttp.readyState=="complete")
         { 
            if (
    xmlHttp.responseText==1)    
            {    
                
    document.getElementById("user").style.border="1px solid #FF0000";
            }
            else{
                
    document.getElementById("user").style.border="1px solid #00CC00";
            }
          } 
        } 

    متد readyState وضعیت درخواستمون رو نگه داری میکنه در بالا دو حالت مختلف رو ما چک کردیم اول وضعیت 4 وبعد وضعیت complete در واقع هر دوی این وضعیت ها یکی هستند وبه کامل بودن صفحه اشاره می کنند .

    متد responseText هم نتیجه ارسالی از سرور رو بر میگردونه
    در سرور اگر نام کاربری وجود داشته باشه قراره مقدار یک و در غیر اینصورت قراره مقدار صفر رو برگردونه بشه , حالا در تابع stateChanged چک میکنیم اگر مقدار برگشتی از سرور برابر یک هست حاشیه جعبه متن مربوط به user رو برابر با قرمز و در غیر اینصورت برابر با سبز قرار میدیم .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ خرداد ۲۸ ۱۰:۱۷ عصر، توسط php.)
    ۱۳۸۸ خرداد ۲۲ ۰۷:۴۲ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Y.P.Y Maya zoghal scooter AloneStar2008 htarahi mostafanastary p3jm0n yones_safari emrooz 3enator dijavoo bcmodir javafa ramtin2025 vahid83
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #5
    RE: آموزش Ajax از ابتدا
    تصمیم گرفتم اول این بحث رو تموم کنم بعد برم سراغ امتحانما البته تموم نه به این معنی که دیگه ادامه نمی دم نه هنوز این بحث ادامه داره ولی اولین برناممون دیگه داره تموم میشه .
    خوب تو جلسه پیش کدهای Ajax مورد نیاز رو نوشتیم و حالا فقط لازمه که در سمت سرور به بانک اطلاعاتی وصل بشیم و نتیجه رو برای این صفحه بر گردونیم .

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

    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>

    <
    script type="text/javascript">
        function 
    GetXmlHttpObject()
        {
        var 
    xmlHttp=null;
        try
         {
         
    // Firefox, Opera 8.0+, Safari
         
    xmlHttp=new XMLHttpRequest();
         }
        catch (
    e)
         {
         
    //Internet Explorer
         
    try
          {
          
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (
    e)
          {
          
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
         }
        return 
    xmlHttp;
        }
        
        
        function 
    checkUser()
        { 
          
    xmlHttp=GetXmlHttpObject();
          if (
    xmlHttp==null)
          {
            
    alert ("Browser does not support HTTP Request");
            return;
          }
        
          
    url='index.php?user='+document.getElementById('user').value;
          
    //alert(url);
          
    xmlHttp.onreadystatechange=stateChanged;
          
    xmlHttp.open("GET",url,true);
          
    xmlHttp.send(null);

        }
        
        function 
    stateChanged() 
        { 
        if (
    xmlHttp.readyState==|| xmlHttp.readyState=="complete")
         { 
            if (
    xmlHttp.responseText=='1')    
            {    
                
    document.getElementById("user").style.border="1px solid #FF0000";
            }
            else{
                
    document.getElementById("user").style.border="1px solid #00CC00";
            }

          } 
        }

    </script>
    </head>

    <body>
    <form action="index.php" method="post">
    <table width="300" border="0">
      <tr>
        <td><label for="name">name </label></td>
        <td><input type="text" id="name" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><label for="user">user </label></td>
        <td><input type="text" id="user" /></td>
        <td style="text-align:left"><input type="button" value="check"  onclick="checkUser()"/></td>
      </tr>
      <tr>
        <td><label for="pass">password</label></td>
        <td><input type="password" id="pass" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
          <td></td>
        <td colspan="2"><input type="submit" id="send" /></td>
      </tr>
    </table>
    </form>
    </body>
    </html> 

    این صفحه رو من با نام index.html ذخیره کردم .

    در بانک اطلاعاتی یک Database درست کردم با نام Ajax و با یک جدول به نام users که داخل اون فیلدای لازم برای هر کابر رو تعریف کردم از جمله user و password . چند تا کاربر رو هم داخلش وارد کردم .

    حالا یه اتصال به بانک اطلاعاتی انجام میدیم و تمام رکورد هایی که بانام کاربری فرستاده شده از طرف کلاینت که اون رو به صورت get ارسال کردیم وجود داره رو جستجو می کنیم .تابع mysql_num_rows تعداد رکوردهای پیدا شده رو بر می گردونه بابررسی نتیجه این تابع می تونی بفهمیم که نام کاربری قبلا ثبت شده است یا نه .

    کد PHP:
    <?php
    //AJAX ,اجاکس , ایجکس , اژاکس
        
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);
        
    $sql="SELECT *  FROM `users` WHERE `user` ='".$_GET['user']."'";
        
    $r=mysql_query($sql);
        
    $result=mysql_num_rows($r);
         echo( 
    $result);
    ?>


    در ادامه قراره تمام کارهایی رو که میشه با ajax انجام داد رو اینجا تجربه کنیم فقط تا بعد از امتحانا به من فرصت بدین .


    فایل‌(های) پیوست شده
    .zip  project 1 by ajax.zip (اندازه: 1.25 KB / تعداد دفعات دریافت: 884)
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ شهريور ۵ ۱۱:۲۴ صبح، توسط php.)
    ۱۳۸۸ خرداد ۲۸ ۱۰:۵۷ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : bigane cyletech AHMADBADPEY AloneStar2008 htarahi mostafanastary sarehnasseri farhadfery alasht h_qorbani yones_safari emrooz 3enator dijavoo javafa msasan1367 pitook dino
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #6
    RE: آموزش Ajax از ابتدا
    اولین برنامه با موفقیت تمام شد اگه هر کدوم از بچه ها نظری داشتن هین جا مطرح کنن البته از دادن پست های الکی برای جلوگیری از شلوغی پرهیز کنید .



    برنامه دوم :سیستم ثبت نام به وسیله ajax


    همانطور که قول داده بودم بر گشتم .

    در ادامه قراره یک سیستم ثبت نام با ajax رو پیاده سازی کنیم .




    چند نکته


    1- بدلیل اینکه تمام اطلاعات رو باید از طریق جاوااسکریپت برای سرور ارسال کنیم دیگه نیازی به وجود فرم در صفحه نیست .

    2- بدلیل نبدون فرم از دکمه submit هم دیگه استفاده نمی کنیم .

    3- به خاطر مهم بودن اطلاعاتی که می خوایم ارسال کنیم (بر عکس برنامه بالا) باید ازمتد post استفاده کنیم و باید خودمون این عملیات رو از طریق جاوااسکریپت شبیه سازی کنیم .



    طراحی ظاهر برنامه


    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    </
    head>

    <
    body>
        <
    div id="state">
                <
    table width="200" border="0">
                  <
    tr>
                    <
    td>name : </td>
                    <
    td><input type="text" id="name" /></td>
                  </
    tr>
                  <
    tr>
                    <
    td>family : </td>
                    <
    td><input type="text" id="family" /></td>
                  </
    tr>
                  <
    tr>
                    <
    td>user name : </td>
                    <
    td><input type="text" id="user" /></td>
                  </
    tr>
                  <
    tr>
                    <
    td>passwords : </td>
                    <
    td><input type="password" id="pass" /></td>
                  </
    tr>
                  <
    tr>
                    <
    td>tell : </td>
                    <
    td><input type="text" id="tell" /></td>
                  </
    tr>
                  <
    tr>
                    <
    td colspan="2" align="center">
                        <
    input type="button" value="send" onclick="send_information()" />
                    </
    td>
                
                  </
    tr>
                
                </
    table>
            </
    div>
        </
    body>
    </
    html

    در طراحی ظاهری از 5فیلد نام ,نام خانوادگی,نام کاربری,پسورد و شماره تلفن استفاده شده و برای هر کدوم از این ها یک id در نظر گرفتیم (برای دسترسی به عناصر در جاوااسکریپت از اون استفاده می کنیم)

    و یک div با نام state که کل محتویات صفحه رو در بر گرفته .
    که در صورت ثبت با موفقیت اطلاعات پیامی را به جای عناصر داخلی ان برای کاربر نمایش خواهیم داد.
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ تير ۶ ۰۳:۲۷ عصر، توسط php.)
    ۱۳۸۸ تير ۵ ۰۱:۲۵ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : molana AloneStar2008 htarahi mostafanastary yones_safari h_qorbani emrooz 3enator dijavoo javafa msasan1367 ghorbat
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #7
    RE: آموزش Ajax از ابتدا


    روند کلی از این قراره


    یک تابع تعریف کنیم (با نام send_information) که با کلیک بر روی دکمه ثبت , این تابع فراخونی و از طریق این تابع اطلاعاتمون رو به صورت post برای سرور ارسال و در نهایت تابعی برای دریافت نتیجه از سرور که در صورت ثبت درست اطلاعات پیام مناسب رو برای کاربر نمایش بده .

    روند کلی کار مانند برنامه قبل هست , باید یک نمونه از شی xmlHttpRequst بسازیم و از طریق این شی اطلاعاتمون رو ارسال و نتیجه رو دریافت کنیم .
    تنها تفاوت برنامه در ارسال اطلاعات و عملیاتی هست که در پاسخ سرور باید انجام بدیم .



    حالا میریم سراغ جاوااسکریپت لازم برای این کار .


    تعریف تابع GetXmlHttpObject() مانند برنامه قبل برای ساخت نمونه ای از شیxmlHttpRequst .

    کد PHP:
    //AJAX ,اجاکس , ایجکس , اژاکس
    function GetXmlHttpObject()
    {
        var 
    xmlHttp=null;
        try
         {
         
    // Firefox, Opera 8.0+, Safari
         
    xmlHttp=new XMLHttpRequest();
         }
        catch (
    e)
         {
         
    //Internet Explorer
         
    try
          {
          
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (
    e)
          {
          
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
         }
        return 
    xmlHttp;


    تعریف یک تابع با نام $ برای راحتی کار با عناصر دورن صفحه


    کد PHP:
    function $(id)
    {
        return(
    document.getElementById(id));


    با تعریف این تابع به جای استفاده از document.getElementById برای دسترسی به عنصر داخل صفحه از تابع $ همراه با نام عنصر استفاده می کنیم ($ در javascript جزء کلمات رزرو شده نیست) با اینکار در کد نویسی راحت تر خواهیم بود.




    تابع send_information()






    کد PHP:
    function send_information()

          
    xmlHttp=GetXmlHttpObject();
          if (
    xmlHttp==null)
          {
            
    alert ("Browser does not support HTTP Request");
            return;
          }
          
    //page address in server 
          
    url='index.php';
          
    //paramet in text box
          
    params='name='+$('name').value+'&family='+$('family').value+'&user='+
              $(
    'user').value+'&pass='+$('pass').value+'&tell='+$('tell').value;

          
    xmlHttp.onreadystatechange=stateChanged;

          
    xmlHttp.open("POST"urltrue);
        
          
    //Send the proper header information along with the request
          
    xmlHttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
          
    xmlHttp.setRequestHeader("Content-length"params.length);
          
    xmlHttp.setRequestHeader("Connection""close");
          
         
    xmlHttp.send(params);



    بازهم در ابتدا تابع GetXmlHttpObject)( رو فرخونی می کنیم تا یک نمونه از شی xmlHttpRequest رو بسازیم .
    دو متغیر با نام های url و params تعریف کردیم url ادرسی که اطلاعات باید به اون ارسال بشوند رو نگه داری میکنه و params شامل اطلاعاتیست که باید ارسال بشوند که برای گرفتن اطلاعات از همون تابع $ که قبلا تعریف کرده بودیم استفاده کردیم .

    در مثال قبلی به خاطر اینکه اطلاعت قرار بود به صورت get ارسال کنیم ادرس صفحه و داده ارسالیمون رو داخل یک متغیر قرار دادیم ولی اینجا به دلیل ارسال اطلعات به صورت post اون ها رو از هم جدا کردیم .

    در تابع open نوع ارسال رو post تعریف می کنیم و در پارامتر دوم ادرس صفحه رو وارد میکنیم .

    برای ارسال اطلاعات به صورت post باید این عمل رو شبیه سازی کنیم این کار رو توسط سه خط زیر انجام دادیم .



    کد PHP:
          xmlHttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
          
    xmlHttp.setRequestHeader("Content-length"params.length);
          
    xmlHttp.setRequestHeader("Connection""close"); 

    و در انتها توسط متد send شی xmlHttp دادها رو ارسال می کنیم .

    برای دریافت نتیجه باز هم مانند برنامه قبل عمل می کنیم منتها با برخی تغییرات جزئی.



    تابع stateChanged()



    کد PHP:
        function stateChanged() 
        { 
        if (
    xmlHttp.readyState==|| xmlHttp.readyState=="complete")
         { 
             
    //alert(xmlHttp.responseText);
            
    if(xmlHttp.responseText==1)
                $(
    'state').innerHTML="success";
            
         } 
        } 

    این تابع در صورت با موفقیت انجام شدن عملیات پیام success رو به جای عناصر درون تگ div نمایش خواهد داد .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ شهريور ۵ ۱۱:۲۸ صبح، توسط php.)
    ۱۳۸۸ تير ۶ ۰۳:۲۵ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : molana AHMADBADPEY htarahi mostafanastary emrooz 3enator dijavoo javafa msasan1367 vahid83
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #8
    RE: آموزش Ajax از ابتدا

    عملیات سمت سرور

    این برنامه ajax هم دیگه داره تموم میشه و فقط مونده عملیات سمت سرور .

    کد PHP:
    <?php
    //اجاکس , ایجکس , اژاکس ,AJAX     
        
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);

        
    $sql="INSERT INTO `ajax`.`users` (
    `id` ,
    `name` ,
    `family` ,
    `user` ,
    `pass` ,
    `tell` 
    )
    VALUES (
    NULL
    , '"
    .$_POST['name']."'
    , '"
    .$_POST['family']."'
    , '"
    .$_POST['user']."'
    , MD5( '"
    .$_POST['pass']."' )
    , '"
    .$_POST['tell']."' )";


        
    //echo($sql);
        
    $result=mysql_query($sql);
        echo(
    $result);
    ?>

    حالا در سمت سرور داها را رو ما به صورت post داریم . تنها کاری که باید بکنیم اتصال به بانک اطلاعاتی و نوشتن یک کوئری برای ذخیره دادها در بانک اطلاعاتیمون و برگردوندن نتیجه اون (در صورت ثبت درست مقدار 1 برمی گردونه) و در اخر هم این نتیجه رو چاپ کردیم که این نتیجه رو در سمت کلاینت هم داشته باشیم و در سمت کلاینت توسط تابع stateChanged در صورت اینکه جواب برگشتی از سمت سرور برابر باشه در صفحه پیام success رو نمایش میدیم .


    فایل‌(های) پیوست شده
    .zip  post ajax.zip (اندازه: 3.05 KB / تعداد دفعات دریافت: 701)
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ شهريور ۵ ۱۱:۳۰ صبح، توسط php.)
    ۱۳۸۸ تير ۸ ۱۰:۰۷ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : htarahi mostafanastary farhadfery h_qorbani yones_safari emrooz 3enator dijavoo bcmodir javafa aliphp1 msasan1367 mozhdeh dino vahid83
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #9
    RE: آموزش Ajax از ابتدا
    برنامه سوم :اضافه کردن به لیست با استفاده ازajax


    در این برنامه یه لیست از دانشجوها داریم که قراره به وسیله ajax به این لیست اضافه کنیم .

    برای هر دانشجو فیلدهای نام , نام خانوادگی , شماره دانشجویی رو در نظر می گیریم .

    بانک اطلاعاتی به نام ajax و جدولی به نام students در ان ایجاد می کنیم و فیلدهای id,name,family,code رو برای ان می سازیم .

    کد PHP:
    CREATE TABLE IF NOT EXISTS `students` (
      `
    idint(11NOT NULL auto_increment,
      `
    namevarchar(50character set utf8 collate utf8_unicode_ci NOT NULL,
      `
    familyvarchar(50character set utf8 collate utf8_unicode_ci NOT NULL,
      `
    codeint(11NOT NULL,
      
    PRIMARY KEY  (`id`)
    ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=

    فایلی به نام index.php ایجاد می کنیم که شامل جدولی برای نمایش اطلاعات بانک اطلاعاتی و رکورد های اضافه شده به ان است و قسمتی شامل textfiled هایی برای اضافه کردن داده جدید به بانک .

    index.php
    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    titleADD BY AJAX </title>
    </
    head>

    <
    body>

    <
    table id='students' width="200" border="1" dir="rtl">
      <
    tr>
        <
    td>نام </td>
        <
    td>نام خانوادگی</td>
        <
    td>شماره دانشجو</td>
      </
    tr>
    <?
    php
    //اجاکس , ایجکس , اژاکس ,AJAX 
        
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);
        
    mysql_query("set names 'utf8'");
        
    $q="SELECT * FROM `students` ";
        
    $query=mysql_query($q);
        while(
    $row=mysql_fetch_assoc($query))
        {
            
    $name=$row['name'];
            
    $family=$row['family'];
            
    $code=$row['code'];
            echo 
    "    <tr>
                        <td>
    $name </td>
                        <td>
    $family</td>
                        <td>
    $code</td>
                      </tr>"
    ;
        }
    ?>
    </table>

    <table width="400" border="0">
      <tr>
        <td>نام</td>
        <td><input type="text" id="name" /></td>
     </tr>
     <tr>
        <td> نام خانوادگی</td>
        <td><input type="text" id="family" /></td>
     </tr>
     <tr>
        <td>شماره دانشجویی</td>
        <td><input type="text" id="code" /></td>
      </tr>
     <tr>
         <td>&nbsp;</td>
        <td><input type="button" value="ارسال" onclick="sendToServer()"/></td>
      </tr>
    </table>

    </body>
    </html> 

    در ابتدای اجرا صفحه جدولی شامل سه ستون رسم میشه و با اتصال به بانک اطلاعاتی اطلاعات واکشی شده و در جدول قرار میگیره .
    در زیر این جدول قسمتی داریم برای وارد کردن اطلاعات که پس از وارد کردن اطلاعات و کلیک روی دکمه ارسال رویداد onclick دکمه اجرا شده و تابع sendToServer فراخوانی میشود این تابع وظیفه ارسال اطلاعات به سرور رو بر عهده داره .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ مهر ۵ ۱۲:۲۷ صبح، توسط php.)
    ۱۳۸۸ تير ۱۱ ۰۱:۰۷ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : htarahi mostafanastary yones_safari emrooz 3enator dijavoo javafa aliphp1
    php آفلاین
    hossein
    ****

    ارسال‌ها: 612
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #10
    RE: آموزش Ajax از ابتدا
    قسمت مهم کار قسمت جاوا اسکریپت کارمون هست .

    فرض می کنیم اطلاعات رو ما به سرور ارسال کردیم و اطلاعات با موفقیت در بانک ذخیره شد حالا ما باید توسط جاوااسکریپت یک سطر به جدولمون اضافه کنیم و اطلاعات رو در اون نمایش بدیم .

    یه تابع تعریف می کنیم به نام ADD که سه تا ارگمان می گیره و به وسیله این سه تا ارگمان سطر جدید جدولمون رو پر می کنیم .

    ابتدا نوشتن تابع و بعد توضیح

    کد PHP:
    //اجاکس , ایجکس , اژاکس ,AJAX 
    function add(name,family,code)
    {
        
    tbody=document.getElementById('students').getElementsByTagName('TBODY')[0];
        var 
    row=document.createElement('TR');
        
    row.setAttribute("id","tr",name);
        var 
    td1=document.createElement('TD');
        
    td1.innerHTML=name;
        var 
    td2=document.createElement('TD');
        
    td2.innerHTML=family;
        var 
    td3=document.createElement('TD');
        
    td3.innerHTML=code;
        
    row.appendChild(td1);
        
    row.appendChild(td2);
        
    row.appendChild(td3);
        
    tbody.appendChild(row);



    در خط اول tbody به بدنه جدول students مون اشاره می کنه و پس از اون چهار تا متغییر دیگه تعریف کردیم که از نوع عنصر های td ,tr ها مون هستن که قراره با کنار هم قرار گرفتن اینها یک سطر از جدولمون رو بسازیم . بعد از تعریف هر td محتویات اون رو برابر یکی از ارگام های ارسالیمون گذاشتیم و پس از این کار توسط تابع appendChild هر کدوم از td ها رو به عنوان فرزند row در نظر گرفتیم (که همون tr مون هست) و سپس در خط اخر row رو به عنوان بدنه جدولون معرفی کردیم .

    برای امتحان تابع می تونین از کد زیر استفاده کنین .

    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    </
    head>

    <
    body>
    <
    table id='students' width="200" border="1" dir="rtl">
      <
    tr>
        <
    td>نام </td>
        <
    td>نام خانوادگی</td>
        <
    td>شماره دانشجو</td>
      </
    tr>
     </
    table>


      <
    input type="button" value="ساخت" onclick="add('hossein','jalili','8808621609')"/></td>

    </
    body>
    </
    html

    واقعا نوشتن این تابع کار سختی بود دیگه بغییه باشه بعدا Big Grin

    ________________________________________________________________________________​________________________________________________


    برگشتم تا کاری رو که نصفه کاره گذاشته بودم رو تموم کنم .

    قسمت هایی از جاوااسکریپت کارمون مونده که باید تمومشه .

    ابتدا تابع همیشگیمون رو که تو هر برنامه از واون استفاده می کردیم رو تعریف می کنیم .
    کد PHP:
    //اجاکس , ایجکس , اژاکس ,AJAX 
    function GetXmlHttpObject()
    {
        var 
    xmlHttp=null;
        try
         {
         
    // Firefox, Opera 8.0+, Safari
         
    xmlHttp=new XMLHttpRequest();
         }
        catch (
    e)
         {
         
    //Internet Explorer
         
    try
          {
          
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (
    e)
          {
          
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
         }
        return 
    xmlHttp;


    وبعد هم تابع $ و تابعی که وظیفه مرتب کردن و ارسال داده ها به سرور رو بر عهده داره در این قسمت اسم تابع رو sendToServer گذاشتیم

    کد PHP:
    function $(id){return document.getElementById(id)}



    function 
    sendToServer()

      
    xmlHttp=GetXmlHttpObject();
      if (
    xmlHttp==null)
      {
        
    alert ("Browser does not support HTTP Request");
        return;
      }

      
    url='add.php?name='+encodeURIComponent($('name').value)+'&family='+encodeURIComponent($('family').value)+'&code='+$('code').value;


      
    xmlHttp.open("GET",url,true);
      
    xmlHttp.onreadystatechange=stateChanged;
      
    xmlHttp.send(null);



    فکر نکنم تابع sendToServer احتیاج به توضیح داشته باشه مثل برنامه ها قبلی یه نمونه از شی می سازه وجود شی رو چک می کنه و یه متغییر که مجموع داده های ارسالیمون در اون اون قرار می گیرن و در انتها این داده ها رو برای سرور ارسال می کنیم .

    تا اینجا تمام کارها مثل دفعات قبل بود ولی در نتیجه برگشتی یک تفاوت هایی وجود داره
    کد PHP:
    function stateChanged() 

    if (
    xmlHttp.readyState==|| xmlHttp.readyState=="complete")
     { 
        if (
    xmlHttp.responseText=='1')    
        {    
            
    add($('name').value,$('family').value,$('code').value);
        }
        else{
            
    alert("Error in connect to server");
        
        }
        
      } 


    توسط تابع stateChanged نتیجه برگشتی از سرور رو برسی می کنیم .
    در سمت سرور در صورت ثبت درست اطلاعات در بانک مقدار یک رو بر گشت خواهیم داد و در اینجا در صورتی که مقدار برگشتی یک بود تابعی رو که برای اضافه کردن یک سطر به جدول رو ساختیم با همون مقادیر ارسالیمون فراخونی می کنیم و در غیر اینصورت یک پیام نمایش می دیم که نشان دهنده یک مشکل در اجرای مراحل کاریست که میشه چک های بیشتر دقیق ترش کرد .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۸ شهريور ۵ ۱۱:۳۳ صبح، توسط php.)
    ۱۳۸۸ تير ۲۹ ۰۵:۴۰ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : molana Maya farokh amir.s AloneStar2008 htarahi mostafanastary designer farhadfery mkmk yones_safari emrooz 3enator dijavoo bcmodir javafa aliphp1 yasaman0034 vahid83 آگرین
    « قدیمی تر | تازه‌ تر »

  • صفحه‌ها (6):
  • ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS