هر آنچه باید درباره جاوا اسکریپت AJAX بدانید

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

مرد از جاوا اسکریپت آژاکس در کد استفاده می کند

خوب، شما می توانید از فناوری هایی مانند AJAX برای جلوگیری از چنین تجربه دست و پا گیر در زندگی روزمره شما در اینترنت تشکر کنید.

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

AJAX در جاوا اسکریپت چیست؟

AJAX مخفف Asynchronous Javascript And XML است. همانطور که قبلا ذکر شد، شما را قادر می سازد تا داده ها را از یک سرور ارسال یا دریافت کنید و اطلاعات یک صفحه را بدون نیاز به بارگذاری مجدد به روز کنید. ناهمزمان در این زمینه به معنای امکان به روز رسانی اطلاعات در تاریخ بعدی است. شما قبلاً به این عادت کرده اید، با توجه به اینکه بسیاری از موارد در اینترنت ناهمزمان هستند، مانند پیام رسان های چت یا ایمیل.

یک شی به نام XMLHttpRequest (یا به اختصار فقط “XHR”) برای انجام همه اینها استفاده می شود. با وجود نامش، با هر نوع داده ای می توان کار کرد، نه فقط XML. این شامل مواردی مانند JSON، HTML و فایل های متنی نیز می شود.

برای استفاده از قدرت AJAX، باید یک درخواست HTTP داشته باشید و سپس پاسخ سرور را مدیریت کنید. اگر همه چیز موفقیت آمیز بود، می توانید محتوا را بر اساس پاسخ به روز کنید.

نحوه استفاده از AJAX در جاوا اسکریپت

قبلاً گفتم برای استفاده از AJAX باید درخواست HTTP بدهید. خوب، برای ایجاد یک درخواست HTTP، ابتدا باید یک شی XMLHttpRequest ایجاد کنید. تفاوتی با ساختن یک نمونه از هر شیء دیگر در جاوا اسکریپت ندارد. برای مثال و نحو برای انجام این کار به زیر مراجعه کنید.

> const xhr = new XMLHttpRequest(); // متغیر Name = new XMLHttpRequest();

پس از آن، باید تابعی را تعریف کنید که دیکته می کند پس از آماده شدن پاسخ سرور چه اتفاقی بیفتد. سپس این تابع را می توان با تنظیم ویژگی onreadystatechange شی XHR به نام تابع مورد استفاده مشخص کرد .

> تابع handleResponse() {

// کدم برای اینکه بعد از دریافت پاسخ چه کاری انجام دهیم به اینجا می رود

}

Xhr.onereadystatechange = handleResponse;

البته، برای دریافت واقعی پاسخ، ابتدا باید درخواست کنید. برای انجام این کار، از متدهای open() و send() شی XHR استفاده خواهد شد و ممکن است چیزی شبیه به شکل زیر باشد.

> xhr.open(“GET”، ” https://www.somewebsite.com/file.txt “، true)؛

xhr.send();

همانطور که متوجه شده اید، سه پارامتر در متد open() وجود دارد. اولی روش درخواست HTTP است. در اینجا می توانید از روش هایی غیر از یک GET ساده استفاده کنید، مانند POST، که به جای دریافت، داده ها را ارسال می کند. فقط روش را کاملاً با حروف بزرگ نگه دارید زیرا این استاندارد است.

پارامتر دوم آدرس اینترنتی است که درخواست را به آن ارسال می کنید. به طور پیش فرض، نمی توانید URL های شخص ثالث را فراخوانی کنید. در صورت نیاز می توان این مورد را از طریق CORS تغییر داد.

پارامتر سوم اختیاری است اما به سادگی می گوید که آیا درخواست ناهمزمان است یا نه و به طور پیش فرض روی true است. معمولاً توصیه می شود که پارامتر سوم را روی “true” بگذارید زیرا تلاش برای داشتن یک درخواست همزمان به جای درخواست ناهمزمان می تواند منجر به رفتار غیرمنتظره و تجربه کاربری ضعیف شود.

باشه عالیه! این بخش درخواست HTTP را پوشش می دهد، اما اکنون باید به عملکرد قبلی برگردید و نحوه رسیدگی به پاسخ را تعریف کنید. برای انجام این کار، باید بدانید که چه نوع پاسخ هایی را می توانید دریافت کنید. در مثال قبلی، من این تابع را به سادگی () handleResponse نامیدم.

برای اینکه بدانید درخواست با موفقیت دریافت شده است، باید وضعیت درخواست را بررسی کنید و ببینید آیا انجام شده است یا خیر. برای نحوه انجام این کار کد زیر را بررسی کنید.

> if (xhr.readyState === XMLHttpRequest.DONE) {

//درخواست به پایان رسید و پاسخی که با موفقیت دریافت شد

}دیگر {

//پاسخ آماده نیست یا مقداردهی اولیه نشده است

}

اگر آماده‌ی حالت انجام شود، می‌توانیم به مرحله بعدی بررسی کدهای وضعیت HTTP پاسخ HTTP برویم. اگر کد وضعیت 200 است، می‌توانید ادامه دهید. اگر چیز دیگری باشد، ممکن است نشان دهنده مشکل در درخواست یا حتی مشکل با سرور داخلی باشد.

> if (xhr.status === 200) {

// همه چیز خوب است!

}دیگر {

// در درخواست مشکل داشت یا حتی سرور داخلی مشکل داشت، خوب نیست!

}

در نهایت، هنگامی که همه چیز خوب است، می توانید از داده هایی که سرور ارسال کرده است استفاده کنید. شما همچنین دو انتخاب برای دسترسی به آن دارید، یا به عنوان رشته ای از متن با استفاده از متد xhr.responseText() یا متد xhr.responseXML() که پاسخ را به عنوان یک شی XMLDocument برمی گرداند.

جاوا اسکریپت آژاکس مثال

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

همچنین توجه داشته باشید که فایل “test.html” در همان دایرکتوری قرار دارد. چه درخواست JSON، XML، یا هر چیز دیگری داشته باشید، برای دسترسی به آن باید در همان دایرکتوری باشد.

خب، اینجا چه خبر است؟ برای شروع، یک دکمه در صفحه داریم (و هیچ چیز دیگری) که به سادگی xhrButton نامیده می شود.

به آن دکمه، شنونده رویدادی وجود دارد که می‌گوید: «وقتی روی من کلیک شد، تابع requestData() را اجرا کنید.»

سپس این تابع یک شی XHR جدید را ایجاد می کند و درخواست GET را با درخواست فایل test.html ارسال می کند و اجرا به تابع ()alertContents ارسال می شود.

در نهایت، تابع alertContents پاسخ OK را بررسی می کند و متن پاسخ را برمی گرداند. این در این مثال در تابع ()alert قرار داده شده است.

و بس! از آنجایی که فایل “test.html” در این مثال درخواست شده است، محتویات “test.html” همان چیزی است که در تابع alert() پرتاب می شود که در زیر نشان داده شده است.

همچنین لازم به ذکر است که اگر این کد را از سیستم فایل محلی خود اجرا کنید، ممکن است با خطای سیاست CORS مانند این مواجه شوید.

اگر این اتفاق برای شما افتاد، نگران نباشید! راه حل این است که همه اینها را روی یک وب سرور میزبانی کنید. هنوز هم می توان به صورت محلی با استفاده از کد VS یا روش های دیگر راه اندازی کرد. برای راهنمایی بیشتر در مورد آن مشکل خاص، این ویدیو را بررسی کنید .

شروع شدن

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