Ajax در جاوا اسکریپت

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

Ajax چیست؟

Ajax مخفف Asynchronous Javascript And Xml است.Ajax فقط وسیله ای برای بارگذاری داده ها از سرور و به روز رسانی  بخش هایی از یک صفحه وب بدون بارگیری مجدد کل صفحه است.

اساسا، کاری که Ajax انجام می دهد. استفاده از شی XMLHttpRequest (XHR) داخلی مرورگر برای ارسال و دریافت اطلاعات به  یک وب سرور به صورت ناهمزمانمی باشد. که در پس زمینه، بدون مسدود کردن صفحه یا تداخل با تجربه کاربر صورت میگیرد.

Ajax به قدری محبوب شده است که به سختی برنامه ای را پیدا می کنید که  از Ajax استفاده نکند هر چند کم.نمونه‌ای از برخی از برنامه‌های آنلاین در مقیاس بزرگ که توسط Ajax هدایت می‌شوند عبارتند از: Gmail، Google Maps، Google Docs، YouTube، Facebook، Flickr و بسیاری از برنامه‌های کاربردی دیگر.

توجه: Ajax یک فناوری جدید نیست، در واقع، Ajax حتی واقعاً یک فناوری نیست. Ajax فقط یک اصطلاح برای توصیف فرآیند تبادل داده ها از یک وب سرور به صورت ناهمزمان از طریق جاوا اسکریپت، بدون ترفرش کردن دوباره صفحه است.

نکته: عبارت X (یعنی XML) در AJAX اشتباه نگیرید. فقط  دلایل تاریخی وجود دارد. سایر فرمت های تبادل داده مانند JSON، HTML یا متن ساده را می توان به جای XML استفاده کرد.

آشنایی با نحوه عملکرد Ajax (ایجکس)

برای انجام ارتباط Ajax، جاوا اسکریپت از یک شیء ویژه تعبیه شده در مرورگر استفاده می کند.  یک شی XMLHttpRequest (XHR)  برای ایجاد درخواست های HTTP به سرور و دریافت داده ها در پاسخ.

همه مرورگرهای مدرن (Chrome، Firefox، IE7+، Safari، Opera) از شی XMLHttpRequest پشتیبانی می کنند.

تصاویر زیر نحوه عملکرد ارتباط Ajax را نشان می دهد:

Ajax در جاوا اسکریپت

نحوه عملکرد  Ajax

از آنجایی که درخواست‌های Ajax معمولا ناهمزمان هستند، اجرای اسکریپت به محض ارسال درخواست Ajax ادامه می‌یابد، یعنی مرورگر اجرای اسکریپت را متوقف نمی‌کند تا زمانی که پاسخ سرور بازگردد.

در بخش زیر به تک تک مراحل مربوط به این فرآیند را مورد بحث قرار خواهیم داد:

ارسال درخواست و بازیابی پاسخ

قبل از اینکه ارتباط Ajax بین کلاینت و سرور را انجام دهید، اولین کاری که باید انجام دهید این است که یک شی XMLHttpRequest را تعریف کنید، همانطور که در زیر نشان داده شده است:

اکنون، مرحله بعدی در ارسال درخواست به سرور، نمونه سازی شی درخواست جدید ایجاد شده با استفاده از متد ()open شی XMLHttpRequest است.

متد ()open معمولاً دو پارامتر را می پذیرد – روش درخواست HTTP برای استفاده، مانند “GET”، “POST” و …، و URL برای ارسال درخواست، مانند این:

نکته: فایل می‌تواند از هر نوع باشد، مانند txt یا xml. یا فایل‌های اسکریپتی سمت سرور، مانند .php یا asp. که می‌تواند برخی از اقدامات را در سرور انجام دهند (مثلاً درج یا خواندن داده‌ها از پایگاه داده) قبل از ارسال پاسخ به مشتری.

و در نهایت با استفاده از متد ()send شی XMLHttpRequest درخواست را به سرور ارسال کنید.

نکته: متد ()send یک پارامتر body اختیاری را می پذیرد که به ما امکان می دهد بدنه درخواست را مشخص کنیم. این در درجه اول برای درخواست‌های HTTP POST استفاده می‌شود، از انجا که درخواست HTTP GET بدنه درخواستی ندارد، فقط درخواست هدر ها  میباشد.

متدGET معمولاً برای ارسال مقدار کمی داده به سرور استفاده می شود. در حالی که از متدPOST برای ارسال حجم زیادی از داده ها مانند داده های فرم استفاده می شود.

برای  متد GET داده ها به عنوان پارامتر URL ارسال می شوند.اما در روش POST داده ها به عنوان بخشی از بدنه درخواست HTTP به سرور ارسال می شود.داده های ارسال شده از طریق روش POST در URL قابل مشاهده نخواهد بود.

در بخش بعدی Ajax در جاوا اسکریپت  نگاهی دقیق تر به نحوه عملکرد درخواست های Ajax خواهیم داشت.

اجرای درخواست Ajax GET

درخواست GET معمولاً برای دریافت یا بازیابی نوعی از اطلاعات از سرور استفاده می شود که نیازی به دستکاری یا تغییر در پایگاه داده ندارد، به عنوان مثال، واکشی نتایج جستجو بر اساس یک عبارت، واکشی جزئیات کاربر بر اساس شناسه یا نام آنها، و … .

مثال زیر نحوه ایجاد درخواست Ajax GET در جاوا اسکریپت را به شما نشان می دهد.

هنگامی که درخواست ناهمزمان است، متد ()send بلافاصله پس از ارسال درخواست باز می گردد.بنابراین، قبل از پردازش آن با استفاده از پراپرتی readyState شی XMLHttpRequest، باید بررسی کنید که پاسخ در حال حاضر در چرخه حیات خود کجا قرار دارد.
ReadState یک عدد صحیح است که وضعیت درخواست HTTP را مشخص می کند. همچنین، تابع اختصاص داده شده به کنترل کننده رویداد onreadystatechange هر بار که پراپرتی readyState تغییر می کند، فراخوانی می شود.مقادیر احتمالی پراپرتی readyState در زیر خلاصه شده است.

Ajax در جاوا اسکریپت

توجه: از نظر تئوری، رویداد readystatechange باید هر بار که ویژگی readyState تغییر می‌کند فعال شود.اما، اکثر مرورگرها وقتی ReadState به 0 یا 1 تغییر می کند، این رویداد را فعال نمی کنند. با این حال، همه مرورگرها این رویداد را هنگامی که readyState به 4 تغییر می دهد، فعال می کنند.

پراپرتی status کد عددی وضعیت HTTP پاسخ XMLHttpRequest را برمی گرداند. برخی از کدهای رایج وضعیت HTTP در زیر فهرست شده اند:

  • 200 — OK : سرور با موفقیت این درخواست را پردازش کرد.
  • 404 — Not Found : سرور نمی تواند صفحه درخواستی را پیدا کند.
  • 503 — Service Unavailable: سرور به طور موقت در دسترس نیست.

در اینجا کدی از فایل “greet.php” ما آمده است که به سادگی نام کامل یک شخص را با پیوستن نام و نام خانوادگی آنها ایجاد می کند و یک پیام تبریک ارسال می کند.

انجام درخواست Ajax POST

متد POST عمدتاً برای ارسال داده های فرم به وب سرور استفاده می شود.

مثال زیر به شما نشان می دهد که چگونه داده های فرم را با استفاده از Ajax به سرور ارسال کنید.

اگر از شی FormData برای ارسال داده‌های فرم استفاده نمی‌کنید، برای مثال، اگر داده‌های فرم را در قالب رشته query به سرور ارسال می‌کنید، به عنوان مثال: request.send(key1=value1&key2=value2) باید به طور صریح هدر درخواست را با استفاده از متد ()setRequestHeader تنظیم کنید. مثل:

متد ()setRequestHeader باید بعد از ()open، اما قبل از ()send فراخوانی شود.
برخی از هدرهای درخواست عبارتند از:

application/x-www-form-urlencoded,    multipart/form-data ,    application/jsonapplication/xmltext/plaintext/html,

توجه: شی FormData یک راه آسان برای ساخت مجموعه ای از جفت های کلید/مقدار ارائه می دهد که نشان دهنده فیلدهای فرم و مقادیر آنها هستند که می توانند با استفاده از متد () XMLHttpRequest.send ارسال شوند.اگر نوع رمزگذاری فرم روی multipart/form-data تنظیم شده باشد، داده های ارسالی در همان قالبی است که متد ()subform برای ارسال داده ها استفاده می کند.

در اینجا کد فایل “confirmation.php” ما است که به سادگی مقادیر ارسال شده توسط کاربر را خروجی می دهد.

به دلایل امنیتی، مرورگرها به شما اجازه نمی دهند که درخواست های بین دامنه ای آژاکس داشته باشید.این بدان معنی است که شما فقط می توانید از همان دامنه صفحه اصلی درخواست های Ajax را به آدرس های اینترنتی ارسال کنید، به عنوان مثال، اگر برنامه شما در دامنه “mysite.com” اجرا می شود، نمی توانید درخواست Ajax را به “othersite.com” یا هر سایت دیگری ارسال کنید.این معمولاً به عنوان همان سیاست مبدا شناخته می شود.

با این حال، می توانید تصاویر، شیوه نامه ها، فایل های JS و سایر منابع را از هر دامنه بارگیری کنید.

نکته: روش های jQuery Ajax را برای اجرای سریع و بدون درز Ajax بررسی کنید. چارچوب jQuery روش های بسیار مناسبی را برای پیاده سازی عملکرد Ajax ارائه می دهد.

خب دوستان گرامی به پایان جلسه مبحث Ajax در جاوا اسکریپت رسیدیم.با ارزوی موفقیت برای یکایک دوستان عزیز و گرامی.

 

سایر مقالات:

کوکی ها در جاوا اسکریپت

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

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *