آموزش ajax در جاوا اسکریپت (مزایا و نحوه کار)

AJAX مخفف عبارت Asynchronous JavaScript And Xml به معنای جاوا اسکریپت و xml‌ غیرهمزمان است. AJAX (ایجکس) بهترین راه حل برای زمانی است که بخواهید صفحات وب را به طور ناهمزمان با تبادل داده ها به/از سرور به روز رسانی کنید. به معنای ساده تر یعنی بدون بارگیری مجدد کامل صفحه بتوانیم بخش هایی از آن را به صورت پویا و ناهمزمان بدون ارسال درخواست به سرور به روزرسانی کنیم. AJAX ترکیبی از شی XMLHttpRequest، جاوا اسکریپت و HTML DOM است.

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

دانلود رایگان آموزش صفر تا صد جی کوئری (فیلم+PDF)

با AJAX می توانیم برنامه های وب خود را به صورت ناهمزمان تا حدی به روزرسانی کنیم. وقتی تعاملات Ajax کامل شود، جاوا اسکریپت کدهای منبع HTML صفحه را به روزرسانی می کند. تغییرات بلافاصله بدون نیاز به رفرش صفحه اعمال می شوند. می توانید از تعاملات Ajax برای تأیید ورودی های فرم در زمان ورود داده ها توسط کاربر (با استفاده از قانون و منطق سمت سرور) استفاده کنید تا داده ها از سرور دریافت شده و صفحه به صورت پویا به روزرسانی شود.

AJAX چیست و چگونه کار می کند؟

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

نحوه کار AJAX

• کاربر یک رویداد را روی صفحه وب فعال می کند، مانند کلیک روی یک باتن.
• HTTPRequest (درخواست HTML) با استفاده از شی XMLHTTPRequest به سرور ارسال می شود. این شی با پارامتر درخواست روی شبکه پیکربندی شده است.
• XMLHTTPRequest یک درخواست ناهمزمان به سرور ایجاد می کند.
• در سمت سرو یک شی سرولت (servlet) یا یک شنونده (listener) رویداد، درخواست دریافت شده از سمت کاربر مانند داده های بازیابی شده از پایگاه داده را کنترل می کند. پاسخ با داده های درخواستی در قالب سند XML ساخته می شود.
• با استفاده از تابع برگشتی، شی XMLHTTPRequest داده ها را دریافت می کند، آنها را پردازش کرده و HTML DOM را به روزرسانی می کند تا صفحه با داده های جدید درخواست شده توسط کاربر نمایش داده شود.

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

• جاوا اسکریپت (JavaScript): با فعال شدن یک رویداد، تابع جاوا اسکریپت فراخوانی می شود. تعاملات Ajax با کدهای جاوا اسکریپت آغاز می شود و پس از کامل شدن تعاملات آن، جاوا اسکریپت کدهای منبع HTML صفحه را به روزرسانی می کند.
• دام (DOM): مخفف Document Object Model است و برای نمایش ساختار اسناد XML و HTML استفاده می شود.
• CSS (سی اس اس): برای سبک دهی نمایش محتوای صفحه استفاده می شود. آموزش کامل و رایگان سی اس اس
• XMLHTTPRequest: برای انجام تعامل ناهمگام از کاربر به سرور با استفاده از شی جاوا اسکریپت به کار می رود.

مزایای AJAX

• با استفاده از AJAX نیازی به ارسال فرم برای اعتبار سنجی نیست. AJAX امکان اعتبارسنجی فرم را به طور همزمان هنگام ورود داده ها توسط کاربر فراهم می کند.
• AJAX از بارگیری مجدد کل صفحه جلوگیری می کند زیرا فقط بخشی از صفحه وب را به روزرسانی می کند.
• AJAX براساس استانداردهای باز مانند HTML و CSS برای ارائه صفحه وب است. داده ها در XML واکشی شده از سرور ارسال، بازیابی و ذخیره می شوند.
• واکشی داده ها با استفاده از شی XMLHttpRequest انجام می گیرد.

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

• ساخت نمونه XMLHTTPRequest با:

 var req = new XMLHTTPRequest();

• ارسال درخواست به سرور با استفاده از تابع ()open:

فایل می تواند هم .txt و هم .xlm باشد

req.open(“GET”,”test.txt”);
req.open(“POST”, add-emp.php);

• متد GET معمولاً برای ارسال مقدار داده کم به سرور استفاده می شود. با متد POST داده ها به عنوان بخشی از متن درخواست HTTP ارسال می شوند. در GET داده ها به عنوان پارامتر URL ارسال می شوند و در آدرس مرورگر قابل مشاهده هستند در حالی که در POST داده ها را نمی توان مشاهده کرد.
• استفاده از تابع ()send شی ;()XMLHTTPRequest برای ارسال درخواست به سرور:

req.send();

پارامتر های تابع ()send اختیاری است که با آنها می توان بدنه درخواست را تعیین کرد.

Ajax GET و ارسال درخواست

از GET معمولاً برای بازیابی اطلاعات از سرور استفاده می شود. send() بلافاصله درخواست ناهمزمان را برمی گرداند. به همین دلیل قبل از پردازش بیشتر روی پاسخ باید بررسی کنیم که پاسخ در کجای چرخه حیات خودش وجود دارد. از ویژگی readyState شی XMLHTTPRequest استفاده می شود.

ویژگی readyState به راحتی با یک عدد صحیح هنگامی فراخوانی تابع onreadystatechange با تغییر readyState، وضعیت درخواست HTTP را توصیف می کند. مقادیر readyState:

• مقدار 0 برای حالت UNSENT یا فرستاده نشده، درخواست هنوز شروع نشده است.
• مقدار 1 برای حالت OPENED یا باز شده، تابع ()open اتصال سرور را با موفقیت برقرار کرده تا درخواست عملی شود.
• مقدار 2 برای حالت HEADER_RECEIVED یا هدر دریافت شده، سرور با موفقیت درخواست را دریافت کرده است.
• مقدار 3 برای حالت LOADING یا در حال پردازش، پردازش درخواست در حال انجام است.
• مقدار 4 برای حالت DONE یا انجام شده، پردازش درخواست کامل شده و پاسخ در سرور آماده است.

رویداد readstatechange هنگام تغییر ویژگی readyState فعال می شود.

کد وضعیت HTTP وضعیت پاسخ XMLHTTPRequest را برمی گرداند، معمولاً از کد وضعیت استفاده می شود.

200– سرور درخواست را با موفقیت پردازش کرد.

404– سرور نمی تواند صفحه درخواستی را پیدا کند.

503– سرور به طور موقت در دسترس نیست.

از متد POST برای ارسال داده های فرم به سرور استفاده می شود. داده های فرم را می توان با استفاده از شی FormData یا با استفاده از یک رشته پرس و جو مثل

req.send(key=value1&key=value2&..&keyN=valueN)

ارسال کرد.

در ارسال داده ها با یک رشته پرس و جو (query) باید به طور صریح هدر (header) درخواست را با استفاده از ()setRequestHeader تنظیم کنیم.

Req.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

()setrequestHeader بعد از فراخوانی ()open و قبل از ()send فراخوانی می شود.

معمولا از هدرهای درخواست در ()setRequestHeader استفاده می شود.

txt/html, text/plain, application/xml, application/json.

با کمک داده های فرم می توانیم به راحتی با استفاده از ()XMLHTTPRequest.send مجموعه ای از جفت های کلید – مقدار برای نمایش فیلدهای فرم و مقادیر آنها بسازیم.

آموزش صفر تا صد برنامه نویسی جاوا اسکریپت (فیلم فارسی+ جزوه pdf)

اکشن های AJAX

موارد زیر لیستی از اکشن های رخ داده در AJAX می باشند:

• کاربر یک رویداد را فعال می کند، یک تابع جاوا اسکریپت فراخوانی شده و شی XMLHTTPRequest ایجاد و پیکربندی می شود.
• تماس ناهمزمان توسط XMLHHTPRequest با سرور برقرار می شود، سرور پاسخ را در قالب XML برمی گرداند.
• پاسخ با استفاده از فراخوانی تابع ()callback شی XMLHTTPRequest پردازش می شود و DOM به روزرسانی خواهد شد.

امنیت سمت کاربر در AJAX

• از ساخت XML یا JSON به صورت پویا خودداری کنید، برای امنیت XML و JSON از یک کتابخانه امن برای حفظ امنیت ویژگی ها و عناصر داده استفاده کنید.
• همیشه داده هایی که نیاز به رمزگذاری دارند را با استفاده از TLS / SSL در سمت سرور نگه دارید.
• هرگز از ()eval سمت کاربر استفاده نکنید، همیشه از .txt به جای .html استفاده کنید زیرا .txt از بسیاری از مشکلات XSS جلوگیری می کند.
• برای جلوگیری از مشکلات نفوذ (injection)، همیشه قبل از ارسال از رمزگذاری صحیح داده ها اطمینان حاصل کنید.
• کدهای ضعیف جاوا اسکریپت به هکرها کمک کرده و مشکلات امنیتی ایجاد می کند.
• کاربران می توانند کدهای جاوا اسکریپت را بخوانند بنابراین مطمئن شوید که همه داده ها و قوانین مهم و حیاتی به جای مرورگر در سرور قرار دارند.
• کدهای جاوا اسکریپت که در زمان بارگیری لازم نیستند را به پایین صفحه منتقل کنید تا صفحه سریعتر بارگیری شود. انتقال کدهای جاوا اسکریپت به انتهای صفحه باعث می شود تا مرورگر ابتدا قسمت های ضروری و لازم را نمایش دهد و بعد از آن جاوا اسکریپت را بارگیری کند.
• همیشه از جاوا اسکریپت کوچک شده استفاده کنید زیرا حذف کاراکترهای غیر ضروری اندازه جاوا اسکریپت را کاهش می دهد.

امنیت سمت سرور در AJAX

• از نوشتن کد سریال سازی در سمت سرور خودداری کنید.
• همیشه از توکن های CSRF در سمت سرور استفاده کنید.
• همیشه هنگام استفاده از JSON یا XML از فریمورک استفاده کنید.
• احراز هویت، مجوزهای قانونی و سایر محافظت های داده را یا در web.xml مشخص کنید یا آن را به صورت برنامه ای انجام دهید.

نتیجه گیری

یاد گرفتیم که با استفاده از AJAX می توانیم داده ها را به آسانی به صورت غیرهمزمان از طریق شبکه مبادله کنیم و بدون بارگیری مجدد کل محتوا آن را به صورت پویا به روزرسانی کنیم. محبوبیت AJAX در حال افزایش است زیرا یک زبان اسکریپت نویسی با استفاده از JavaScript است که مزایای بسیاری دارد.

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

یکی از اشیای مهمی که AJAX از آن استفاده می کند، شی XMLHTTPRequest از جاوا اسکریپت است که به ارتباط غیرهمزمان کاربر و سرور کمک می کند.

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

Ajax با بهبود فوق العاده ویژگی های سرعت، عملکرد و قابلیت استفاده، برنامه های وب را واکنشگراتر، سریعتر و کاربرپسندتر می کند.