با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم . در این جلسه به نحوه ارسال درخواست به سرور در AJAX به شیوه درخواست با GET یا درخواست با POST می پردازیم تا پایان این جلسه با ما همراه باشید.
از شی XMLHttpRequest برای تبادل داده ها با یک سرور Server استفاده می شود.
ارسال درخواست به سرور
ار متد های ()open و ()send شی XMLHttpRequest برای ارسال درخواست به یک سرور استفاده می شود:
مثال :
| xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); |
هر یک از این متد ها در جلسه آموزش شی XHR توضیح داده شده اند.
GET یا POST
GET ساده تر و سریع تر از POST هست و می تواند در خیلی از موارد استفاده شود.
به هرحال در موارد زیر همیشه از POST استفاده کنید:
- بروز رسانی یک فایل یا پایگاه داده در سرور
- ارسال مقادیر بزرگی از اطلاعات به سرور (POST هیچ محدودیت اندازه ای ندارد)
- ارسال ورودی های کاربر، POST قدرتمند تر و امن تر از GET هست
درخواست با GET
یک ارسال درخواست ساده با GET به صورت زیر می باشد:
مثال : درخواست با متد get
| xhttp.open("GET", "demo_get.asp", true); xhttp.send(); |
در مثال بالا شما ممکن است یک مقدار کش شده را دریافت کنید.
برای جلوگیری از این کار، یک id منحصر به فرد به URL اضافه کنید:
مثال : استفاده از ID منحصر به فرد
| xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true); xhttp.send(); |
اگر می خواهید اطلاعات یا کوئری هایی را با GET ارسال کنید، آن ها را به URL اضافه کنید:
مثال : فرستادن اطلاعات با متد GET
| xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true); xhttp.send(); |
درخواست با POST
یک ارسال درخواست ساده با POST به صورت زیر می باشد:
مثال : درخواست با متد post
| xhttp.open("POST", "demo_post.asp", true); xhttp.send(); |
برای داده های POST مانند فرم HTML، هدر HTTP با ()setRequestHeader را اضافه کنید.
اطلاعاتی را که می خواهید در متد ()send ارسال کنید را مشخص کنید:
مثال : خصوصیت setRequestHeader
| xhttp.open("POST", "ajax_test.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford"); |
| متد | توضیحات |
|---|
| setRequestHeader(header, value) | هدرهای HTTP را به درخواست اضافه می کند. header: نام هدر را مشخص می کند.
value: مقدار هدر را مشخص می کند. |
URL
پارامتر url متد open، آدرس یک فایل در سرور می باشد.
مثال :
| xhttp.open("GET", "ajax_test.asp", true); |
فایل می تواند از هر نوعی باشد. مانند txt. xml. یا اسکریپت های سرور مانند asp. php. (که اعمالی را روی سرور اقبل از ارسال پاسخ انجام می دهند.)
Asynchronous
در خواست های سرور باید به صورت Asynchronous (غیر همزمان) باشد.
پارامتر async متد ()open باید به درستی تنظیم شود:
مثال :
| xhttp.open("GET", "ajax_test.asp", true); |
با این روش، جاوا اسکریپت لازم نیست تا منتظر پاسخ سرور بماند و در عوض می تواند کار های زیر را انجام دهد:
- اسکریپت های دیگر را هنگام منتظر بودن برای پاسخ سرور اجرا کند
- با واکنش پس از پاسخ آماده شوید.
خاصیت onreadystatechange
با شی XHR شما می توانید تابعی برای اجرا در هنگام دریافت پاسخ از سرور تعریف کنید.
این تابع در خاصیت onreadystatechange تعریف می شود:
مثال : خصوصیت onreadystatechange
| xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); |
درخواست همگام
برای اجرای یک درخواست همزمان، پارامتر سوم در متد ()open را به false تغییر دهید:
مثال :
| xhttp.open("GET", "ajax_info.txt", false); |
گاهی اوقات async = false برای تست سریع استفاده می شود. شما همچنین درخواست های همزمان را در کد جاوا اسکریپت قدیمی پیدا خواهید کرد.
از آنجا که کد برای تکمیل سرور منتظر است، نیازی به یک تابع onreadystatechange وجود ندارد:
مثال : درخواست همگام
| xhttp.open("GET", "ajax_info.txt", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText; |
جلسه ارسال درخواست به سرور در AJAX نیز به پایان رسید.
در جلسه بعد به آموزش دریافت پاسخ از سرور در Ajax خواهیم پرداخت.با ما همراه باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
