Ajax چیست؟ + نمونه کد

[ghazalme7]

ساخت برنامه های کاربردی تحت وب برای برنامه نویسان بسیار سرگرم کننده است. این برنامه های کاربردی به برنامه نویسان اجازه می دهد تا گرد یکدیگر جمع شوند و گره ای از مشکلات مشتریان خود باز کنند. گره ای که حتی ممکن بود خود مشتریان نیز از وجود آن اطلاعی نداشته باشند. مثلا اگر سیستم Blogger را در نظر بگیریم، قبل از اینکه این برنامه کاربردی ایجاد شود، خیلی ها حتی به وجود آن هم نیاز نداشتند. اما الان می بینند که بدون وجود آن کارشان بسیار دشوار است.

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

Ajax اینجاست تا وضعیت را تغییر دهد
Ajax و یا کامل تر Asynchronous JavaScript and XML نحوه ای از برنامه نویسی است تا شما را از شر گرفتن اطلاعات بوسیله رفتن به یک صفحه ی دیگر خلاص کند. وقتی کاربر یک فرم را تایید می کند، بعلت حجم کم انتقال اطلاعات، زمان بسیار کوتاهی طول می کشد تا نتیجه نمایش داده شود. آن هم بدون انتقال به صفحه ای دیگر! اگر باور کردنش برای شما مشکل است، سری به وب سایت Google Mapsبزنید و با حرکت در قسمت های مختلف نقشه، تغییرات آنی اطلاعات را مشاهده کنید. بدون اینکه صفحه Reload شود. این قدرت Ajax است.

Ajax چیست؟
در واقع Ajax تلفیقی است از:

استاندارد های XHTML و CSS
تعامل با صفحه بوسیله DOM
انتقال اطلاعات بوسیله XML و XSLT
بازیابی اطلاعات بطور غیرهمزمان بوسیله ی XMLHttpRequest
JavaScript تا همه ی این موارد را بهم وصل کند
در روش سنتی انتقال اطلاعات، انتقال اطلاعات بین کاربر و سرور بدین صورت انجام می گرفت:

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

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

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

Ajax یک تکنولوژی جدید نیست
Ajax راهی جدید برای نگاه کردن به یک تکنولوژی است که قبلا بصورت پخته و کامل وجود داشته است. اگر شما هم اکنون در حال نوشتن برنامه ای جدید هستید، چرا از Ajax استفاده نمی کنید؟ کاربران شما بسیار از شما ممنون خواهند شد. به علاوه اینکه نوشتن آن برای خود شما نیز بسیار جذاب خواهد بود.

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

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

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

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


نمونه کد ساده برای راه اندازی AJAX
کد زیر را در یک صفحه مثلا demo.html قرار دهید.

       
    <script language="Javascript">
    function postRequest(strURL) {
var xmlHttp;
          if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
    }else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlHttp.open('POST', strURL, true);
    xmlHttp.setRequestHeader
              ('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
      updatepage(xmlHttp.responseText);
      }
  }
xmlHttp.send(strURL);
        }
    function updatepage(str){
document.getElementById("result").innerHTML =
            "" + str + "";;
        }
  function SayHello(){
var usr=window.document.f1.username.value;
var rnd = Math.random();
var url="sayhello.php?id="+rnd +"&usr="+usr;
postRequest(url);
        }
  </script>
   

شما عضو این انجمن نبوده یا وارد نشده اید. لطفا برای مشاهده کامل انجمن و استفاده از آن وارد شوید یا ثبت نام کنید .

 

Simple Ajax Example

  Enter your name and then press
  "Say Hello Button"

     

Enter your name:
      on‌click='J‌avaScript:SayHello()' name="showdate">

     

   

سپس صفحه ای با نام sayhello.php بسازید و کد های زیر را در آن قرار دهید.

$usr=$_GET["usr"];
?>

Welcome !

Request received on:

print date("l M dS, Y, H:i:s");
?>
سپس صفحه demo.html را اجرا کنید و نتیجه را ببینید. به یاد داشته باشید که در این مثال، سرور شما باید توانایی تجزیه و تحلیل کدهای PHP  را داشته باشد. نمونه کد قابل اجرا را در اینجا ببینید (Demo).

آیا شما نیز از Ajax استفاده می کنید؟ تجربه شما در این زمینه چیست؟