تکنیک AJAX در طراحی سایت

یکی از تکنیک های مطرح در عرصه تولید و طراحی صفحات وب تکنیک AJAX میباشد که روشی برای تبادل اطلاعات با سرور است البته بدون نیاز به refresh صفحه که این مزیت , AJAX را منحصر به فرد کرده. در ادامه بیشتر با AJAX در طراحی سایت آشنا خواهیم شد.

تکنیک AJAX در طراحی سایت

تکنیک Ajax یا Asynchronous JavaScript XML برای ایجاد رابطه ای سریع تر و بهتر بین برنامه های تحت وب با XML , HTML , CSS  و جاوا اسکریپت. به عبارت ساده ترAjax  این قابلیت را به کاربر میدهد که بخشی از صفحات وب را بدون refresh کردن و بارگزاری مجدد بروز رسانی کند که این خود مزیت بزرگی است.

Ajax بر مبناهای زیر کار میکند:

• نمایش در Ajax بر عهده HTML و CSS است
• اطلاعات در فرمت XML ذخیره شده و از سرور واکشی میشود
• در پشت صحنه داده ها با استفاده از XMLHttpRequest واکشی میشوند
• از جاوا اسکریپت برای هر رخدادی استفاده مشود

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

این ویژگی Ajax یک مزیت بزرگ محسوب میشود چون معمولا بارگزاری ها برای کاربر خسته کننده است و باعث میشود بازدید از سایت بخاطر سرعت پایین کم شود.

در ادامه برخی از متدهای XMLHttpRequest را شرح میدهیم

• ()New XMLHttpRequest : شی جدیدی از XMLHttpRequest ایجاد خواهد کرد
• ()Abourt: درخواست فعلی را لغو میکند
• ()getAllResponseHeaders : اطلاعات بخش header را بر میگرداند
• (open(method,url,async,user,psw: یک درخواست را با پارامترهای مشخص ایجاد میکند. پارامترها به شرح زیر است

1. method : نوع درخواست که میتواند GET یا POST باشد
2. url : محل ذخیره سازی فایل مدنظر
3. Async : مشخص کردن همگام یا ناهمگام بودن (true , false)
4. User : username که حالت اختیاری دارد
5. Psw : password که حالت اختیاری دارد

• ()Send : ارسال درخواست ها به سرور و قابل استفاده برای درخواست های GET
• (Send(string :ارسال درخواست ها به سرور و قابل استفاده برای درخواست های POST

مثالی از Ajax

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

document.getElementById("div1").innerHTML =

this.responseText;

};

xhttp.open("GET", "ajaxData.txt", true);

xhttp.send();

}

</script>