تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

مقاله: آموزش کامل ای جکس برای اولین بار در وی بی ایران به صورت کاملا اختصاصی

    1. آموزش کامل ای جکس برای اولین بار در وی بی ایران به صورت کاملا اختصاصی »

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

      نگارش: , by (توسعه دهنده سایت)
      2013/01/14 01:47 AM
      امتیاز: 

      به نام خدا
      با عرض سلام خدمت تمام سروارن گرامی
      اِیْ‌جکس (AJAX؛ سرواژهٔ Asynchronous JavaScript And XML)، مجموعه‌ای از استانداردها و فناوری‌های وب است که به کمک آنها می‌توان برنامه‌هایی مبتنی بر وب تولید کرد که به آسانی با کاربران تعامل داشته باشند. با استفاده از این فناوریها و با کمک انتقال تکه‌های کوچک داده و اطلاعات از رایانهٔ خادم (Server)، صفحات وب از حالت منفعل خارج می‌شوند و واکنشهایی مناسب با رویدادها انجام می‌دهند. ای‌جکس معماری جدیدی برای برنامه‌های تحت وب است، که با سرعت بسیار زیادی در حال گسترش بوده، و کمتر کاربر اینترنت است که هنوز گذرش به یکی از صفحاتی که با این معماری ساخته شده‌اند نیفتاده، و از قابلیت‌های فوق‌العاده آن بهره‌مند نشده باشد. Gmail، Google Map، Google Suggest، Orkut، و اسامی آشنای دیگر، نمونه‌هایی هستند از کاربرد ای‌جکس. با استفاده از این معماری، صفحات وب تعامل بسیار خوبی با کاربران خواهند داشت. بعلاوه، مهم‌ترین مزیت این معماری این است که دیگر برای انجام هر کاری، لازم نیست صفحه وب دوباره بارگذاری شود. در این مقاله به بررسی تاریخچه، اصول، و شیوهٔ انجام کارها در این معماری خواهیم پرداخت.
      قصد کار با ای جکس تحت چهار چوب کاری جی کوئری تحت یک مثال کاربردی داریم.
      خب!یا علی!

      اول فرم رو ایجاد می کنیم:

      کد:
      <!DOCTYPE html>
      <html>
      <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      </head>
      <body>
      <form action="script.php" id="ajaxform">
        <input type="text" name="number" placeholder="enter number" />
        <input type="submit" value="go!" />
      </form>
      <!-- the result of the search will be rendered inside this div -->
      <div id="result"></div>
      
      
      </body>
      </html>
      فکر می کنم همه چیز مشخص باشه!

      بریم سراغ بخش اصلی آموزش:
      ارسال ها در ای جکس به دو دسته تقسیم می شوند یا توسط متد گت (get) یا توسط
      متد پست (post) درخواست ارسال می شود.
      ما ابتدا یک فایل php برای خود می نویسیم که عددی را که کاربر در فرم وارد می نمایید 8 برابر کرده و خروجی دهد.کد ما به شکل زیر خواهد بود:
      کد:
      <?php
      if(empty($_REQUEST['number'])) die('Enter number');
      if (!is_numeric($_REQUEST['number'])) die('Please enter numbers!');
      echo 'Our result is:'.$_REQUEST['number']*8;
      ?>
      خب اول چک کردیم که نامبر در متد request پر باشد.
      سپس چک کردیم که ورودی ما یک عدد باشد.
      و سپس در 8 ضرب شده و echo شده.
      توجه فرمایید که
      متدrequest در php ترکیب دو متد get و post می باشد.
      خب بریم سر قسمت شیرین ای جکس

      هر دو متد گت و پست رو بررسی می کنیم.
      اول پست:
      شکل کلی ارسال درخواست ای جکس به شکل زیر است:
      کد:
      $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: success,
        dataType: dataType
      });
      تایپ همان نوع ریکوئست است پست یا گت.
      یو آر ال آدرس صفحه ای است که باید اطلاعات به آن ارسال شود.
      دیتا اطلاعاتی است که باید ارسال شود.
      success فانکشنی است که باید پس از دریافت اطلاعات انجام شود.
      و دیتاتایپ نوع دیتا یی است که انتظار داریم از سرور بگیریم مثل xml,text,json,html,script,...
      خب حالا کار رو برای خودمون شروع می کنیم:
      از اسکریپت زیر استفاده می کنیم:
      کد:
      <script>
      /* attach a submit handler to the form */
      $("#ajaxform").submit(function(event) {
        $( "#result" ).empty().append( 'loading...');
        /* stop form from submitting normally */
        event.preventDefault();
       
        /* get some values from elements on the page: */
        var $form = $( this ),
           num = $form.find( 'input[name="number"]' ).val(),
            url = $form.attr( 'action' );
       
        /* Send the data using post and put the results in a div */
        $.post(url, { number: num }, function(data)  {
         $( "#result" ).empty().append( data );
      });
        return false;
      });
      </script>
      توحه:در جی کوئری به جای اینکه از ajax استفاده کرده و سپس تایپ را مشحص کرده می توانیم مستقیم از post یا get استفاده کنیم
      توضیح:ابتدا فانکشن رویداد submit دکمه submit فرم را تعریف کرده ایم سپس مقدار loading... را در #result ست کرده ایم سپس اکشن فرم و value اینپوت باکس را در دو متفیر ریخته ایم و سپس هم بخش ای جکس که توضیحش رو بالا دادم.
      بریم سر متد get:
      از اسکریپت زیر استفاده می کنیم:
      کد:
      <script>
      /* attach a submit handler to the form */
      $("#ajaxform").submit(function(event) {
        $( "#result" ).empty().append( 'loading...');
        /* stop form from submitting normally */
        event.preventDefault();
       
        /* get some values from elements on the page: */
        var $form = $( this ),
           num = $form.find( 'input[name="number"]' ).val(),
            url = $form.attr( 'action' );
       
        /* Send the data using get and put the results in a div */
        $.get(url, { number: num }, function(data)  {
         $( "#result" ).empty().append( data );
      });
        return false;
      });
      </script>

      دقیقا مثل هم هستن فقط به جای post می نویسیم get
      دموی آنلاین
      به همین راحتی
      تمام شد!
      سوالی بود در همین تاپیک پرسیده شود.
      فعلا

      ویرایش توسط MHAbedinpour : 2013/07/06 در ساعت 01:55 PM
  1. Top | #2


    ورژن ویبولتین
    4.2.2
    نوشته ها
    1,075
    میزان امتیاز
    219

    پیش فرض بخش دوم

    سلام
    خب بریم سر بخش دوم آموزش
    بعضی وقت ها لازم هست که یکی از قسمت های صفحه اتوماتیک رفرش شه برای این کار هم از ای جکس استفاده می کنیم.
    قسمت گرفتن اطلاعات از صفحه که در قسمت قبل توضیح داده شد برای این که هر (برای مثال هر7 ثانیه یک بار) رفرش شود از تابع
    setTimeout استفاده می کنیم.
    ابتدا یک فایل php به محتویات زیر برای خود ایجاد می کنیم:

    کد:
    <?php
    echo 'Time is:' .time();
    echo '<script language="JavaScript" type="text/javascript">  
    var count =7 ;
    function countDown(){  
     if (count <=0){  
     document.getElementById("result2").innerHTML = "بروز رسانی هم اکنون انجام می شود."   
     }else{  
      count--;  
      document.getElementById("result2").innerHTML = "بروز رسانی تا  "+count+" ثانیه دیگر انجام خواهد شد!"  
      setTimeout("countDown()", 1000)  
     }  
    }  
    countDown();
    </script>  ';
    ?>
    تفسیرش با خودتون
    و قسمت html و جاوا اسکریپت:

    کد:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    
    
    <div id="result"></div>
    <div id="result2"></div>
    <script>
    
    
     function refresh(){
      /* Send the data using post and put the results in a div */
      $.post('script2.php', function(data)  {
       $( "#result" ).empty().append( data );
    });
      setTimeout("refresh()", 7000)  
     }
    refresh();
    </script>
    </body>
    </html>
    که قسمت قبل توضیح کاملش رو دادیم
    دموی آنلاین این قسمت

  2. Top | #3
    کاربر مفید و فعال

    ورژن ویبولتین
    4.2
    نوشته ها
    716
    میزان امتیاز
    85

    پیش فرض

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

    کد:
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    کاربر مقابل از eRan94 بابت این پست مفید تشکر کرده است:


  3. Top | #4
    کاربر سایت

    ورژن ویبولتین
    5.0 , 4.2.1
    نوشته ها
    292
    میزان امتیاز
    38

    پیش فرض

    نقل قول نوشته اصلی توسط eRan94 نمایش پست ها
    محمد عزیز اگر ممکنه در مورد فایل زیر توضیح بدی ممنون میشم

    کد:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    این کد درواقع اسکریپت اخرین ورژن جی کوئری رو فراخوانی میکنه و بدون اون هیچکدوم از کدهای جی کوئری کار نمیکنن.

    کاربر مقابل از Thunder بابت این پست مفید تشکر کرده است:


  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    5.0 , 4.2.1
    نوشته ها
    292
    میزان امتیاز
    38

    پیش فرض

    منتظر بخش سوم هستیم محمد حسین عزیز

  5. Top | #6
    مدیر بازنشته

    ورژن ویبولتین
    4.2.0
    نوشته ها
    5,973
    میزان امتیاز
    720

    پیش فرض

    مرسی عالی

    2 تشکر توسط:


  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    3,348
    میزان امتیاز
    394

    پیش فرض

    خب ! فقط دو قسمت بود ؟

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. آموزش برچسب زدن خودکار بدون هک ( اختصاصی وی بی ایران )
    توسط Dastyar در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 79
    آخرين نوشته: 2015/07/22, 04:22 PM
  3. پاسخ: 0
    آخرين نوشته: 2012/10/14, 05:49 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/10/13, 10:39 PM
  5. پاسخ: 4
    آخرين نوشته: 2012/05/18, 09:17 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •