اطلاعات کامل درمورد Ajax

Ajax (Asynchronous JavaScript and XML) یک تکنولوژی وب است که به صورت نامتقارن اطلاعات را بین مرورگر و سرور انتقال می دهد، بدون اینکه صفحه وب را بارگزاری مجدد کند. به عبارت دیگر، با استفاده از Ajax، می توان با ارسال درخواست های اضافی به سرور، اطلاعات را بدون تغییر صفحه به روز رسانی کرد.

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

برای استفاده از Ajax، ابتدا باید یک شیء XMLHttpRequest در جاوااسکریپت ایجاد شود. سپس با استفاده از این شیء، درخواست های اطلاعاتی به سرور ارسال می شود و پاسخ آنها دریافت می شود. سپس با استفاده از جاوا اسکریپت و DOM (Document Object Model)، این پاسخ ها در صفحه وب نمایش داده می شود.

از آنجایی که Ajax به صورت نامتقارن عمل می کند، برنامه های وب کارایی بیشتری دارند و به صورت کلی تجربه کاربری بهتری را برای کاربران فراهم می کنند.

پیاده سازی Ajax

روش پیاده سازی با Ajax در وب سایت ها به شکل زیر است:

1. ایجاد یک شیء XMLHttpRequest در جاوا اسکریپت:

var xhttp = new XMLHttpRequest()

2. تعریف یک تابع برای پردازش پاسخ از سمت سرور:

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// پاسخ به درخواست دریافت شده از سرور
}
};

3. ارسال درخواست به سرور با استفاده از شیء XMLHttpRequest:

xhttp.open(“GET”, “example.php”, true);
xhttp.send();

در این مثال، درخواست GET به فایل example.php ارسال می شود.

4. پردازش پاسخ از سمت سرور:

در تابع onreadystatechange که در مرحله دوم تعریف شده است، می توانید پاسخ دریافتی از سرور را پردازش کنید. برای مثال، می توانید اطلاعات دریافتی را به صفحه HTML اضافه کنید:

document.getElementById(“demo”).innerHTML = this.responseText;

در این مثال، محتوای دریافتی از سرور در المان با شناسه “demo” در صفحه HTML قرار می گیرد.

5. ارسال درخواست با پارامترها:

برای ارسال درخواست با پارامترها، می توانید از روش GET یا POST استفاده کنید و پارامترها را در URL یا بدنه درخواست (Body) قرار دهید. برای مثال:

xhttp.open(“POST”, “example.php”, true);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“name=John&age=30”);

در این مثال، درخواست POST با دو پارامتر name و age ارسال می شود.

6. استفاده از jQuery برای پیاده سازی با Ajax:

اگر می خواهید با Ajax کار کنید، می توانید از کتابخانه jQuery استفاده کنید که توابع زیادی برای پیاده سازی Ajax در اختیار شما قرار می دهد. به عنوان مثال:

$.ajax({
url: “example.php”,
data: {name: “John”, age: 30},
type: “POST”,
success: function(response) {
// پاسخ به درخواست دریافت شده از سرور
}
});

در این مثال، درخواست POST با دو پارامتر name و age به فایل example.php ارسال می شود. همچنین، پاسخ دریافتی از سرور در تابع success پردازش می شود.